Leaflet map plus data

package.json

@@ -69,6 +69,7 @@
     "d3-format": "^1.1.1",
     "d3-sankey": "^0.4.2",
     "d3-shape": "^1.0.6",
+    "es6-promise": "^4.1.0",
     "leaflet": "^1.0.3",
     "ramda": "^0.23.0",
     "rc-slider": "^5.4.0",

src/LeafletPlusData/LeafletMap.style.css

@@ -0,0 +1,6 @@
+.mapStyles {
+  height: 350px;
+  width: 100%;
+  padding: 5px;
+  margin:  9px;
+}

src/LeafletPlusData/LeafletPlusData.js

@@ -0,0 +1,122 @@
+import React, { Component } from 'react';
+import { Map, TileLayer, GeoJSON } from 'react-leaflet';
+import classNames from 'classnames/bind';
+import styles from './LeafletMap.style.css';
+import neighborhoodGeoJSON from './neighborhoodGeoJson.json';
+import RechartsPie from '../RechartsPie/RechartsPie';
+
+const cx = classNames.bind(styles);
+const className = cx({ mapStyles: true });
+
+// *********************
+// Mock data
+const mockDemographicData = [
+  { name: 'White', value: 400 }, { name: 'Black', value: 300 },
+  { name: 'Asian', value: 300 }, { name: 'Hispanic', value: 200 },
+  { name: 'Native American', value: 200 },
+];
+
+const mockDemographicData2 = [
+  { name: 'White', value: 400 }, { name: 'Black', value: 400 },
+  { name: 'Asian', value: 400 }, { name: 'Hispanic', value: 400 },
+  { name: 'Native American', value: 400 },
+];
+
+const mockDemographicData3 = [
+  { name: 'White', value: 200 }, { name: 'Black', value: 500 },
+  { name: 'Asian', value: 400 }, { name: 'Hispanic', value: 100 },
+  { name: 'Native American', value: 100 },
+];
+// *********************
+
+// Add mock data (or API fetched data) to imported GeoJSON with neighborhood data
+const addDemographicData = (neighborhoodGeoJSON, mockDemographicData2, mockDemographicData3) => {
+  const geoData = neighborhoodGeoJSON;
+  geoData.features.forEach((t) => {
+    const geoRecord = t;
+    geoRecord.properties.OBJECTID % 2 === 0 ?
+    geoRecord.properties.DEMOGRAPHICDATA = mockDemographicData2 :
+    geoRecord.properties.DEMOGRAPHICDATA = mockDemographicData3;
+  });
+  return geoData;
+};
+
+const geoJSONDemographics = addDemographicData(neighborhoodGeoJSON, mockDemographicData2, mockDemographicData3);
+
+
+export default class LeafletPlusData extends Component {
+
+  static displayName = 'react-leaflet with info beneath';
+  static propTypes = {
+    zoom: React.PropTypes.number.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      geoData: geoJSONDemographics,
+      center: this.props.position,
+      zoom: this.props.zoom,
+      attribute: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+      color: 'blue',
+      neighborhoodFocus: '(click ☝🏽)',
+      neighborhoodDemographicData: mockDemographicData,
+    };
+  }
+
+  handleClick = (feature, layer) => {
+    layer.on('click', () => {
+      this.setState({
+        neighborhoodFocus: `${feature.properties.NAME}`,
+        neighborhoodDemographicData: feature.properties.DEMOGRAPHICDATA,
+      });
+    });
+  }
+
+  render() {
+    require('../../assets/leaflet.css');
+    const dataDivStyle = { width: '32%', display: 'flex', flexDirection: 'column', padding: '0 40px' };
+
+    return (
+      <div className={'mainMap'} >
+        <Map
+          className={className}
+          zoom={this.state.zoom}
+          center={this.state.center}
+          zoomControl={false}
+          dragging={false}
+          scrollWheelZoom={false}
+          doubleClickZoom={false}
+        >
+          <TileLayer url={this.state.url} attribution={this.state.attribute} />
+          <GeoJSON data={this.state.geoData} onEachFeature={this.handleClick} color={this.state.color} />
+        </Map>
+        <h2 style={{ backgroundColor: 'rgb(245,245,245)', margin: '-10px 0', paddingLeft: '37px' }} >{this.state.neighborhoodFocus} Neighborhood Stats</h2>
+        <div style={{ display: 'flex', flexDirection: 'row', backgroundColor: 'rgb(245,245,245)' }}>
+          <div style={dataDivStyle}>
+            <h3>Race/Ethnicity</h3>
+            <RechartsPie
+              data={this.state.neighborhoodDemographicData}
+              chartProportions={this.props.chartProportions}
+              colors={this.props.colors}
+              legendStyles={this.props.legendStyles}
+            />
+          </div>
+          <div style={dataDivStyle}>
+            <h3>Household totals</h3>
+            <h3>{this.state.neighborhoodDemographicData[0].name}: {this.state.neighborhoodDemographicData[0].value}</h3>
+            <h3>{this.state.neighborhoodDemographicData[1].name}: {this.state.neighborhoodDemographicData[1].value}</h3>
+            <h3>{this.state.neighborhoodDemographicData[2].name}: {this.state.neighborhoodDemographicData[2].value}</h3>
+          </div>
+          <div style={dataDivStyle}>
+            <h3>Vulnerable populations</h3>
+            <h3>{this.state.neighborhoodDemographicData[0].name}: {this.state.neighborhoodDemographicData[0].value}</h3>
+            <h3>{this.state.neighborhoodDemographicData[1].name}: {this.state.neighborhoodDemographicData[1].value}</h3>
+            <h3>{this.state.neighborhoodDemographicData[2].name}: {this.state.neighborhoodDemographicData[2].value}</h3>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/RechartsPie/RechartsPie.js

@@ -3,11 +3,11 @@ import {
  PieChart, Pie, Cell, Legend,
 } from 'recharts';
 
-const RechartsPie = ({ data, chartProportions, colors, styles }) =>
+const RechartsPie = ({ data, chartProportions, colors, legendStyles }) =>
   <div style={{ display: 'flex', justifyContent: 'space-around', margin: 'auto' }} >
     <PieChart width={chartProportions.chartWidth} height={chartProportions.chartHeight} data={data} >
-      <Legend layout="vertical" iconSize={chartProportions.iconSize} wrapperStyle={styles} iconType="square" verticalAlign="middle" align="right" />
-      <Pie data={data} cx="50%" cy="50%" innerRadius={chartProportions.pieInnerRadius} outerRadius={chartProportions.pieOuterRadius} >
+      <Legend layout="vertical" iconSize={chartProportions.iconSize} wrapperStyle={legendStyles} iconType="square" />
+      <Pie data={data} cx="25%" cy="50%" innerRadius={chartProportions.pieInnerRadius} outerRadius={chartProportions.pieOuterRadius} >
         {
           data.map((entry, index) => (
             <Cell key={`cell-${index}`} fill={colors[index]} />
@@ -21,7 +21,7 @@ RechartsPie.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
   chartProportions: PropTypes.object.isRequired,
   colors: PropTypes.arrayOf(PropTypes.string),
-  styles: PropTypes.object,
+  legendStyles: PropTypes.object,
 };
 
 export default RechartsPie;

src/index.js

@@ -12,6 +12,7 @@ export ScrollToTop from './ScrollToTop/ScrollToTop';
 export Header from './Navigation/Header';
 export Nav from './Navigation/Nav';
 export NavRouterLink from './Navigation/NavRouterLink';
+export LeafletPlusData from './LeafletPlusData/LeafletPlusData';
 export RechartsPie from './RechartsPie/RechartsPie';
 export LeafletMap from './LeafletMap/LeafletMap';
 export StamenMap from './StamenMap/StamenMap';

stories/LeafletPlusData.story.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { LeafletPlusData } from '../src';
+import { colors } from './shared';
+
+const displayName = 'LeafletPlusData';
+const title = 'Leaflet with data on and below map';
+const description = 'react-leaflet map of Portland with GeoJSON neighborhood data on map and derived data beneath map displayed on click';
+
+const position = [45.52, -122.63];
+const zoom = 12;
+const maxzoom = 10;
+
+// This base can be adjusted to scale up or down the chart and legend
+const proportionBase = 200;
+
+// These multipliers can be adjusted to modify the individual
+const chartProportions = {
+  chartWidth: proportionBase * 1.9,
+  chartHeight: proportionBase * 0.6,
+  iconSize: proportionBase * 0.075,
+  pieInnerRadius: proportionBase * 0.1,
+  pieOuterRadius: proportionBase * 0.3,
+};
+
+// Styles here based on src/Pie/Pie.css
+const legendStyles = {
+  fontFamily: 'filson-soft',
+  fontSize: proportionBase * 0.08,
+  fontWeight: 300,
+  left: '50%',
+  top: '0%',
+};
+
+const demoCode = () => (
+  <LeafletPlusData
+    position={position}
+    zoom={zoom}
+    maxzoom={maxzoom}
+    zoomControl={false}
+    dragging={false}
+    scrollWheelZoom={false}
+    doubleClickZoom={false}
+    chartProportions={chartProportions}
+    colors={colors}
+    legendStyles={legendStyles}
+  />
+);
+
+const propDocs = { inline: true, propTables: [LeafletPlusData] };
+
+export default () => storiesOf(displayName, module)
+  .addWithInfo(
+    title,
+    description,
+    demoCode,
+    propDocs,
+  );

stories/RechartsPie.story.js

@@ -20,28 +20,29 @@ const proportionBase = 200;
 
 // These multipliers can be adjusted to modify the individual
 const chartProportions = {
-  chartWidth: proportionBase * 2,
+  chartWidth: proportionBase * 1.7,
   chartHeight: proportionBase * 1,
   iconSize: proportionBase * 0.075,
   pieInnerRadius: proportionBase * 0.2,
   pieOuterRadius: proportionBase * 0.4,
 };
 
 // Styles here based on src/Pie/Pie.css
-const styles = {
-  fontFamily: 'Roboto Condensed',
+
+const legendStyles = {
+  fontFamily: 'filson-soft',
   fontSize: proportionBase * 0.08,
-  fontWeight: 400,
-  color: '#706371',
-  fill: '#706371',
+  fontWeight: 300,
+  left: '60%',
+  top: '28%',
 };
 
 const demoCode = () => (
   <RechartsPie
     data={data}
     chartProportions={chartProportions}
     colors={colors}
-    styles={styles}
+    legendStyles={legendStyles}
   />
 );
 

stories/index.js

@@ -16,6 +16,7 @@ import headerStory from './Header.story';
 import leafletMap from './LeafletMap.story';
 import StamenMap from './StamenMap.story';
 import Welcome from './Welcome';
+import leafletPlusDataStory from './LeafletPlusData.story';
 import dropdownStory from './Dropdown.story';
 import rechartsPie from './RechartsPie.story';
 import heroStory from './Hero.story';
@@ -44,6 +45,8 @@ dropdownStory();
 barChartStory();
 footerStory();
 sankeyStory();
+sliderStory();
+leafletPlusDataStory();
 scrollToTopStory();
 rechartsPie();
 leafletMap();

yarn.lock

@@ -2476,6 +2476,10 @@ es6-map@^0.1.3:
     es6-symbol "~3.1.0"
     event-emitter "~0.3.4"
 
+es6-promise@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.0.tgz#dda03ca8f9f89bc597e689842929de7ba8cebdf0"
+
 es6-set@~0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"