Tom Watson thomasgwatson

Mapbox GL Synced Dual Maps

The visualization demonstrates how to syncronize the state of two side-by-side Mapbox GL based maps. As the user interacts with one of the two maps, the state of the map (center position, zoom level, pitch and bearing) is dynamically copied to the second map (and vice versa). The code also demonstrates how to prevent call stack overflow due to recursive event handler triggering when the map state is updated.

The dataset is based on driver license suspensions from California DMV and East Bay Community Law Center. See prior visualization here

See the script in action at bl.ocks.org/boeric here, and fullscreen here

forked from boeric's block: Mapbox GL Synced Dual Maps

Mapbox GL Synced Dual Maps

The visualization demonstrates how to syncronize the state of two side-by-side Mapbox GL based maps. As the user interacts with one of the two maps, the state of the map (center position, zoom level, pitch and bearing) is dynamically copied to the second map (and vice versa). The code also demonstrates how to prevent call stack overflow due to recursive event handler triggering when the map state is updated.

The dataset is based on driver license suspensions from California DMV and East Bay Community Law Center. See prior visualization here

forked from boeric's block: Mapbox GL Synced Dual Maps

Driver License Suspensions II

The visualization shows driver license suspensions in California per zip code due to "failure to pay" or "failure to appear". The viz is using the Mapbox GL API, which provides high performance rendering of complex geo features (which in this case includes over 1600 high resolution zip code boundaries).

The viz is based on the Mapbox GL API and examples by Anand Thakker here, and here, and Bobby Sudekum here.

The viz is also using the D3 and Topojson libraries.

Four data files are used by the script: a) driver license suspension data (CSV), b) zip code meta data (CSV), c) California county boundaries (Topojson) and d) Zip code boundaries (Topojson).

See the viz in action here, and [f

	import styles from './waypointChecker.css'
	import React, { useState, useEffect } from 'react'
	import PropTypes from 'prop-types'
	import queryString from 'query-string'
	import { useSelector } from 'react-redux'
	import Layout from '../../components/Layout'
	import MapPanel from '../../components/MapPanel'
	import Map from '../../components/Map'
	import FormValueOnChangeWrapper from '../../components/forms/FormValueOnChangeWrapper'
	import { useEnsureLastKnownRigs } from '../../hooks/useEnsureRigs'

	import React, { Component } from 'react'
	import PropTypes from 'prop-types'
	import MapGL from 'react-map-gl'
	import DeckGL from '@deck.gl/react'

	const MAX_ZOOM = 19
	const MIN_ZOOM = 2

	class Map extends Component {
	state = {

	const HtmlWebPackPlugin = require('html-webpack-plugin')

	const htmlWebpackPlugin = new HtmlWebPackPlugin({
	template: './src/index.html',
	filename: './index.html'
	})

	module.exports = {
	module: {
	rules: [

	https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e#.iiprvvekh

	tom.watson-Today at 3:45 PM
	Are thunks or sagas better suited to handling persistent connections? I'm about to try implementing async stuff with redux for the first time...
	jokeyrhyme-Today at 4:06 PM
	@tom.watson you can have a subscriber to the store publish changes to a WebSocket or something. And you could have an event listener on the socket dispatch actions to the store.
	A persistent connection is really just an input/output, just like the DOM or IndexedDB are.
	You might not need either thunks or sagas for that.
	tom.watson-Today at 4:12 PM
	@jokeyrhyme I guess I'm wondering where I put that code and instantiate it. I don't want to tack it on to my React Component...

	/* @flow */
	import React, {Component, PropTypes} from 'react'
	import Layers from '../../utils/map/layers.js'
	import { connect } from 'react-redux'
	import Map from '../../containers/Map.js'
	import MapTools from '../../containers/MapTools.js'
	import MapLeftNav from '../../containers/MapLeftNav.js'
	import * as mainMapActions from 'redux/modules/mainMap'
	import { push } from 'react-router-redux'
	const actions = Object.assign({push: push}, mainMapActions)

	export const NEW_MESSAGES = 'vehicleMessages/NEW_MESSAGES'

	const initialState = {
	vehicles: {},
	traces: {},
	updateCounter: 1,
	vehicleMessagesLoading: false,
	}

	export default function reducer (state = initialState, action = {}) {

	import React, {Component, PropTypes} from 'react'
	import LeftNav from 'material-ui/lib/left-nav'
	import AutoComplete from 'material-ui/lib/auto-complete'
	import MenuItem from 'material-ui/lib/menus/menu-item'
	import Checkbox from 'material-ui/lib/checkbox'
	import ToggleIconLeft from 'material-ui/lib/svg-icons/hardware/keyboard-arrow-left'
	import ToggleIconRight from 'material-ui/lib/svg-icons/hardware/keyboard-arrow-right'
	import Paper from 'material-ui/lib/paper'

	export default class MapLeftNav extends Component {