mapboxgl choropleth working

justice40-frontend/src/components/mapboxmap.js

@@ -1,22 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import ReactMapGL from 'react-map-gl';
-
-const MapboxMap = () => {
-    const [viewport, setViewport] = useState({
-        latitude: 39.289444,
-        longitude: -76.615278,
-        zoom: 8
-      });
-    
-      return (
-        <ReactMapGL 
-          {...viewport}
-          mapboxApiAccessToken={process.env.GATSBY_MAPBOX_ACCESS_TOKEN}
-          width="100%"
-          height="400px"
-          onViewportChange={(viewport) => setViewport(viewport)}
-        />
-      );
-}
-
-export default MapboxMap;

justice40-frontend/src/pages/mapbox.js

@@ -1,68 +1,92 @@
 import React, { useRef, useEffect, useState } from 'react';
 import Layout from '../components/layout';
-import MapboxMap from '../components/mapboxmap'
+import ReactMapGL, {Layer, Source} from 'react-map-gl';
 import * as mapboxStyles from "./mapbox.module.css";
 
-// mapboxgl.workerClass = MapboxWorker;
 
-// markup
+const xyzSource = {
-const MapboxPage = () => {
+  name: "public.maryland",
-    // const mapContainer = useRef();
+  scheme: 'xyz',
-    // const [lng, setLng] = useState(-76.615278);
+  tilejson: "2.0.0",
-    // const [lat, setLat] = useState(39.289444);
+  minzoom: 0,
-    // const [zoom, setZoom] = useState(9);
+  maxzoom: 22,
+  prefetchable: true,
+  tiles: ["http://localhost:7800/public.maryland/{z}/{x}/{y}.mvt"],
+  type: 'vector'
+};
 
-    // useEffect(() => {
+const layerStyle = {
-    //     const map = new mapboxgl.Map({
+  id: 'public.maryland.MultiPolygon.fill',
-    //         container: mapContainer.current,
+  type: 'fill',
-    //         style: 'mapbox://styles/mapbox/streets-v11',
+  source: "public.maryland",
-    //         center: [lng, lat],
+  "source-layer": "public.maryland",
-    //         zoom: zoom
+  paint: {
-    //     });
+    "fill-color": [
+        "interpolate",
+        ["linear"],
+        ["get", "lowincpct"],
+        0,
+        "white",
+        1,
+        "rgb(0,94,162)"
+    ],
+    "fill-opacity": 0.5
+  }
+};
 
-    //     map.on('load', () => {
+const mapStyle = {
-    //         map.resize();
+  'version': 8,
-    //     });
+  'sources': {
+    'carto-light': {
+      'type': 'raster',
+      'tiles': [
+        "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
+        "https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
+        "https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
+        "https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
+      ]
+    }
+  },
+  'layers': [{
+    'id': 'carto-light-layer',
+    'source': 'carto-light',
+    'type': 'raster',
+    'minzoom': 0,
+    'maxzoom': 22
+  }]
+};
 
-    //     map.on('load', () => {
+const MapboxMap = () => {
-    //         map.on("load", function() {
+    const [viewport, setViewport] = useState({
-    //             map.addSource("public.maryland", {
+        latitude: 39.289444,
-    //               "type": "vector",
+        longitude: -76.615278,
-    //               "tiles": ["http://localhost:7800/public.maryland/{z}/{x}/{y}.mvt"],
+        zoom: 8
-    //               "minzoom": 0,
+      });
-    //               "maxzoom": 22
-    //             });
-          
-    //             map.addLayer({
-    //               "id": "public.maryland.MultiPolygon.fill",
-    //               "source": "public.maryland",
-    //               "source-layer": "public.maryland",
-    //               "type": "fill",
-    //               "paint": {
-    //                 "fill-color": [
-    //                             "interpolate",
-    //                             ["linear"],
-    //                             ["get", "lowincpct"],
-    //                             0,
-    //                             "white",
-    //                             1,
-    //                             "black"
-    //                 ],
-    //                 "fill-opacity": 0.5
-    //               }
-    //             });
-    //         });
-    //     });
-         
-    //     return () => map.remove();
-    // }, []);
 
+      return (
+        <ReactMapGL 
+          {...viewport}
+          mapboxApiAccessToken={process.env.GATSBY_MAPBOX_ACCESS_TOKEN}
+          width="100%"
+          height="100%"
+          onViewportChange={(viewport) => setViewport(viewport)}
+          mapStyle={mapStyle}
+        >
+          <Source type="vector" {...xyzSource}>
+           <Layer {...layerStyle} />
+          </Source>
+        </ReactMapGL>
+      );
+}
+
+const MapboxPage = () => {
     return (
         <Layout>
-            <MapboxMap class={mapboxStyles.mapContainer} />
+          <div class={mapboxStyles.mapContainer}>
+            <MapboxMap  />
+          </div>
         </Layout>
     );
-    
 };
 
 export default MapboxPage