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

Adding ol-mapbox-style for easier styling (#148)

Browse source
This commit is contained in:
Nat Hillard 2021-06-17 09:28:37 -04:00 • committed by GitHub
commit a67b79a748
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 1345 additions and 1688 deletions
Download patch file Download diff file Expand all files Collapse all files

80
client/src/components/map.tsx
View file

@ -3,21 +3,66 @@ import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Geometry from 'ol/geom/Geometry';
import TileLayer from 'ol/layer/Tile';
import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile';
import MVT from 'ol/format/MVT';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import XYZ from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';
import * as styles from './map.module.scss';
import olms from 'ol-mapbox-style';
interface IMapWrapperProps {
features: Feature<Geometry>[],
};
const mapConfig = {
'version': 8,
'cursor': 'pointer',
'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',
],
},
'custom': {
'projection': 'EPSG:3857',
'type': 'vector',
'tiles': [
'https://gis.data.census.gov/arcgis/rest/services/Hosted/VT_2019_150_00_PY_D1/VectorTileServer/tile/{z}/{y}/{x}.mvt',
],
},
},
'layers': [
{
'id': 'carto-light-layer',
'source': 'carto-light',
'type': 'raster',
'minzoom': 0,
'maxzoom': 22,
},
{
'id': 'blocks',
'type': 'line',
'source': 'custom',
'source-layer': 'BlockGroup',
'minzoom': 0,
'layout': {
'line-cap': 'round',
'line-join': 'round',
},
'paint': {
'line-opacity': 0.6,
'line-color': 'red',
'line-width': 1,
},
},
],
};
// The below adapted from
// https://taylor.callsen.me/using-openlayers-with-react-functional-components/
const MapWrapper = ({features}: IMapWrapperProps) => {
@ -33,35 +78,18 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
source: new VectorSource(),
});
const censusBlockGroupTileLayer = new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
url: 'https://gis.data.census.gov/arcgis/rest/services/Hosted/VT_2019_150_00_PY_D1/VectorTileServer/tile/{z}/{y}/{x}.mvt',
}),
});
const initialMap = new Map({
target: mapElement.current,
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{1-4}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
}),
}),
censusBlockGroupTileLayer,
initialFeaturesLayer,
],
view: new View({
projection: 'EPSG:3857',
center: fromLonLat([-95.7129, 37.0902]),
zoom: 3,
center: fromLonLat([-86.502136, 32.4687126]),
zoom: 4,
}),
controls: [],
});
setMap(initialMap);
setFeaturesLayer(initialFeaturesLayer);
olms(initialMap, mapConfig);
}, []);