ERA-11057: track styles: track color expression

src/AnalyzersLayer/index.js

@@ -2,7 +2,9 @@ import React, { memo, useMemo } from 'react';
 import withMapViewConfig from '../WithMapViewConfig';
 
 import { LAYER_IDS, SOURCE_IDS } from '../constants';
-import { useMapEventBinding, useMapLayer, useMapSource } from '../hooks';
+import { useMapEventBinding } from '../hooks';
+import useMapSource from '../hooks/useMapSource';
+import useMapLayer from '../hooks/useMapLayer';
 
 const { ANALYZER_POLYS_WARNING, ANALYZER_POLYS_CRITICAL, ANALYZER_LINES_WARNING,
   ANALYZER_LINES_CRITICAL, SKY_LAYER } = LAYER_IDS;
@@ -68,43 +70,51 @@ const AnalyzerLayer = (
     condition: !!isSubjectSymbolsLayerReady,
   }), [isSubjectSymbolsLayerReady, minZoom]);
 
-  useMapSource(ANALYZER_POLYS_WARNING_SOURCE, warningPolys);
+  useMapSource({ id: ANALYZER_POLYS_WARNING_SOURCE, data: warningPolys });
   useMapLayer(
-    ANALYZER_POLYS_WARNING,
-    'line',
-    ANALYZER_POLYS_WARNING_SOURCE,
-    linePaint,
-    undefined,
-    layerConfig,
+    {
+      id: ANALYZER_POLYS_WARNING,
+      type: 'line',
+      sourceId: ANALYZER_POLYS_WARNING_SOURCE,
+      paint: linePaint,
+      options: layerConfig,
+    }
   );
 
-  useMapSource(ANALYZER_POLYS_CRITICAL_SOURCE, criticalPolys);
+  useMapSource({ id: ANALYZER_POLYS_CRITICAL_SOURCE, data: criticalPolys });
   useMapLayer(
-    ANALYZER_POLYS_CRITICAL,
-    'line',
-    ANALYZER_POLYS_CRITICAL_SOURCE,
-    criticalLinePaint, lineLayout,
-    layerConfig,
+    {
+      id: ANALYZER_POLYS_CRITICAL,
+      type: 'line',
+      sourceId: ANALYZER_POLYS_CRITICAL_SOURCE,
+      paint: criticalLinePaint,
+      layout: lineLayout,
+      options: layerConfig,
+    }
   );
 
-  useMapSource(ANALYZER_LINES_WARNING_SOURCE, warningLines);
+  useMapSource({ id: ANALYZER_LINES_WARNING_SOURCE, data: warningLines });
   useMapLayer(
-    ANALYZER_LINES_WARNING,
-    'line',
-    ANALYZER_LINES_WARNING_SOURCE,
-    linePaint,
-    lineLayout,
-    layerConfig,
+    {
+      id: ANALYZER_LINES_WARNING,
+      type: 'line',
+      sourceId: ANALYZER_LINES_WARNING_SOURCE,
+      paint: linePaint,
+      layout: lineLayout,
+      options: layerConfig,
+    }
   );
 
-  useMapSource(ANALYZER_LINES_CRITICAL_SOURCE, criticalLines);
+  useMapSource({ id: ANALYZER_LINES_CRITICAL_SOURCE, data: criticalLines });
   useMapLayer(
-    ANALYZER_LINES_CRITICAL,
-    'line',
-    ANALYZER_LINES_CRITICAL_SOURCE,
-    criticalLinePaint,
-    lineLayout,
-    layerConfig,
+    {
+      id: ANALYZER_LINES_CRITICAL,
+      type: 'line',
+      sourceId: ANALYZER_LINES_CRITICAL_SOURCE,
+      paint: criticalLinePaint,
+      layout: lineLayout,
+      options: layerConfig,
+    }
   );
 
   // (eventType = 'click', handlerFn = noop, layerId = null, condition = true)

src/BaseLayerRenderer/TileLayerRenderer.js

@@ -2,9 +2,10 @@ import React, { memo, useContext, useMemo, useEffect } from 'react';
 import { MapContext } from '../App';
 
 import { TILE_LAYER_SOURCE_TYPES, LAYER_IDS, MAX_ZOOM, MIN_ZOOM } from '../constants';
