publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

mapboxgl choropleth working

Browse source
This commit is contained in:
Nat Hillard 2021-04-18 22:42:20 -04:00
parent 40ac68eac8
commit 781c09c75d
2 changed files with 79 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
justice40-frontend/src/components/mapboxmap.js
View file

@ -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;

128
justice40-frontend/src/pages/mapbox.js
View file

@ -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 MapboxPage = () => {
// const mapContainer = useRef();
// const [lng, setLng] = useState(-76.615278);
// const [lat, setLat] = useState(39.289444);
// const [zoom, setZoom] = useState(9);
const xyzSource = {
name: "public.maryland",
scheme: 'xyz',
tilejson: "2.0.0",
minzoom: 0,
maxzoom: 22,
prefetchable: true,
tiles: ["http://localhost:7800/public.maryland/{z}/{x}/{y}.mvt"],
type: 'vector'
};
// useEffect(() => {
// const map = new mapboxgl.Map({
// container: mapContainer.current,
// style: 'mapbox://styles/mapbox/streets-v11',
// center: [lng, lat],
// zoom: zoom
// });
const layerStyle = {
id: 'public.maryland.MultiPolygon.fill',
type: 'fill',
source: "public.maryland",
"source-layer": "public.maryland",
paint: {
"fill-color": [
"interpolate",
["linear"],
["get", "lowincpct"],
0,
"white",
1,
"rgb(0,94,162)"
],
"fill-opacity": 0.5
}
};
// map.on('load', () => {
// map.resize();
// });
const mapStyle = {
'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', () => {
// map.on("load", function() {
// map.addSource("public.maryland", {
// "type": "vector",
// "tiles": ["http://localhost:7800/public.maryland/{z}/{x}/{y}.mvt"],
// "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();
// }, []);
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="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