everything

mbforr · Jan 7, 2020 · c5d779c · c5d779c
1 parent bdee257
commit c5d779c
Show file tree

Hide file tree

Showing 29 changed files with 2,093 additions and 106 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/public/index.html b/public/index.html
@@ -8,16 +8,14 @@
   <link rel="icon" href="https://carto.com/favicon.ico" />
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
   <link rel="stylesheet" href="dist/style.css" />
-  <link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v1.0.2/icons.css">
+  <link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.1.0/icons.css">
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
-  <script src="https://libs.cartocdn.com/airship-components/v1.0.2/airship.js"></script>
-  <!-- <script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script> -->
+  <script src="https://libs.cartocdn.com/airship-components/v2.1.1/airship.js"></script>
 
 </head>
 
-<body>
+<body class="as-app-body as-app">
   <div id="app"></div>
   <script src="dist/bundle.js"></script>
 </body>
-
-</html>
+</html>
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/components/CARTOMap.js b/src/components/CARTOMap.js
@@ -78,8 +78,17 @@ class CARTOMap extends Component {
         layer.on('featureClicked', this.openPopup.bind(this));
       }
 
+      if(options.featureClickColumns && layerName === 'stores') {
+        console.log(layerName)
+        layer.on('featureClicked', this.openPopupStores.bind(this));
+      }
+
       this.props.client.getLeafletLayer().addTo(this.props.map);
 
+      if (other.visible === false) {
+        layer.hide()
+      }
+
       return { ...all, [layerName]: { source, style, layer, ...other } };
     }, {});
 
@@ -105,8 +114,8 @@ class CARTOMap extends Component {
     if (!this.popup.isOpen()) {
       this.popup.openOn(this.props.map);
       render(<InfoWindow {...featureEvent.data} />, this.popup._contentNode);
-    }
-  }
+      }
+    }  
 
   render() {
     const { layers } = this.props;
@@ -134,4 +143,4 @@ const mapDispatchToProps = dispatch => ({
   changeCartoBBox: boundingbox => dispatch(changeCartoBBox(boundingbox))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(CARTOMap);
+export default connect(mapStateToProps, mapDispatchToProps)(CARTOMap);
diff --git a/src/components/CARTOMapPredict.js b/src/components/CARTOMapPredict.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import L from 'leaflet';
+import carto, { filter, source, style, layer  } from '@carto/carto.js';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+import { storeLayers, setMap, setBboxFilter, changeViewport, changeCartoBBox } from '../actions/actions';
+// import { Widgets, Legend, AirbnbPopup, MobileTabs } from '../components/components';
+import InfoWindow from '../components/InfoWindow'
+import layers from '../data/layers';
+import C from '../data/C'
+import '@carto/airship-style';
+
+// import './index.css';
+
+const { BASEMAP, BASEMAP_LABELS, CENTER, ZOOM } = C;
+
+class CARTOMapPredict extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...props
+    }
+  }
+
+  componentDidMount() {
+
+    // look into adding the map up above
+
+    const map = L.map('map', { zoomControl: false, maxZoom: 18 }).setView(this.props.viewport.center, this.props.viewport.zoom);
+
+    this.props.setMap(map);
+
+    L.tileLayer(BASEMAP).addTo(map);
+
+    // L.control.zoom({ position: 'bottomleft' }).addTo(map);
+
+    this.popup = L.popup({ closeButton: false });
+
+    // this.setBbbox(map.getBounds());
+
+    const bboxFilter = new carto.filter.BoundingBoxLeaflet(map);
+    this.props.changeCartoBBox(bboxFilter);
+
+    map.on('moveend', event => {
+      const boundingBox = event.target.getBounds();
+      const newCenter = event.target.getCenter();
+      const newZoom = event.target.getZoom();
+      const newViewport = {
+        center: newCenter,
+        zoom: newZoom
+      }
+
+      this.props.setBboxFilter([
+        boundingBox._northEast.lat,
+        boundingBox._northEast.lng,
+        boundingBox._southWest.lat,
+        boundingBox._southWest.lng
+      ])
+
+      this.props.changeViewport(newViewport);
+    });
+
+
+
+  }
+
+  setupLayers() {
+    const cartoLayers = Object.keys(layers).reduce((all, layerName) => {
+      const { options, ...other} = layers[layerName];
+
+      const source = new carto.source.SQL(other.query);
+      const style = new carto.style.CartoCSS(other.cartocss);
+      const layer = new carto.layer.Layer(source, style, options);
+
+      if(options.featureClickColumns) {
+        layer.on('featureClicked', this.openPopup.bind(this));
+      }
+
+      this.props.client.getLeafletLayer().addTo(this.props.map);
+
+      if (other.visible === false) {
+        layer.hide()
+      }
+
+
+      return { ...all, [layerName]: { source, style, layer, ...other } };
+    }, {});
+
+    // Add all layers at the same time so it doesn't reload multiple times
+    this.props.client.addLayers(Object.values(cartoLayers).map(item => item.layer));
+
+    // Labels need to be added after the layers
+    L.tileLayer(BASEMAP_LABELS).addTo(this.props.map);
+    console.log(cartoLayers)
+    this.props.storeLayers(cartoLayers)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.map && this.props.map) {
+      this.setupLayers();
+    }
+  }
+
+  openPopup(featureEvent) {
+    this.popup.setContent('');
+    this.popup.setLatLng(featureEvent.latLng);
+
+    if (!this.popup.isOpen()) {
+      this.popup.openOn(this.props.map);
+      render(<InfoWindow {...featureEvent.data} />, this.popup._contentNode);
+    }
+  }
+
+  render() {
+    const { layers } = this.props;
+    const hasLayers = Object.keys(layers).length > 0;
+
+    return (
+        <div id="map"></div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  client: state.client,
+  map: state.map,
+  layers: state.layers,
+  viewport: state.viewport,
+  boundingbox: state.boundingbox
+});
+
+const mapDispatchToProps = dispatch => ({
+  storeLayers: layers => dispatch(storeLayers(layers)),
+  setMap: map => dispatch(setMap(map)),
+  setBboxFilter: bbox => dispatch(setBboxFilter(bbox)),
+  changeViewport: viewport => dispatch(changeViewport(viewport)),
+  changeCartoBBox: boundingbox => dispatch(changeCartoBBox(boundingbox))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CARTOMapPredict);
diff --git a/src/components/CARTOVLMap.js b/src/components/CARTOVLMap.js
@@ -99,6 +99,11 @@ class CARTOVLMap extends Component {
 
     //   this.props.client.getLeafletLayer().addTo(this.props.map);
 
+    if (other.visible === false) {
+      layer.hide()
+    }
+
+
       return { ...all, [layerName]: { source, viz, layer, ...other } };
     }, {});
 

