updates for addition and removal of target icon for observations sele…

…cted

.gitignore

@@ -2,3 +2,5 @@ dist
 node_modules
 
 .env*
+.DS_Store
+src/.DS_Store

src/app.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Map } from '@components/map';
-import ObservationDialog from "@components/map/observation-dialog";
+import { ObservationDialog } from "@components/map/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 

src/components/map/default-layers.js

@@ -2,7 +2,7 @@ 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';
+import { markClicked, markUnclicked } from '@utils/map-utils';
 
 const newLayerDefaultState = layer => {
     const { product_type } = layer.properties;
@@ -78,15 +78,14 @@ export const DefaultLayers = () => {
             this.closePopup();
           });
           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);
 
             // add in a record id.
             // this is used to remove the selected observation from the selectedObservations list when the dialog is closed
             feature.properties.id = feature.properties.station_name;
 
+            // create a marker target icon around the observation clicked
+            markClicked(map, e, feature.properties.id);
+
             // populate selectedObservations list with the newly selected observation point
             setSelectedObservations(previous => [...previous, feature.properties]);
           });

src/components/map/map.js

@@ -17,7 +17,7 @@ export const Map = () => {
         zoom={5}
         zoomControl={false}
         scrollWheelZoom={true}
-        whenCreated={setMap}
+        ref={setMap}
         style={{ height: '100vh', width:'100wh' }}>
           <TileLayer
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

src/components/map/observation-dialog.js

@@ -5,14 +5,16 @@ import {useLayers} from "@context";
 import ObservationChart from "@utils/observation-chart";
 
 // define the properties of this component
-ObservationDialog.propTypes = {
+/* ObservationDialog.propTypes = {
   obs_data: PropTypes.object
-};
+}; */
 
-export default function ObservationDialog(obs_data) {
+//export default function ObservationDialog(obs_data) {
+export const ObservationDialog = (obs_data)  => {
 
     // get references to the observation data/list
     const {
+        map,
         selectedObservations,
         setSelectedObservations
     } = useLayers();
@@ -29,7 +31,7 @@ export default function ObservationDialog(obs_data) {
     };
 
     // create an object for the base dialog
-    const floaterArgs = {title: obs_data.obs.location_name, dialogObject: {...graphObj(obs_data.obs.csvurl)}, dataKey: obs_data.obs.station_name, dataList: selectedObservations, setDataList: setSelectedObservations};
+    const floaterArgs = {title: obs_data.obs.location_name, dialogObject: {...graphObj(obs_data.obs.csvurl)}, dataKey: obs_data.obs.station_name, dataList: selectedObservations, setDataList: setSelectedObservations, map: map};
 
     // render the dialog.
     // the key here will be used to remove the dialog from the selected observation list when the dialog is closed

src/utils/base-floating-dialog.js

@@ -10,14 +10,16 @@ import DialogContent from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
+import { markUnclicked } from '@utils/map-utils';
 
 // define the properties of this component
 BaseFloatingDialog.propTypes = {
     title: PropTypes.string,
     dialogObject: PropTypes.any,
     dataKey: PropTypes.any,
     dataList: PropTypes.any,
-    setDataList: PropTypes.func
+    setDataList: PropTypes.func,
+    map: PropTypes.any,
 };
 
 /**
@@ -30,16 +32,16 @@ BaseFloatingDialog.propTypes = {
  * @param dataList:
  * @param setDataList:
  */
-export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataList, setDataList} ) {
+export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataList, setDataList, map} ) {
     // define the dialog open/close session state
     //const [open, setOpen] = React.useState(true);
-
     /**
     * the close dialog handler
     */
     const handleClose = () => {
         // if there was a data key defined, use it
         if (dataKey !== undefined) {
+            markUnclicked(map, dataKey);
             // remove this item from the data list
             setDataList(dataList.filter(item => item.id !== dataKey));
         }

src/utils/map-utils.js

@@ -12,16 +12,33 @@ import locationIcon from '@images/location_searching_FILL0_wght400_GRAD0_opsz24.
 // 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) => {
+export const markClicked = (map, event, id) => {
 
   const L = window.L;
+  const iconSize = 38;
+  const iconAnchor = iconSize/2;
 
   const targetIcon = L.icon({
       iconUrl: locationIcon,
-      iconSize: [38, 38],
-      iconAnchor: [19, 19],
+      iconSize: [iconSize, iconSize],
+      iconAnchor: [iconAnchor, iconAnchor],
       popupAnchor: [0, 0],
   });
 
-  L.marker([event.latlng.lat, event.latlng.lng], {icon: targetIcon}).addTo(map);
-};
+  const marker = L.marker([event.latlng.lat, event.latlng.lng], {icon: targetIcon});
+  marker._id = id;
+
+  marker.addTo(map);
+};
+
+
+export const markUnclicked = (map, id) => {
+
+  map.eachLayer((layer) => {
+    if (layer.options && layer.options.pane === "markerPane") {
+      if (layer._id === id) {
+        map.removeLayer(layer);
+      }
+    }
+  });
+}