From fcb3ce4da3a8f1d6fc0ccdf08d0e0738b2a2faa9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Mar 2022 13:25:41 +0000
Subject: [PATCH] Add map action for map click

---
 packages/client/manifest.json                 | 15 ++++++++++
 .../app/embedded-map/EmbeddedMap.svelte       | 30 +++++++++++++++----
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1c7100192a..2336c2f3f6 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2566,6 +2566,21 @@
           }
         ]
       },
+      {
+        "type": "event",
+        "label": "On map click",
+        "key": "onMapClick",
+        "context": [
+          {
+            "label": "Clicked latitude",
+            "key": "lat"
+          },
+          {
+            "label": "Clicked longitude",
+            "key": "lng"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Enable Fullscreen",
diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index 05340fca1f..1746a79d95 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -25,6 +25,7 @@
   export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   export let mapAttribution
   export let onMarkerClick
+  export let onMapClick
 
   const { styleable, notificationStore } = getContext("sdk")
   const component = getContext("component")
@@ -65,6 +66,14 @@
       paddingTopLeft: [0, 24],
     })
   }
+  $: mapInstance?.on("click", e => {
+    if (onMapClick) {
+      onMapClick({
+        lat: e.latlng.lat,
+        lng: e.latlng.lng,
+      })
+    }
+  })
 
   const updateMapDimensions = mapInstance => {
     if (typeof mapInstance !== "object") {
@@ -197,7 +206,14 @@
     maxZoomLevel,
   }
 
-  const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey, onClick) => {
+  const addMapMarkers = (
+    mapInstance,
+    rows,
+    latKey,
+    lngKey,
+    titleKey,
+    onClick
+  ) => {
     if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) {
       return
     }
@@ -218,15 +234,17 @@
         row[titleKey]
       )
 
-      marker.bindTooltip(markerContent, {
-        direction: "top",
-        offset: [0, -25]
-      }).addTo(mapMarkerGroup)
+      marker
+        .bindTooltip(markerContent, {
+          direction: "top",
+          offset: [0, -25],
+        })
+        .addTo(mapMarkerGroup)
 
       if (onClick) {
         marker.on("click", () => {
           onClick({
-            marker: row
+            marker: row,
           })
         })
       }