-import { useMapLayer, useMapSource } from '../hooks';
 
 import { calcConfigForMapAndSourceFromLayer } from '../utils/layers';
+import useMapSource from '../hooks/useMapSource';
+import useMapLayer from '../hooks/useMapLayer';
 
 const { TOPMOST_STYLE_LAYER } = LAYER_IDS;
 
@@ -25,7 +26,7 @@ const SourceComponent = ({ id, tileUrl, sourceConfig }) => {
     ...sourceConfig,
   }), [sourceConfig, tileUrl]);
 
-  useMapSource(id, null, config);
+  useMapSource({ id, data: {} }, config);
 
   return null;
 };
@@ -51,12 +52,15 @@ const TileLayerRenderer = (props) => {
   }, [map, mapConfig]);
 
   useMapLayer(
-    `tile-layer-${activeLayer?.id}`,
-    'raster',
-    `layer-source-${activeLayer?.id}`,
-    undefined,
-    undefined,
-    { before: TOPMOST_STYLE_LAYER, condition: !!activeLayer }
+    {
+      id: `tile-layer-${activeLayer?.id}`,
+      type: 'raster',
+      sourceId: `layer-source-${activeLayer?.id}`,
+      options: {
+        before: TOPMOST_STYLE_LAYER,
+        condition: !!activeLayer
+      }
+    }
   );
 
   return layers

src/ClustersLayer/index.js

@@ -10,7 +10,9 @@ import { getMapSubjectFeatureCollectionWithVirtualPositioning } from '../selecto
 import { getShouldEventsBeClustered, getShouldSubjectsBeClustered } from '../selectors/clusters';
 import { MapContext } from '../App';
 import useClusterBufferPolygon from '../hooks/useClusterBufferPolygon';
-import { useMapEventBinding, useMapLayer, useMapSource } from '../hooks';
+import { useMapEventBinding } from '../hooks';
+import useMapSource from '../hooks/useMapSource';
+import useMapLayer from '../hooks/useMapLayer';
 
 const {
   CLUSTERS_LAYER_ID,
@@ -53,8 +55,14 @@ const ClustersLayer = ({ onShowClusterSelectPopup }) => {
     subjectFeatureCollection.features,
   ]);
 
-  useMapSource(CLUSTERS_SOURCE_ID, clustersSourceData, CLUSTER_SOURCE_CONFIG);
-  useMapLayer(CLUSTERS_LAYER_ID, 'circle', CLUSTERS_SOURCE_ID, CLUSTER_LAYER_PAINT, null, CLUSTER_LAYER_CONFIG);
+  useMapSource({ id: CLUSTERS_SOURCE_ID, data: clustersSourceData }, CLUSTER_SOURCE_CONFIG);
+  useMapLayer({
+    id: CLUSTERS_LAYER_ID,
+    type: 'circle',
+    sourceId: CLUSTERS_SOURCE_ID,
+    paint: CLUSTER_LAYER_PAINT,
+    options: CLUSTER_LAYER_CONFIG
+  });
 
   const { removeClusterPolygon, renderClusterPolygon } = useClusterBufferPolygon();
 

src/EventGeometryLayer/index.js

@@ -9,7 +9,9 @@ import { getShowReportsOnMap } from '../selectors/clusters';
 import { LAYER_IDS, SOURCE_IDS } from '../constants';
 import { MAP_LOCATION_SELECTION_MODES } from '../ducks/map-ui';
 import { PRIORITY_COLOR_MAP } from '../utils/events';
-import { useMapEventBinding, useMapLayer, useMapSource } from '../hooks';
+import { useMapEventBinding } from '../hooks';
+import useMapSource from '../hooks/useMapSource';
+import useMapLayer from '../hooks/useMapLayer';
 
 const { EVENT_GEOMETRY_LAYER, EVENT_SYMBOLS } = LAYER_IDS;
 
