Base React-map + DeckGL MAY2019

h3Layer.js

import { H3HexagonLayer } from '@deck.gl/geo-layers'

/**
 * Data format:
 * [
 *   {
 *     i: '882830829bfffff',
 *     c: 14030
 *   },
 *   ...
 * ]
 */
export default function createHexLayer(data) {
  return new H3HexagonLayer({
    id: 'h3-hexagon-layer',
    data,
    getHexagon: d => d.i,
    getColor: d => [255, (1 - d.c / 20000) * 255, 0],
    getElevation: d => d.c / 3
  })
}

Map.jsx

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 = {
    longitude: this.props.longitude,
    latitude: this.props.latitude,
    zoom: this.props.zoom,
    pitch: 0,
    bearing: 0
  }

  componentDidUpdate(prevProps) {
    const { longitude, latitude, zoom } = this.props
    const longitudePropChanged = prevProps.longitude !== longitude
    const latitudePropChanged = prevProps.latitude !== latitude
    const zoomPropChanged = prevProps.zoom !== zoom

    if (longitudePropChanged) {
      this.setState({ longitude })
    }

    if (latitudePropChanged) {
      this.setState({ latitude })
    }

    if (zoomPropChanged) {
      this.setState({ zoom })
    }
  }

  handleViewportChange = ({ longitude, latitude, zoom, pitch, bearing }) => {
    this.setState({ longitude, latitude, zoom, pitch, bearing })
  }

  render() {
    const { longitude, latitude, zoom, pitch, bearing } = this.state
    const { minZoom, maxZoom, width, height, children, layers } = this.props
    const viewport = { width, height, longitude, latitude, zoom, pitch, bearing }
    return (
      <MapGL
        {...viewport}
        mapboxApiAccessToken=REDACTED
        minZoom={minZoom}
        maxZoom={maxZoom}
        onViewportChange={this.handleViewportChange}>
        <DeckGL {...viewport} layers={layers} />
        {children}
      </MapGL>
    )
  }
}

Map.propTypes = {
  minZoom: PropTypes.number,
  maxZoom: PropTypes.number,
  minLongitude: PropTypes.number,
  maxLongitude: PropTypes.number,
  minLatitude: PropTypes.number,
  maxLatitude: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
  longitude: PropTypes.number,
  latitude: PropTypes.number,
  zoom: PropTypes.number,
  layers: PropTypes.array,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
}

Map.defaultProps = {
  minZoom: MIN_ZOOM,
  maxZoom: MAX_ZOOM,
  minLongitude: -180,
  maxLongitude: 180,
  minLatitude: -90,
  maxLatitude: 90,
  maxBounds: [[], []],
  longitude: -94.1629,
  latitude: 34.5133,
  zoom: MIN_ZOOM,
  layers: [],
}

export default Map

MapPage.jsx

import IndexLayout from '../layouts'
import Map from '../components/maps/Map'
import h3Layer from '../components/maps/h3Layer'
import MapPanel from '../components/maps/MapPanel'
import * as React from 'react'