diff --git a/src/components/Page.js b/src/components/Page.js
@@ -8,25 +8,26 @@ import BottomBar from './layout/BottomBar'
 import Panel from './layout/Panel'
 import '@carto/airship-style';
 
+
 const Page = () => (
   <as-responsive-content>
     <body className="as-app-body as-app">
       <Header />
       <div className="as-content">
         <main className="as-main">
           <div className="as-map-area">
-            <CARTOVLMap />
+            <CARTOMap />
             {/* <Panel
               vertical='top'
               horizontal='left'
               background=''
               name='Controls'
             /> */}
           </div>
-          {/* <BottomBar
+          <BottomBar
             background=''
             name='Bottom'
-          /> */}
+          />
         </main>
         <RightBar
           size='l'
@@ -43,4 +44,4 @@ const Page = () => (
   </as-responsive-content>
 );
 
-export default Page;
+export default Page;
diff --git a/src/components/Predict.js b/src/components/Predict.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import CARTOMapPredict from './CARTOMapPredict';
+import CARTOVLMap from './CARTOVLMap';
+import Header from './layout/Header'
+import RightBar from './layout/RightBar'
+import LeftBar from './layout/LeftBar'
+import BottomBarPredict from './layout/BottomBarPredict'
+import Panel from './layout/Panel'
+import '@carto/airship-style';
+
+const Page = () => (
+  <as-responsive-content>
+    <body className="as-app-body as-app">
+      <Header />
+      <div className="as-content">
+        <main className="as-main">
+          <div className="as-map-area">
+            <CARTOMapPredict />
+            {/* <Panel
+              vertical='top'
+              horizontal='left'
+              background=''
+              name='Controls'
+            /> */}
+          </div>
+          <BottomBarPredict
+            background=''
+            name='Bottom'
+          />
+        </main>
+        <RightBar
+          size='l'
+          background=''
+          name='Right'
+        />
+        {/* <LeftBar
+          size='s'
+          background=''
+          name='Left'
+        /> */}
+      </div>
+    </body>
+  </as-responsive-content>
+);
+
+export default Page;