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

feat: show tribal layer on open-source map

Browse source
This commit is contained in:
Chris Alfano 2024-12-10 11:35:54 -05:00 • committed by Carlos Felix
commit bc9a58f342
12 changed files with 111 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

42
client/src/components/MapTractLayers/MapTractLayers.tsx
View file

@ -1,6 +1,6 @@
import React, {useMemo} from 'react';
import {Source, Layer} from 'react-map-gl';
import {AnyLayer} from 'mapbox-gl';
import {MapGeoJSONFeature} from 'maplibre-gl';
// Contexts:
import {useFlags} from '../../contexts/FlagContext';
@ -9,8 +9,8 @@ import * as constants from '../../data/constants';
import * as COMMON_COPY from '../../data/copy/common';
interface IMapTractLayers {
selectedFeatureId: AnyLayer,
selectedFeature: AnyLayer,
selectedFeatureId: string | number,
selectedFeature: MapGeoJSONFeature | undefined,
}
/**
@ -60,8 +60,8 @@ export const featureURLForTilesetName = (tilesetName: string): string => {
* only the interactive layers are returned from this component. The reason being is that the
* other layers are supplied by he getOSBaseMap function.
*
* @param {AnyLayer} selectedFeatureId
* @param {AnyLayer} selectedFeature
* @param {string | number} selectedFeatureId
* @param {MapGeoJSONFeature | undefined} selectedFeature
* @return {Style}
*/
const MapTractLayers = ({
@ -70,9 +70,7 @@ const MapTractLayers = ({
}: IMapTractLayers) => {
const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]);
return process.env.MAPBOX_STYLES_READ_TOKEN ? (
// In this case the MapBox token is found and All source(s)/layer(s) are returned.
return (
<>
<Source
id={constants.LOW_ZOOM_SOURCE_NAME}
@ -160,34 +158,6 @@ const MapTractLayers = ({
/>
</Source>
</>
): (
/**
* In this case the MapBox token is NOT found and ONLY interactive source(s)/layer(s) are returned
* In this case, the other layers (non-interactive) are provided by getOSBaseMap
*/
<Source
id={constants.HIGH_ZOOM_SOURCE_NAME}
type="vector"
promoteId={constants.GEOID_PROPERTY}
tiles={[featureURLForTilesetName('high')]}
maxzoom={constants.GLOBAL_MAX_ZOOM_HIGH}
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
>
{/* High zoom layer (dynamic) - border styling around the selected feature */}
<Layer
id={constants.SELECTED_FEATURE_BORDER_LAYER_ID}
source-layer={constants.SCORE_SOURCE_LAYER}
filter={filter} // This filter filters out all other features except the selected feature.
type='line'
paint={{
'line-color': constants.SELECTED_FEATURE_BORDER_COLOR,
'line-width': constants.SELECTED_FEATURE_BORDER_WIDTH,
}}
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
/>
</Source>
);
};