const data =[{"i": "88be63546dfffff", "c": 65}, {"i": "8828309515fffff", "c": 4}, {"i": "881fb42837fffff", "c": 3}, {"i": "88be635631fffff", "c": 1551}, {"i": "88be635635fffff", "c": 549}, {"i": "88be635441fffff", "c": 258}, {"i": "8844a110d1fffff", "c": 12}, {"i": "88be635623fffff", "c": 12}, {"i": "88be635643fffff", "c": 202}, {"i": "88be635713fffff", "c": 86}, {"i": "88be63ccb1fffff", "c": 30}, {"i": "88be635637fffff", "c": 327}, {"i": "88be635511fffff", "c": 2}, {"i": "88be635555fffff", "c": 9}, {"i": "88be635715fffff", "c": 10}, {"i": "882b9bc551fffff", "c": 49}, {"i": "88391c70c3fffff", "c": 41}, {"i": "884995ba27fffff", "c": 172}, {"i": "88a8a06021fffff", "c": 323}, {"i": "88be635733fffff", "c": 41}, {"i": "88be635449fffff", "c": 559}, {"i": "884cee781dfffff", "c": 311}, {"i": "88268cd131fffff", "c": 5}, {"i": "88be635405fffff", "c": 264}, {"i": "882a100f2bfffff", "c": 235}, {"i": "88be635403fffff", "c": 82}, {"i": "88be635659fffff", "c": 65}, {"i": "882a100dedfffff", "c": 410}, {"i": "88a8100c1dfffff", "c": 270}, {"i": "882a1072cbfffff", "c": 2071}, {"i": "88194ad309fffff", "c": 2101}, {"i": "8844a110dbfffff", "c": 1026}, {"i": "88394460c3fffff", "c": 299}, {"i": "88be63c25dfffff", "c": 48}, {"i": "8828308107fffff", "c": 226}, {"i": "8866183697fffff", "c": 1}, {"i": "88be63cc45fffff", "c": 16}, {"i": "8839446015fffff", "c": 618}, {"i": "88a8100e87fffff", "c": 1928}, {"i": "88a8100eabfffff", "c": 970}, {"i": "8829a1d6d7fffff", "c": 252}, {"i": "882a1072c3fffff", "c": 440}, {"i": "88a8100c55fffff", "c": 257}, {"i": "8829a1d755fffff", "c": 774}, {"i": "8839540ad1fffff", "c": 184}, {"i": "884cee7b4dfffff", "c": 8}, {"i": "88be635633fffff", "c": 38}, {"i": "8839601167fffff", "c": 42}, {"i": "88194ad327fffff", "c": 453}, {"i": "88be63ccb9fffff", "c": 138}, {"i": "881fb46447fffff", "c": 189}, {"i": "88a8100db5fffff", "c": 346}, {"i": "88390cb19dfffff", "c": 15}, {"i": "88a8100ebdfffff", "c": 1100}, {"i": "88be6356b9fffff", "c": 3}, {"i": "8839446157fffff", "c": 4}, {"i": "88194ad347fffff", "c": 2709}, {"i": "881fb46445fffff", "c": 133}, {"i": "88283082c1fffff", "c": 547}, {"i": "88a8100c15fffff", "c": 647}, {"i": "88a8103b65fffff", "c": 108}, {"i": "8829a1d689fffff", "c": 213}, {"i": "88a72651e3fffff", "c": 103}, {"i": "882baa4453fffff", "c": 1014}, {"i": "88be63563dfffff", "c": 353}, {"i": "881f058313fffff", "c": 38}, {"i": "8828346cddfffff", "c": 266}, {"i": "88a8100ea5fffff", "c": 862}, {"i": "88a8100e33fffff", "c": 262}, {"i": "88be63d5e7fffff", "c": 27}, {"i": "88195da4b9fffff", "c": 7}, {"i": "88a8a06167fffff", "c": 61}, {"i": "884995b855fffff", "c": 52}, {"i": "884995ba3dfffff", "c": 396}, {"i": "884cf24859fffff", "c": 1}, {"i": "886618365bfffff", "c": 1}, {"i": "8848a20741fffff", "c": 1}, {"i": "8828308101fffff", "c": 157}, {"i": "884cee7a29fffff", "c": 114}, {"i": "88283082bdfffff", "c": 176}, {"i": "8828308a89fffff", "c": 27}, {"i": "881fb46623fffff", "c": 130}, {"i": "8839446037fffff", "c": 191}, {"i": "88194ad36bfffff", "c": 644}, {"i": "882a100d61fffff", "c": 70}, {"i": "8839446033fffff", "c": 418}, {"i": "882a3064e3fffff", "c": 85}, {"i": "8828309507fffff", "c": 18}, {"i": "88281eb8b3fffff", "c": 3}, {"i": "8828308161fffff", "c": 11}, {"i": "88c2f15603fffff", "c": 1}, {"i": "88b2c554cdfffff", "c": 123}, {"i": "881fb46759fffff", "c": 75}, {"i": "881fb46649fffff", "c": 4}, {"i": "880982ab5dfffff", "c": 104}, {"i": "88c2e311d5fffff", "c": 132}, {"i": "881fb46423fffff", "c": 6}, {"i": "88c2e3113dfffff", "c": 237}, {"i": "884980715bfffff", "c": 2}, {"i": "881fb465cdfffff", "c": 245}, {"i": "881fb5231bfffff", "c": 23}, {"i": "884cee7849fffff", "c": 24}, {"i": "8828309b5dfffff", "c": 42}, {"i": "882baa441bfffff", "c": 102}, {"i": "881fb52317fffff", "c": 9}, {"i": "8867412463fffff", "c": 31}, {"i": "88499585e3fffff", "c": 12}, {"i": "8866e42f67fffff", "c": 3}, {"i": "88195da4c3fffff", "c": 499}, {"i": "8839446b03fffff", "c": 1}, {"i": "8829a1d6bdfffff", "c": 66}, {"i": "883944608dfffff", "c": 168}, {"i": "882830816bfffff", "c": 43}, {"i": "881f1d4d29fffff", "c": 321}, {"i": "881fb52353fffff", "c": 137}, {"i": "881e3541ebfffff", "c": 26}, {"i": "88ceaa6713fffff", "c": 1}, {"i": "88b2eea1a3fffff", "c": 11}, {"i": "881f05ba23fffff", "c": 9}, {"i": "8820cc9b59fffff", "c": 2}, {"i": "88b2c5543bfffff", "c": 75}, {"i": "881fb46621fffff", "c": 370}, {"i": "881f18b25bfffff", "c": 115}, {"i": "8829a19909fffff", "c": 219}, {"i": "884995ba03fffff", "c": 101}, {"i": "883969a809fffff", "c": 14}, {"i": "881f946a8dfffff", "c": 9}, {"i": "882832b02dfffff", "c": 12}, {"i": "881fb474b7fffff", "c": 9}, {"i": "881fb466ebfffff", "c": 12}, {"i": "882a107763fffff", "c": 24}, {"i": "88194adab9fffff", "c": 7}, {"i": "8829a56805fffff", "c": 54}, {"i": "882a100d3bfffff", "c": 268}, {"i": "882ab46225fffff", "c": 1}, {"i": "881fb46669fffff", "c": 458}, {"i": "8829a19953fffff", "c": 8}, {"i": "88200322c1fffff", "c": 37}, {"i": "88a8103b47fffff", "c": 24}, {"i": "88b2c556a7fffff", "c": 219}, {"i": "8866e42883fffff", "c": 171}, {"i": "88be63cc05fffff", "c": 6}, {"i": "88a8103b45fffff", "c": 20}, {"i": "88a8100c11fffff", "c": 729}, {"i": "8828309539fffff", "c": 8}, {"i": "88390cb1b9fffff", "c": 778}, {"i": "8829a1d6e7fffff", "c": 26}, {"i": "881fb4646dfffff", "c": 139}, {"i": "88a8c0cc4bfffff", "c": 91}, {"i": "88be635463fffff", "c": 107}, {"i": "882a100f23fffff", "c": 340}, {"i": "8828308f01fffff", "c": 16}, {"i": "88283468c9fffff", "c": 7}, {"i": "8827526d65fffff", "c": 4}, {"i": "8819427643fffff", "c": 29}, {"i": "8866e42d6dfffff", "c": 15}, {"i": "88283461bdfffff", "c": 96}, {"i": "8866e09061fffff", "c": 37}, {"i": "884995ba39fffff", "c": 220}, {"i": "88390cb1bbfffff", "c": 234}, {"i": "884cee7a05fffff", "c": 48}, {"i": "88283098e9fffff", "c": 25}, {"i": "88194e745bfffff", "c": 56}, {"i": "8828309359fffff", "c": 3}, {"i": "882baa440dfffff", "c": 55}, {"i": "8829a1d441fffff", "c": 26}, {"i": "8828346e91fffff", "c": 49}, {"i": "88194dbad7fffff", "c": 3}, {"i": "88268cdabdfffff", "c": 26}, {"i": "88390cb1b5fffff", "c": 389}, {"i": "8828308285fffff", "c": 203}, {"i": "8828309557fffff", "c": 56}, {"i": "884983ca45fffff", "c": 44}, {"i": "88be6356a3fffff", "c": 33}, {"i": "881f1d4895fffff", "c": 74}, {"i": "88b2c50937fffff", "c": 1}, {"i": "881fb465c1fffff", "c": 146}, {"i": "8829a199a9fffff", "c": 1}, {"i": "8829a18969fffff", "c": 8}, {"i": "88390cb155fffff", "c": 5}, {"i": "8828308119fffff", "c": 46}, {"i": "88194ad125fffff", "c": 125}, {"i": "8844409645fffff", "c": 11}, {"i": "88be63571bfffff", "c": 95}, {"i": "884995b8c1fffff", "c": 9}, {"i": "881fb465c9fffff", "c": 117}, {"i": "881f356297fffff", "c": 1}, {"i": "882a100a11fffff", "c": 12}, {"i": "88489e3559fffff", "c": 9}, {"i": "88391c70ebfffff", "c": 18}, {"i": "882a100d09fffff", "c": 507}, {"i": "8828308a5dfffff", "c": 16}, {"i": "882830828dfffff", "c": 204}, {"i": "882baa46e7fffff", "c": 27}, {"i": "88194adacdfffff", "c": 7}, {"i": "88a88cdb39fffff", "c": 42}, {"i": "88194e69e5fffff", "c": 4}, {"i": "8829a1d661fffff", "c": 4}, {"i": "8829a1d443fffff", "c": 46}, {"i": "88283082b7fffff", "c": 17}, {"i": "8844a13b3bfffff", "c": 38}, {"i": "881969c985fffff", "c": 62}, {"i": "8828308a8bfffff", "c": 31}, {"i": "88394461d9fffff", "c": 873}, {"i": "88393362b3fffff", "c": 301}, {"i": "88b2c55439fffff", "c": 216}, {"i": "88185ba13dfffff", "c": 2}, {"i": "88281ebb53fffff", "c": 39}, {"i": "8828d55529fffff", "c": 130}, {"i": "88b2c50b67fffff", "c": 25}, {"i": "884995ba33fffff", "c": 46}, {"i": "8828d542e9fffff", "c": 4}, {"i": "8828d55091fffff", "c": 2}, {"i": "88283226c7fffff", "c": 1}, {"i": "88be635687fffff", "c": 52}, {"i": "88be6352d3fffff", "c": 4}, {"i": "88283429b3fffff", "c": 35}, {"i": "8828303803fffff", "c": 4}, {"i": "882830cac9fffff", "c": 2}, {"i": "88a8a078adfffff", "c": 37}, {"i": "884995b9d9fffff", "c": 2}, {"i": "8828342985fffff", "c": 2}, {"i": "88c2f26f27fffff", "c": 2}, {"i": "88194ad329fffff", "c": 1268}, {"i": "8867412eb1fffff", "c": 5}, {"i": "88283082abfffff", "c": 155}, {"i": "88be6354e9fffff", "c": 15}, {"i": "883969ab21fffff", "c": 17}, {"i": "88be635465fffff", "c": 18}, {"i": "881f1d4d2dfffff", "c": 29}, {"i": "882830821bfffff", "c": 39}, {"i": "88394461c9fffff", "c": 44}, {"i": "88394460e1fffff", "c": 204}, {"i": "88b2c5541bfffff", "c": 182}, {"i": "8839446031fffff", "c": 61}, {"i": "88be63cc55fffff", "c": 56}, {"i": "8828308109fffff", "c": 185}, {"i": "8828308289fffff", "c": 1061}, {"i": "8828309527fffff", "c": 60}, {"i": "8828308299fffff", "c": 117}, {"i": "88c2f1ccb3fffff", "c": 11}, {"i": "88c2f1cca1fffff", "c": 30}, {"i": "888e62c557fffff", "c": 4}, {"i": "8848e5b643fffff", "c": 9}, {"i": "88283081a1fffff", "c": 18}, {"i": "88194ad149fffff", "c": 309}, {"i": "8828d55523fffff", "c": 2}, {"i": "88283082c3fffff", "c": 107}, {"i": "88394461dbfffff", "c": 373}, {"i": "8828308a83fffff", "c": 103}, {"i": "884995b845fffff", "c": 292}, {"i": "881fb475bdfffff", "c": 597}, {"i": "88390cb1b7fffff", "c": 618}, {"i": "88283082b9fffff", "c": 85}, {"i": "882830811dfffff", "c": 27}, {"i": "8828308211fffff", "c": 23}, {"i": "88283098e1fffff", "c": 4}, {"i": "8819423b17fffff", "c": 178}, {"i": "88283081a7fffff", "c": 13}, {"i": "8829a1d753fffff", "c": 225}, {"i": "88c2e31107fffff", "c": 43}, {"i": "881e8329d9fffff", "c": 19}, {"i": "884995ba07fffff", "c": 85}, {"i": "884995b85dfffff", "c": 26}, {"i": "88b2c55403fffff", "c": 42}, {"i": "88390cb985fffff", "c": 16}, {"i": "88410349b5fffff", "c": 20}, {"i": "88411c86e7fffff", "c": 3}, {"i": "88194ad833fffff", "c": 714}, {"i": "884995b8a1fffff", "c": 18}, {"i": "88411c86dbfffff", "c": 2}, {"i": "88410349b1fffff", "c": 25}, {"i": "882a100f31fffff", "c": 9}, {"i": "881f058357fffff", "c": 56}, {"i": "88390ca203fffff", "c": 21}, {"i": "884cf2400dfffff", "c": 2}, {"i": "88a8103b25fffff", "c": 15}, {"i": "8828f00231fffff", "c": 22}, {"i": "884980b925fffff", "c": 64}, {"i": "884cee7a23fffff", "c": 62}, {"i": "8819423b15fffff", "c": 10}, {"i": "8829a199c7fffff", "c": 1}, {"i": "8811aa7a93fffff", "c": 28}, {"i": "8811aa7a85fffff", "c": 51}, {"i": "8839336765fffff", "c": 276}, {"i": "881f1b54bbfffff", "c": 398}, {"i": "886d69365dfffff", "c": 3}, {"i": "888e62c565fffff", "c": 48}, {"i": "88344cd84bfffff", "c": 1}, {"i": "884995ba23fffff", "c": 160}, {"i": "88c2f1ccb5fffff", "c": 13}, {"i": "88661834d9fffff", "c": 4}, {"i": "88390cb1b1fffff", "c": 929}, {"i": "884995b847fffff", "c": 36}, {"i": "8828f00049fffff", "c": 59}, {"i": "8839468067fffff", "c": 64}, {"i": "88390ca34bfffff", "c": 865}, {"i": "884995b859fffff", "c": 73}, {"i": "884cee7a35fffff", "c": 2}, {"i": "884995bb0bfffff", "c": 4}, {"i": "88344cd209fffff", "c": 34}, {"i": "882b9b7b0dfffff", "c": 1}, {"i": "881958aaabfffff", "c": 3}, {"i": "888e62c037fffff", "c": 2}, {"i": "882a100d17fffff", "c": 156}, {"i": "888e62c753fffff", "c": 2}, {"i": "88a8100cddfffff", "c": 158}, {"i": "88c2e31ad9fffff", "c": 23}, {"i": "884cf2402bfffff", "c": 15}, {"i": "883920cd11fffff", "c": 3}, {"i": "8828f0032dfffff", "c": 1}, {"i": "884cee788dfffff", "c": 43}, {"i": "881e3541c5fffff", "c": 8}, {"i": "8828346e9bfffff", "c": 3}, {"i": "882baa4409fffff", "c": 83}, {"i": "884802ba21fffff", "c": 7}, {"i": "8848b2a637fffff", "c": 3}, {"i": "8829a1d0d1fffff", "c": 19}, {"i": "8828f00043fffff", "c": 8}, {"i": "88184b5421fffff", "c": 11}, {"i": "883929a48dfffff", "c": 1}, {"i": "8867412467fffff", "c": 49}, {"i": "8839220f07fffff", "c": 12}, {"i": "88a8100f17fffff", "c": 18}, {"i": "88283082d3fffff", "c": 132}, {"i": "8839446017fffff", "c": 76}, {"i": "881f8342c1fffff", "c": 73}, {"i": "881e037ae3fffff", "c": 21}, {"i": "881e03785bfffff", "c": 9}, {"i": "8839540f49fffff", "c": 18}, {"i": "882a340825fffff", "c": 3}, {"i": "884cee7943fffff", "c": 67}, {"i": "881fb42925fffff", "c": 126}, {"i": "8828f00059fffff", "c": 415}, {"i": "8829a1c6d3fffff", "c": 1}, {"i": "882a10725bfffff", "c": 100}, {"i": "881951b71bfffff", "c": 7}, {"i": "884995b8abfffff", "c": 1}, {"i": "8844a11269fffff", "c": 93}, {"i": "882a10b819fffff", "c": 31}, {"i": "8839708d29fffff", "c": 18}, {"i": "88499585edfffff", "c": 13}, {"i": "88391d0023fffff", "c": 23}, {"i": "88c2e31167fffff", "c": 21}, {"i": "8828f00303fffff", "c": 62}, {"i": "884cee7a07fffff", "c": 21}, {"i": "88a8100cc3fffff", "c": 305}, {"i": "884cee4e9bfffff", "c": 107}, {"i": "8829a1d623fffff", "c": 66}, {"i": "88a8103a89fffff", "c": 9}, {"i": "88c2e311e1fffff", "c": 20}, {"i": "884995b83bfffff", "c": 68}, {"i": "884995b861fffff", "c": 6}, {"i": "88a8a07881fffff", "c": 116}, {"i": "884cee784dfffff", "c": 37}, {"i": "88be0e3467fffff", "c": 3}, {"i": "8829a19859fffff", "c": 240}, {"i": "88396018ddfffff", "c": 148}, {"i": "8829a19ae5fffff", "c": 456}, {"i": "881e037aa1fffff", "c": 419}, {"i": "8828308123fffff", "c": 20}, {"i": "882a100d3dfffff", "c": 261}, {"i": "882a100d23fffff", "c": 145}, {"i": "882a1072ddfffff", "c": 317}, {"i": "881eb004b1fffff", "c": 16}, {"i": "8839540ad7fffff", "c": 68}, {"i": "8844464223fffff", "c": 8}, {"i": "884446423dfffff", "c": 16}, {"i": "8819425913fffff", "c": 14}, {"i": "884cee4e9dfffff", "c": 87}, {"i": "88195da69dfffff", "c": 5}, {"i": "88390cb1bdfffff", "c": 90}, {"i": "8829a1d631fffff", "c": 180}, {"i": "8849839987fffff", "c": 1}, {"i": "88a8100c91fffff", "c": 9}, {"i": "88a8103b2dfffff", "c": 32}, {"i": "8819695353fffff", "c": 149}, {"i": "88283082c7fffff", "c": 197}, {"i": "8828308281fffff", "c": 399}, {"i": "882a107a6bfffff", "c": 17}, {"i": "88394461d1fffff", "c": 422}, {"i": "88a8100c49fffff", "c": 253}, {"i": "88c2f1192dfffff", "c": 3}, {"i": "88a8100e81fffff", "c": 317}, {"i": "8844a11765fffff", "c": 96}, {"i": "881e8329c1fffff", "c": 4}, {"i": "88b321d657fffff", "c": 11}, {"i": "8828f00227fffff", "c": 38}, {"i": "8844a110e5fffff", "c": 7}, {"i": "88be0e34e3fffff", "c": 277}]

