added location marker when obs feature clicked

src/components/map/default-layers.js

@@ -1,11 +1,13 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { WMSTileLayer, GeoJSON } from 'react-leaflet';
+import { WMSTileLayer, GeoJSON, useMap } from 'react-leaflet';
 import { CircleMarker } from 'leaflet';
 import { useLayers } from '@context';
+import { markClicked } from '@utils/map-utils';
 
 export const DefaultLayers = () => {
 
     const [obsData, setObsData] = useState("");
+    const map = useMap();
 
     const {
         defaultModelLayers,
@@ -59,10 +61,11 @@ export const DefaultLayers = () => {
           layer.on("mouseout", function () {
             this.closePopup();
           });
-          layer.on("click", function () {
+          layer.on("click", function (e) {
             // Do stuff here for retrieving time series data, in csv fomat,
             // from the feature.properties.csv_url and create a fancy plot
             console.log("Observation Station '" + feature.properties.location_name + "' clicked");
+            markClicked(map, e);
           });
         }
     };

src/utils/map-utils.js

@@ -1,14 +1,25 @@
-import useLayers from '../context/map-context';
-import { StacApiProvider } from "stac-react";
+//import { useLayers } from '@context';
+import locationIcon from '@images/location_searching_FILL0_wght400_GRAD0_opsz24.png';
 
-const {
+/* const {
   defaultModelLayers,
   setDefaultModelLayers,
   filteredModelLayers,
   setFilteredModelLayers
-  } = useLayers();
+  } = useLayers(); */
 
 
-// Utilities to access the stac catalog items to load on map 
-const stacCatalog = ({stacUrl}) => {
+// function to add a location marker where ever and obs mod layer
+// feature is clicked icon downloaded as png from here: 
+// https://fonts.google.com/icons?selected=Material+Symbols+Outlined:location_searching:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=location
+export const markClicked = (map, event) => {
+
+  const targetIcon = L.icon({
+      iconUrl: locationIcon,
+      iconSize: [38, 38],
+      iconAnchor: [19, 19],
+      popupAnchor: [0, 0],
+  });
+
+  L.marker([event.latlng.lat, event.latlng.lng], {icon: targetIcon}).addTo(map);
 };