Merge branch 'main' into feature/drawer+layers

eslint.config.mjs

@@ -19,7 +19,10 @@ export default [
         ecmaFeatures: {
           jsx: true,
         }},
-      globals: globals.browser
+      globals: {
+          ...globals.node,
+          ...globals.browser
+      }
     },
     rules: {
       "no-unused-vars": "warn",
@@ -32,4 +35,4 @@ export default [
     },
     linterOptions: { reportUnusedDisableDirectives: "error" }
   }
-];
+];

src/components/map/default-layers.js

@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { WMSTileLayer, GeoJSON } from 'react-leaflet';
+import React, { Fragment, useEffect, useState } from 'react';
+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,27 @@
-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 L = window.L;
+
+  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);
 };