[Feature Request]: Provide symbol options for point_data layers

[wadhwamatic]

Provide a clear and concise description of what you want to happen.

Currently, point_data layers in PRISM are shown as circles, with the exception of RBD's crop change data where have applied a hex_display parameter as true. When more than one point_data layer is shown, using a single symbol makes it impossible to differentiate the layers if they use similar legends.

We should add the ability to choose a symbol for point_data layers and allow an icon to be included in the image folder as a source. It's also worth considering creating a few icons in a shared location that any PRISM deployment could make use of.

MapLibre symbol specification for reference: https://maplibre.org/maplibre-style-spec/layers/#symbol

Is there anything else you can add about the proposal? You might want to link to related issues here, if you haven't already.

This example from Cambodia showing Google Floods plus EWS-1294 river levels side by side illustrates why we need the ability apply different symbols for a layer. The circles on the map come from a combination of both layers.

[wadhwamatic]

@gislawill @ericboucher - interested to hear your thoughts on this suggested feature.

[gislawill]

Good catch, @wadhwamatic. Adding custom symbols for layers should be pretty straightforward — I've included a snippet we should be able to use in our PointDataLayer component.

We should also consider supporting an icon library like Iconify to build in more flexibility. This would allow us to use any icon in their library rather than needing to upload and bundle a new image file for new icon.

const MapComponent = () => {
  const mapRef = useRef();

  useEffect(() => {
    const map = mapRef.current?.getMap();
    
    if (map) {
      map.loadImage('/path/to/custom-icon.png', (error, image) => {
        if (error) throw error;
        if (!map.hasImage('custom-icon')) {
          map.addImage('custom-icon', image);
        }
      });
    }
  }, [mapLoaded]);

  const layerStyle = {
    id: 'points',
    type: 'symbol',
    source: 'my-data',
    layout: {
      'icon-image': 'custom-icon',
      'icon-size': 0.5, 
      'icon-anchor': 'bottom',
    },
  };

  return (
    <Map>
      <Source id="my-data" type="geojson" data={geojsonData}>
        <Layer {...layerStyle} />
      </Source>
    </Map>
  );
};

[wadhwamatic]

Great, thanks @gislawill! And good recommendation to use an existing icon library. We already include Material icons FYI