mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-26 14:21:40 -07:00
feat: show tribal layer on open-source map
This commit is contained in:
Chris Alfano
Carlos Felix
parent
c9ee594211
commit
bc9a58f342
12 changed files with 111 additions and 361 deletions
|
|
@ -2,7 +2,7 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
// External Libs:
|
||||
import React, {useRef, useState} from 'react';
|
||||
import {Map, MapboxGeoJSONFeature, LngLatBoundsLike} from 'maplibre-gl';
|
||||
import {Map, MapGeoJSONFeature, LngLatBoundsLike} from 'maplibre-gl';
|
||||
import ReactMapGL, {
|
||||
MapEvent,
|
||||
ViewportProps,
|
||||
|
|
@ -28,9 +28,8 @@ import AreaDetail from './AreaDetail';
|
|||
import MapInfoPanel from './mapInfoPanel';
|
||||
import MapSearch from './MapSearch';
|
||||
import MapTractLayers from './MapTractLayers/MapTractLayers';
|
||||
// import MapTribalLayer from './MapTribalLayers/MapTribalLayers';
|
||||
import MapTribalLayer from './MapTribalLayers/MapTribalLayers';
|
||||
import TerritoryFocusControl from './territoryFocusControl';
|
||||
import {getOSBaseMap} from '../data/getOSBaseMap';
|
||||
|
||||
// Styles and constants
|
||||
import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
|
|
@ -87,7 +86,7 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
zoom: zoom && parseFloat(zoom) ? parseFloat(zoom) : constants.GLOBAL_MIN_ZOOM,
|
||||
});
|
||||
|
||||
const [selectedFeature, setSelectedFeature] = useState<MapboxGeoJSONFeature>();
|
||||
const [selectedFeature, setSelectedFeature] = useState<MapGeoJSONFeature>();
|
||||
const [detailViewData, setDetailViewData] = useState<IDetailViewInterface>();
|
||||
const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
|
||||
const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
|
||||
|
|
@ -303,11 +302,6 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
setGeolocationInProgress(true);
|
||||
};
|
||||
|
||||
const mapBoxBaseLayer = {
|
||||
customColorsWithUpdatedTribal: `mapbox://styles/justice40/cl9g30qh7000p15l9cp1ftw16`,
|
||||
streetsWithUpdatedTribal: `mapbox://styles/justice40/cl98rlidr002c14obpsvz6zzs`,
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -347,8 +341,11 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
// ****** Map state props: ******
|
||||
// http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#map-state
|
||||
{...viewport}
|
||||
mapStyle={process.env.MAPBOX_STYLES_READ_TOKEN ?
|
||||
mapBoxBaseLayer.customColorsWithUpdatedTribal : getOSBaseMap()}
|
||||
mapStyle={
|
||||
process.env.MAPBOX_STYLES_READ_TOKEN ?
|
||||
'mapbox://styles/justice40/cl9g30qh7000p15l9cp1ftw16' :
|
||||
'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'
|
||||
}
|
||||
width="100%"
|
||||
// Ajusting this height with a conditional statement will not render the map on staging.
|
||||
// The reason for this issue is unknown. Consider styling the parent container via SASS.
|
||||
|
|
@ -382,6 +379,13 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
data-cy={'reactMapGL'}
|
||||
>
|
||||
|
||||
{ /* Tribal layer is baked into Mapbox source,
|
||||
* only render here if we're not using that
|
||||
**/
|
||||
process.env.MAPBOX_STYLES_READ_TOKEN ||
|
||||
<MapTribalLayer />
|
||||
}
|
||||
|
||||
<MapTractLayers
|
||||
selectedFeature={selectedFeature}
|
||||
selectedFeatureId={selectedFeatureId}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue