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

Use MapLibre for Map Visualization (#300)

Browse source 
* switching to MapLibre (see more at https://github.com/usds/justice40-tool/issues/299)
* Removing traces of OpenLayers
* Review comments - removing unused properties, component
This is a pre-requisite for addressing issue #280 and other similar control-related tickets
This commit is contained in:
Nat Hillard 2021-07-07 15:04:00 -04:00 • committed by GitHub
commit 2257627938
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 53 additions and 505 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/data/mapStyle.tsx
View file

@ -1,4 +1,4 @@
import {Style, FillPaint} from 'mapbox-gl';
import {Style, FillPaint} from 'maplibre-gl';
import chroma from 'chroma-js';
import * as constants from '../data/constants';
@ -8,27 +8,24 @@ function hexToHSLA(hex:string, alpha:number) {
}
/**
* `MakePaint` generates a zoom-faded Mapbox style formatted layer given a set of parameters.
* `MakePaint` generates a zoom-faded Maplibre style formatted layer given a set of parameters.
*
* @param {string} field : the field within the data to consult
* @param {number} minRamp : the minimum value this can assume
* @param {number} medRamp : the medium value this can assume
* @param {number} maxRamp : the maximum value this can assume
* @param {boolean} high : whether this is a "high" or "low" layer
* @return {FillPaint} a mapboxgl fill layer
* @return {FillPaint} a maplibregl fill layer
**/
function makePaint({
field,
minRamp,
medRamp,
maxRamp,
high = true,
}: {
field: string;
minRamp: number;
medRamp: number;
maxRamp: number;
high: boolean;
}): FillPaint {
const paintDescriptor : FillPaint = {
'fill-color': [
@ -88,14 +85,12 @@ const mapStyle : Style = {
'source': 'carto',
'type': 'raster',
'minzoom': constants.GLOBAL_MIN_ZOOM - 1,
'maxzoom': constants.GLOBAL_MAX_ZOOM + 1,
},
{
'id': 'geo',
'source': 'geo',
'type': 'raster',
'minzoom': constants.GLOBAL_MIN_ZOOM - 1,
'maxzoom': constants.GLOBAL_MAX_ZOOM + 1,
'layout': {
// Make the layer visible by default.
'visibility': 'none',
@ -115,7 +110,6 @@ const mapStyle : Style = {
minRamp: 0,
medRamp: 0.6,
maxRamp: 0.75,
high: true,
}),
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
@ -126,7 +120,6 @@ const mapStyle : Style = {
'source-layer': 'blocks',
'type': 'line',
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
'layout': {
'visibility': 'visible',
'line-join': 'round',
@ -143,7 +136,6 @@ const mapStyle : Style = {
'type': 'raster',
'source': 'labels',
'minzoom': constants.GLOBAL_MIN_ZOOM,
'maxzoom': constants.GLOBAL_MAX_ZOOM,
},
],
};