McCulloughRT

var degrees2meters = function(lon,lat) {
        var x = lon * 20037508.34 / 180;
        var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
        y = y * 20037508.34 / 180;
        return [x, y]
}

x = -122.6765
y = 45.5231

McCulloughRT

McCulloughRT

McCulloughRT

McCulloughRT

import React, { Component } from 'react';

class ReactMap extends Component {
  render(){
    return (
      <div id='map'></div>
    );
  }
}

McCulloughRT

  componentDidMount(){
    // pass in your map properties as props to the component
    const { token, longitude, latitude, zoom, styleID } = this.props;
    const mapConfig = {
      container: 'map',
      style: `mapbox://styles/${ styleID }`,
      center: [longitude, latitude],
      zoom: zoom,
    };

McCulloughRT

// Within your actions
export function setStyle(style) {
  return {
    type: 'SET_STYLE',
    payload: style
  }
}

/* ----------------------------*/

McCulloughRT

  componentWillReceiveProps(nextProps) {
    // Prevent the diff'ing if function is
    // triggered before a style is set
    if(this.props.mapStyle === null) return;
    const map = this.map;
    
    // Remember where we are in the lifecycle here,
    // even though we already update the Redux state,
    // this component's current properties still 
    // reflect the old state:

McCulloughRT

this.map.on('load', () => {
  // Get the map style and set it in the state tree
  const style = this.map.getStyle();
  this.props.setStyle(style); // <= action creator

  // Listen for a map click, get the features under the pointer
  // and pass them to a "clickMap" action that might update our UI
  // or highlight the feature in the stylesheet:
  this.map.on('click', event => {
    const features = this.map.queryRenderedFeatures(event.point);

McCulloughRT

import Immutable from 'immutable';

export default function StylesheetReducer(styleState = null, action) {

  switch(action.type){
    /* ... */
      
    /* Other reducer cases exist here */
      
    /* ... */