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

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

import Immutable from 'immutable';

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

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

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: