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

/* global mapboxgl */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Immutable from 'immutable';

import { clickMap, setStyle } from '../actions/index';
import diffStyles from '../utilities/diff.js';

McCulloughRT

import Immutable from 'immutable';

export default function StylesheetReducer(styleState = null, action) {
  if(styleState === null && action.type !== 'SET_STYLE') return styleState;
  switch(action.type){
    case 'SET_STYLE': {
      return Immutable.fromJS(action.payload);
    }

    case 'CHANGE_VIZ': {

McCulloughRT

export function clickMap(features) {
  return {
    type: 'CLICK_MAP',
    payload: features
  }
}

export function setStyle(style) {
  return {
    type: 'SET_STYLE',

McCulloughRT

McCulloughRT

{"nodes":[{"name":"Myriel","group":1,"index":0,"size":0.7209293763998343},{"name":"Napoleon","group":1,"index":1,"size":0.19008044652307454},{"name":"Mlle.Baptistine","group":1,"index":2,"size":0.421867958921337},{"name":"Mme.Magloire","group":1,"index":3,"size":0.24110484315526914},{"name":"CountessdeLo","group":1,"index":4,"size":0.36278777647574234},{"name":"Geborand","group":1,"index":5,"size":0.5385537540779961},{"name":"Champtercier","group":1,"index":6,"size":0.7505003597013125},{"name":"Cravatte","group":1,"index":7,"size":0.32131801508759694},{"name":"Count","group":1,"index":8,"size":0.5108220520218651},{"name":"OldMan","group":1,"index":9,"size":0.2114232814695054},{"name":"Labarre","group":2,"index":10,"size":0.014195838194504873},{"name":"Valjean","group":2,"index":11,"size":0.053153007870215374},{"name":"Marguerite","group":3,"index":12,"size":0.5626772056992062},{"name":"Mme.deR","group":2,"index":13,"size":0.9345468097929939},{"name":"Isabeau","group":2,"index":14,"size":0.13760291223347254},{

McCulloughRT

{
  "nodes": [
    {
      "id": "Myriel",
      "group": 1,
      "size": 0.9977242561333428
    },
    {
      "id": "Napoleon",
      "group": 1,

McCulloughRT

{"Series_1996":[69500,57891.57483020678,42743.808,68169.20007245007,30399.316389255262,52539.264,53500,60149.294181573605,73411.76313140205,35105.478558672,57447.62351583704,79935.651274752,30268.46148314965,62377.04581792817,32608.347557976387,128278.37098009558,49882.9208435712,30451.880360273353,67016.67476722183,56584.89156340629,78150.84340247148,161750,67382.44194302839,65896.704,27350.796537041806,65169.92073107268,77204.57512690939,73979.77294983904,65683.0697132071,42049.016345223135,52810.46976390567,75743.55563605565,91337.81709053769,46116.72188928,54506.310651250715,45150.93598135447,65332.02267648,73900,60000.85122765202,72279.79523907989,65332.02267648,65100,69900,50052.30344416288,78511.79426656786,28582.448760177027,50032.025758106975,61606.2805357199,53802.84220416,61606.2805357199,56189.81354372014,57012.609324486926,60632.04353783733,25788.675573092052,53919.08649559071,60302.519715080234,171536.87599930252,83374.7881278066,50501.69015545091,51488.035219385594,15594.261454482043,108982.989

McCulloughRT

// Call projectImage with your image size to get back a set
// of lnglat coordinates representing the four corners of
// the image scaled to fit on the map canvas centered at 0 zoom
projectImage(imgSize) {
  // imgSize is in the form { x: int, y: int }
  const uL = this.map.project([-180, 85]);
  const uR = this.map.project([180,  85]);
  const lR = this.map.project([180, -85]);
  const lL = this.map.project([-180,-85]);

McCulloughRT

/* global mapboxgl */

import React, { Component } from 'react';
import './styles/reactmap.css';

export default class ReactMap extends Component {
  constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.projectImage = this.projectImage.bind(this);