@@ -61,9 +63,16 @@ const EventGeometryLayer = ({ onClick }) => {
   const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
   const onMouseLeave = () => map.getCanvas().style.cursor = '';
 
-  useMapSource(EVENT_GEOMETRY, eventFeatureCollection);
+  useMapSource({ id: EVENT_GEOMETRY, data: eventFeatureCollection });
 
-  useMapLayer(EVENT_GEOMETRY_LAYER, 'fill', EVENT_GEOMETRY, paint, layout, layerConfig);
+  useMapLayer({
+    id: EVENT_GEOMETRY_LAYER,
+    type: 'fill',
+    sourceId: EVENT_GEOMETRY,
+    paint,
+    layout,
+    options: layerConfig
+  });
 
   useMapEventBinding('click', onClick, EVENT_GEOMETRY_LAYER);
   useMapEventBinding('mouseenter', onMouseEnter, EVENT_GEOMETRY_LAYER);

src/EventsLayer/index.js

@@ -18,7 +18,7 @@ import { getMapEventSymbolPointsWithVirtualDate } from '../selectors/events';
 import { getShouldEventsBeClustered, getShowReportsOnMap } from '../selectors/clusters';
 import { MapContext } from '../App';
 import MapImageFromSvgSpriteRenderer, { calcSvgImageIconId } from '../MapImageFromSvgSpriteRenderer';
-import { useMapSource } from '../hooks';
+import useMapSource from '../hooks/useMapSource';
 import { withMultiLayerHandlerAwareness } from '../utils/map-handlers';
 
 import EventGeometryLayer from '../EventGeometryLayer';
@@ -241,7 +241,7 @@ const EventsLayer = ({
     ...mapEventFeatures,
     features: !shouldEventsBeClustered && !!showReportsOnMap ? mapEventFeatures.features : [],
   };
-  useMapSource(UNCLUSTERED_EVENTS_SOURCE, geoJson);
+  useMapSource({ id: UNCLUSTERED_EVENTS_SOURCE, data: geoJson });
 
   const isSubjectSymbolsLayerReady = !!map.getLayer(SUBJECT_SYMBOLS);
   const isClustersSourceReady = !!map.getSource(CLUSTERS_SOURCE_ID);

src/FeatureLayer/index.js

@@ -10,7 +10,9 @@ import { LAYER_IDS, DEFAULT_SYMBOL_LAYOUT, DEFAULT_SYMBOL_PAINT, SOURCE_IDS } fr
 
 import MarkerImage from '../common/images/icons/mapbox-blue-marker-icon.png';
 import RangerStationsImage from '../common/images/icons/ranger-stations.png';
-import { useMapEventBinding, useMapLayer, useMapSource } from '../hooks';
+import { useMapEventBinding } from '../hooks';
+import useMapSource from '../hooks/useMapSource';
+import useMapLayer from '../hooks/useMapLayer';
 
 const { FEATURE_FILLS, FEATURE_LINES, FEATURE_SYMBOLS, SKY_LAYER } = LAYER_IDS;
 
@@ -114,14 +116,41 @@ const FeatureLayer = ({ symbols, lines, polygons, onFeatureSymbolClick, mapUserL
 
   const layerConfig = { minZoom, before: SKY_LAYER };
 
-  useMapSource(MAP_FEATURES_LINES_SOURCE, lines);
-  useMapSource(MAP_FEATURES_POLYGONS_SOURCE, polygons);
-  useMapSource(MAP_FEATURES_SYMBOLS_SOURCE, symbols);
-
-  // (layerId, type, sourceId, paint, layout, filter, minzoom, maxzoom, condition = true)
-  useMapLayer(FEATURE_FILLS, 'fill', MAP_FEATURES_POLYGONS_SOURCE, fillPaint, fillLayout, layerConfig);
-  useMapLayer(FEATURE_LINES, 'line', MAP_FEATURES_LINES_SOURCE, linePaint, lineLayout, layerConfig);
-  useMapLayer(FEATURE_SYMBOLS, 'symbol', MAP_FEATURES_SYMBOLS_SOURCE, symbolPaint, layout, layerConfig);
+  useMapSource({ id: MAP_FEATURES_LINES_SOURCE, data: lines });
+  useMapSource({ id: MAP_FEATURES_POLYGONS_SOURCE, data: polygons });
+  useMapSource({ id: MAP_FEATURES_SYMBOLS_SOURCE, data: symbols });
+
+  // (layerId, type, sourceId, paint, layout, filter, min-zoom, max-zoom, condition = true)
+  useMapLayer({
+    id: FEATURE_FILLS,
+    type: 'fill',
+    sourceId: MAP_FEATURES_POLYGONS_SOURCE,
+    paint: fillPaint,
+    layout: fillLayout,
+    options: layerConfig
+  });
+
+  useMapLayer(
+    {
+      id: FEATURE_LINES,
+      type: 'line',
+      sourceId: MAP_FEATURES_LINES_SOURCE,
+      paint: linePaint,
+      layout: lineLayout,
+      options: layerConfig
+    }
+  );
+
+  useMapLayer(
+    {
+      id: FEATURE_SYMBOLS,
+      type: 'symbol',
+      sourceId: MAP_FEATURES_SYMBOLS_SOURCE,
+      paint: symbolPaint,
+      layout: layout,
+      options: layerConfig
+    }
+  );
 
   useMapEventBinding('click', onSymbolClick, FEATURE_SYMBOLS);
   useMapEventBinding('mouseenter', onSymbolMouseEnter, FEATURE_SYMBOLS);

src/HeatLayer/index.js

@@ -6,7 +6,8 @@ import { useSelector } from 'react-redux';
 import { LAYER_IDS, MAX_ZOOM } from '../constants';
 import { metersToPixelsAtMaxZoom } from '../utils/map';
 import { uuid } from '../utils/string';
-import { useMapLayer, useMapSource } from '../hooks';
+import useMapSource from '../hooks/useMapSource';
+import useMapLayer from '../hooks/useMapLayer';
 
 const { HEATMAP_LAYER, SKY_LAYER } = LAYER_IDS;
 
@@ -30,8 +31,18 @@ const HeatLayer = ({ points }) => {
     };
   }, [heatmapStyles.intensity, heatmapStyles.radiusInMeters, points]);
 
-  useMapSource(`heatmap-source-${idRef.current}`, points);
-  useMapLayer(`${HEATMAP_LAYER}-${idRef.current}`, 'heatmap', `heatmap-source-${idRef.current}`, paint, null, { before: SKY_LAYER });
+  useMapSource({ id: `heatmap-source-${idRef.current}`, data: points });
+  useMapLayer(
+    {
+      id: `${HEATMAP_LAYER}-${idRef.current}`,
+      type: 'heatmap',
+      sourceId: `heatmap-source-${idRef.current}`,
+      paint,
+      options: {
+        before: SKY_LAYER
+      }
+    }
+  );
 
   return null;
 };

src/LabeledSymbolLayer/index.js

@@ -5,7 +5,8 @@ import { DEFAULT_SYMBOL_LAYOUT, DEFAULT_SYMBOL_PAINT } from '../constants';
 import { withMap } from '../EarthRangerMap';
 import withMapViewConfig from '../WithMapViewConfig';
 
-import { useMapEventBinding, useMapLayer } from '../hooks';
+import { useMapEventBinding } from '../hooks';
+import useMapLayer from '../hooks/useMapLayer';
 
 const LabeledSymbolLayer = (
   { before, paint, layout, textPaint, textLayout, id, sourceId, map, mapUserLayoutConfigByLayerId, onClick, onInit,
@@ -79,8 +80,23 @@ const LabeledSymbolLayer = (
   useMapEventBinding('mouseleave', handleMouseLeave, id);
   useMapEventBinding('mouseleave', handleMouseLeave, textLayerId);
 
-  useMapLayer(id, 'symbol', sourceId, symbolPaint, symbolLayout, layerConfig);
-  useMapLayer(textLayerId, 'symbol', sourceId, labelPaint, labelLayout, layerConfig);
+  useMapLayer({
+    id: id,
+    type: 'symbol',
+    sourceId,
+    paint: symbolPaint,
+    layout: symbolLayout,
+    options: layerConfig
+  });
+
+  useMapLayer({
+    id: textLayerId,
+    type: 'symbol',
+    sourceId,
+    paint: labelPaint,
+    layout: labelLayout,
+    options: layerConfig
+  });
 
   return null;
 };