publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-07 17:54:19 -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

107
client/src/components/MapTribalLayers/MapTribalLayers.tsx
View file

@ -1,24 +1,20 @@
import React, {useMemo} from 'react';
import React from 'react';
import {Source, Layer} from 'react-map-gl';
import {AnyLayer} from 'mapbox-gl';
import * as constants from '../../data/constants';
interface IMapTribalLayers {
selectedFeatureId: AnyLayer,
selectedFeature: AnyLayer,
}
/**
* This function will determine the URL for the tribal tiles.
* @return {string}
*/
export const tribalURL = (): string => {
const featureTileBaseURL = constants.TILE_BASE_URL;
const featureTilePath = constants.GATSBY_DATA_PIPELINE_TRIBAL_PATH;
const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
return [
process.env.GATSBY_CDN_TILES_BASE_URL,
process.env.GATSBY_DATA_PIPELINE_TRIBAL_PATH,
featureTileBaseURL,
featureTilePath,
process.env.GATSBY_MAP_TILES_PATH,
XYZ_SUFFIX,
].join('/');
@ -34,17 +30,12 @@ export const tribalURL = (): 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 MapTribalLayer = ({
selectedFeatureId,
selectedFeature,
}: IMapTribalLayers) => {
const tribalSelectionFilter = useMemo(() => ['in', constants.TRIBAL_ID, selectedFeatureId], [selectedFeature]);
return process.env.MAPBOX_STYLES_READ_TOKEN ? (
const MapTribalLayer = () => {
return (
// In this case the MapBox token is found and ALL source(s)/layer(s) are returned.
<Source
@ -52,8 +43,6 @@ const MapTribalLayer = ({
type="vector"
promoteId={constants.TRIBAL_ID}
tiles={[tribalURL()]}
minzoom={constants.TRIBAL_MIN_ZOOM}
maxzoom={constants.TRIBAL_MAX_ZOOM}
>
{/* Tribal layer */}
@ -82,19 +71,6 @@ const MapTribalLayer = ({
maxzoom={constants.TRIBAL_MAX_ZOOM}
/>
{/* Tribal layer - border styling around the selected feature */}
<Layer
id={constants.SELECTED_TRIBAL_FEATURE_BORDER_LAYER_ID}
source-layer={constants.TRIBAL_SOURCE_LAYER}
filter={tribalSelectionFilter}
type='line'
paint={{
'line-color': constants.SELECTED_FEATURE_BORDER_COLOR,
'line-width': constants.SELECTED_FEATURE_BORDER_WIDTH,
}}
minzoom={constants.TRIBAL_MIN_ZOOM}
/>
{/* Alaska layer */}
<Layer
id={constants.TRIBAL_ALASKA_POINTS_LAYER_ID}
@ -103,40 +79,47 @@ const MapTribalLayer = ({
type='circle'
paint={{
'circle-radius': constants.TRIBAL_ALASKA_CIRCLE_RADIUS,
'circle-color': constants.PRIORITIZED_FEATURE_FILL_COLOR,
'circle-color': constants.TRIBAL_ALASKA_CIRCLE_FILL_COLOR,
'circle-opacity': constants.TRIBAL_FEATURE_FILL_OPACITY,
'circle-stroke-color': constants.TRIBAL_BORDER_COLOR,
'circle-stroke-width': constants.ALAKSA_POINTS_STROKE_WIDTH,
'circle-stroke-opacity': constants.FEATURE_BORDER_OPACITY,
}}
minzoom={constants.ALASKA_MIN_ZOOM}
maxzoom={constants.ALASKA_MAX_ZOOM}
/>
{/* Tribal labels layer */}
<Layer
id={constants.TRIBAL_LABELS_LAYER_ID}
source-layer={constants.TRIBAL_SOURCE_LAYER}
type='symbol'
layout={{
'text-field': [
'case',
['in', ' LAR', ['get', constants.LAND_AREA_NAME]],
['slice', ['get', constants.LAND_AREA_NAME], 0, ['-', ['length', ['get', constants.LAND_AREA_NAME]], 4]],
['in', ' IRA', ['get', constants.LAND_AREA_NAME]],
['slice', ['get', constants.LAND_AREA_NAME], 0, ['-', ['length', ['get', constants.LAND_AREA_NAME]], 4]],
['in', ' TSA', ['get', constants.LAND_AREA_NAME]],
['slice', ['get', constants.LAND_AREA_NAME], 0, ['-', ['length', ['get', constants.LAND_AREA_NAME]], 4]],
['get', constants.LAND_AREA_NAME],
],
'text-anchor': 'top',
'text-offset': [0, 1],
'text-size': 12,
'text-allow-overlap': false,
'text-ignore-placement': false,
}}
paint={{
'text-color': '#333333',
'text-halo-color': '#FFFFFF',
'text-halo-width': 1.5,
}}
minzoom={constants.TRIBAL_MIN_ZOOM}
maxzoom={constants.TRIBAL_MAX_ZOOM}
/>
</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.TRIBAL_SOURCE_NAME}
type="vector"
promoteId={constants.TRIBAL_ID}
tiles={[tribalURL()]}
minzoom={constants.TRIBAL_MIN_ZOOM}
maxzoom={constants.TRIBAL_MAX_ZOOM}
>
{/* Tribal layer - border styling around the selected feature */}
<Layer
id={constants.SELECTED_TRIBAL_FEATURE_BORDER_LAYER_ID}
source-layer={constants.TRIBAL_SOURCE_LAYER}
filter={tribalSelectionFilter}
type='line'
paint={{
'line-color': constants.SELECTED_FEATURE_BORDER_COLOR,
'line-width': constants.SELECTED_FEATURE_BORDER_WIDTH,
}}
minzoom={constants.TRIBAL_MIN_ZOOM}
/>
</Source>
);
};