diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index b69b1732..884fe246 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -275,6 +275,8 @@ const J40Map = ({location}: IJ40Interface) => { setGeolocationInProgress(true); }; + const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/mapbox/streets-v11`; + return ( <> @@ -310,14 +312,10 @@ const J40Map = ({location}: IJ40Interface) => { process.env.MAPBOX_STYLES_READ_TOKEN ? process.env.MAPBOX_STYLES_READ_TOKEN : ''} - // ****** 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 ? `mapbox://styles/mapbox/streets-v11` : - getOSBaseMap() - } + mapStyle={process.env.MAPBOX_STYLES_READ_TOKEN ? mapBoxBaseLayer : getOSBaseMap()} 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.