const MapPage: React.FunctionComponent = () => (
  <IndexLayout>
    <div id='container' style={{top: '64px', left: '-1px', right: '-1px', bottom: '0px', position: 'absolute', overflow: 'none'}}>
      <MapPanel>
        <Map longitude={-122} latitude={37.8} zoom={8} layers={[h3Layer(data)]}/>
      </MapPanel>
    </div>
  </IndexLayout>
)

export default MapPage

package.json

{
  "version": "0.0.0",
  "private": true,
  "author": "Tom Watson <thomasgabriel.watson@gmail.com>",
  "license": "MIT",
  "scripts": {
    "deploy": "gatsby build && gh-pages -d public",
    "build": "gatsby build",
    "clean": "rimraf public",
    "dev": "gatsby develop",
    "lint": "tslint -t stylish -p .",
    "lint:fix": "tslint -p tsconfig.json -t stylish --fix 'src/**/*.ts' 'test/**/*.ts'",
    "start": "npm run dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {  // Yes I have stripped out a bunch of unrelated dependencies
    "@deck.gl/core": "^7.0.4",
    "@deck.gl/geo-layers": "^7.0.4",
    "@deck.gl/layers": "^7.0.4",
    "@deck.gl/react": "^7.0.4",
    "react": "16.6.3",
    "react-dom": "16.6.3",
    "react-map-gl": "^4.1.2",
  },
}