React Map Layers

This is a react component designed to display shapes on a google map for geoplotting of data.

Setup

Creating a layered map is easy and can be done entirely through JSON. Inside the src/assets/json folder of the parent project create a file called layers.json. This file struture is the following:

[
  {
    "name": "name of layer 1",
    "geojson": "reference_to_geojson1.json",
    "color": "hex color code",
    "data": {
      "id": 0,
      "somekey": "information to be passed to onClick callback"
    }
  },
  {
    "name": "name of layer 2",
    "geojson": "reference_to_geojson2.zip",
    "color": "hex color code",
    "data": {
      "id": 1.
      "somekey": "information to be passed to onClick callback"
    }
  }
]

These objects represent the different layers that will be toggleable by the application. The geojson key is a reference to a json or zip file (in src/assets/geojson) which represents the shape in geojson format. A shapefile can be converted to a geojson file by using this website.

The conversion can also be done by command line with ogr2ogr. The command is:

ogr2ogr -f GeoJSON output.geojson input.shp

Usage

This example simply renders all layers in layers.json on a map.

import layers from './assets/json/layers.json';
...
<ReactMapLayers
  //required props
  googlekey={'somegoogleapikey'}
  layers={layers}
  //optional props
  folder={'./otherfolder/geojson'} //defaults to 'src/assets/geojson'
  style={style} //defaults to {width: '80%', height: '800px', margin: 'auto'}
/>

This example shows how you can toggle different layers from the parent component.

import layers from './assets/json/layers.json';
...
toggleLayer = layerName => {
  if (this.state.layers.some(layer => layer.name === layerName)) {
    this.setState({
      layers: this.state.layers.filter(layer => layer.name !== layerName)
    })
  } else {
    this.setState({
      layers: [...this.state.layers, layers.find(layer => layer.name === layerName)]
    })
  }
}
...
<div>
  <div className="toggle_menu_column">
    {layers.map(layer => <button key={layer.name} onClick={() => this.toggleLayer(layer.name)}> {layer.name} </button>)}
  </div>
  <div className="map_column">
    <ReactMapLayers layers={this.state.layers} googlekey={'somegoogleapikey'}/>
  </div>
</div>

Yarn Scripts

Below are the included yarn scripts for use in development:

start - Just your normal start script, which loads up Webpack and opens your project in a new window.

hot - Same as start, except hot-reloading is enabled which allows CSS to change without restarting the interactive.

silent - Same as hot, except it does not load a new window.

commit - Launches Commitizen, which you'll want to use for your commits.

build - Builds your React application into the ./docs folder.