From 4d01063383f2aceda21c4d8f64b6b52b0e5df16f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Mar 2022 11:45:26 +0000
Subject: [PATCH 1/9] Convert marker popups to tooltips on hover

---
 .../components/app/embedded-map/EmbeddedMap.svelte    | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index 200aaaaed9..342927252a 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -216,13 +216,10 @@
         row[titleKey]
       )
 
-      marker.bindPopup(markerContent).addTo(mapMarkerGroup)
-
-      //https://github.com/Leaflet/Leaflet/issues/7331
-      marker.on("click", function () {
-        this.openPopup()
-      })
-
+      marker.bindTooltip(markerContent, {
+        direction: "top",
+        offset: [0, -25]
+      }).addTo(mapMarkerGroup)
       mapMarkers = [...mapMarkers, marker]
     })
   }

From 9500203515deb47695f270bd749ecf4ded876f51 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Mar 2022 11:16:51 +0000
Subject: [PATCH 2/9] Add event context to button actions to allow passing in
 params at run time and add corresponding data bindings

---
 .../builder/src/builderStore/dataBinding.js   |  36 +-
 .../builder/src/builderStore/store/theme.js   |   4 +-
 .../ButtonActionDrawer.svelte                 |   5 +
 .../ButtonActionEditor.svelte                 |   2 +
 .../PropertyControls/PropertyControl.svelte   |   1 +
 packages/client/manifest.json                 | 439 ++++++++++--------
 .../client/src/components/Component.svelte    |  35 +-
 .../app/embedded-map/EmbeddedMap.svelte       |  15 +-
 packages/client/src/utils/buttonActions.js    |   8 +-
 packages/client/src/utils/componentProps.js   |   6 +-
 10 files changed, 344 insertions(+), 207 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 5b9bebcbf5..c4e14d2e5c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -393,18 +393,45 @@ const getUrlBindings = asset => {
 
 /**
  * Gets all bindable properties exposed in a button actions flow up until
- * the specified action ID.
+ * the specified action ID, as well as context provided for the action
+ * setting as a whole by the component.
  */
-export const getButtonContextBindings = (actions, actionId) => {
+export const getButtonContextBindings = (
+  asset,
+  componentId,
+  settingKey,
+  actions,
+  actionId
+) => {
+  let bindings = []
+
+  // Check if any context bindings are provided by the component for this
+  // setting
+  const component = findComponent(asset.props, componentId)
+  const settings = getComponentSettings(component?._component)
+  const eventSetting = settings.find(setting => setting.key === settingKey)
+  if (!eventSetting) {
+    return bindings
+  }
+  if (eventSetting.context?.length) {
+    eventSetting.context.forEach(contextEntry => {
+      bindings.push({
+        readableBinding: contextEntry.label,
+        runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
+          contextEntry.key
+        )}`,
+      })
+    })
+  }
+
   // Get the steps leading up to this value
   const index = actions?.findIndex(action => action.id === actionId)
   if (index == null || index === -1) {
-    return []
+    return bindings
   }
   const prevActions = actions.slice(0, index)
 
   // Generate bindings for any steps which provide context
-  let bindings = []
   prevActions.forEach((action, idx) => {
     const def = ActionDefinitions.actions.find(
       x => x.name === action["##eventHandlerType"]
@@ -418,6 +445,7 @@ export const getButtonContextBindings = (actions, actionId) => {
       })
     }
   })
+
   return bindings
 }
 
diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index d4d7460ed2..bd3a149d63 100644
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@@ -2,9 +2,10 @@ import { createLocalStorageStore } from "@budibase/frontend-core"
 
 export const getThemeStore = () => {
   const themeElement = document.documentElement
+
   const initialValue = {
     theme: "darkest",
-    options: ["lightest", "light", "dark", "darkest"],
+    options: ["lightest", "light", "dark", "darkest", "nord"],
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
 
@@ -21,6 +22,7 @@ export const getThemeStore = () => {
         `spectrum--${option}`,
         option === state.theme
       )
+      themeElement.classList.add("spectrum--darkest")
     })
   })
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
index 8cf0f37f70..5b0ab4a6a3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -12,11 +12,13 @@
   import { getAvailableActions } from "./index"
   import { generate } from "shortid"
   import { getButtonContextBindings } from "builderStore/dataBinding"
+  import { currentAsset, store } from "builderStore"
 
   const flipDurationMs = 150
   const EVENT_TYPE_KEY = "##eventHandlerType"
   const actionTypes = getAvailableActions()
 
+  export let key
   export let actions
   export let bindings = []
 
@@ -24,6 +26,9 @@
 
   // These are ephemeral bindings which only exist while executing actions
   $: buttonContextBindings = getButtonContextBindings(
+    $currentAsset,
+    $store.selectedComponentId,
+    key,
     actions,
     selectedAction?.id
   )
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
index 6a0e94cd4c..550d982013 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -8,6 +8,7 @@
 
   const dispatch = createEventDispatcher()
 
+  export let key
   export let value = []
   export let name
   export let bindings
@@ -81,5 +82,6 @@
     bind:actions={tmpValue}
     eventType={name}
     {bindings}
+    {key}
   />
 </Drawer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 911688b30c..617b1c83ab 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -79,6 +79,7 @@
       bindings={allBindings}
       name={key}
       text={label}
+      {key}
       {type}
       {...props}
     />
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index fff56f595d..1c7100192a 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -264,7 +264,8 @@
           {
             "label": "Primary",
             "value": "primary"
-          }, {
+          },
+          {
             "label": "Secondary",
             "value": "secondary"
           },
@@ -507,7 +508,7 @@
       },
       {
         "type": "static",
-        "values":  [
+        "values": [
           {
             "label": "Row Index",
             "key": "index"
@@ -626,28 +627,36 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
-          "label": "Extra Small",
-          "value": "XS"
-        }, {
-          "label": "Small",
-          "value": "S"
-        }, {
-          "label": "Medium",
-          "value": "M"
-        }, {
-          "label": "Large",
-          "value": "L"
-        }, {
-          "label": "Extra Large",
-          "value": "XL"
-        }, {
-          "label": "2XL",
-          "value": "XXL"
-        }, {
-          "label": "3XL",
-          "value": "XXXL"
-        }]
+        "options": [
+          {
+            "label": "Extra Small",
+            "value": "XS"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra Large",
+            "value": "XL"
+          },
+          {
+            "label": "2XL",
+            "value": "XXL"
+          },
+          {
+            "label": "3XL",
+            "value": "XXXL"
+          }
+        ]
       },
       {
         "type": "color",
@@ -689,27 +698,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
-          "label": "Left",
-          "value": "left",
-          "barIcon": "TextAlignLeft",
-          "barTitle": "Align left"
-        }, {
-          "label": "Center",
-          "value": "center",
-          "barIcon": "TextAlignCenter",
-          "barTitle": "Align center"
-        }, {
-          "label": "Right",
-          "value": "right",
-          "barIcon": "TextAlignRight",
-          "barTitle": "Align right"
-        }, {
-          "label": "Justify",
-          "value": "justify",
-          "barIcon": "TextAlignJustify",
-          "barTitle": "Justify text"
-        }]
+        "options": [
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "TextAlignLeft",
+            "barTitle": "Align left"
+          },
+          {
+            "label": "Center",
+            "value": "center",
+            "barIcon": "TextAlignCenter",
+            "barTitle": "Align center"
+          },
+          {
+            "label": "Right",
+            "value": "right",
+            "barIcon": "TextAlignRight",
+            "barTitle": "Align right"
+          },
+          {
+            "label": "Justify",
+            "value": "justify",
+            "barIcon": "TextAlignJustify",
+            "barTitle": "Justify text"
+          }
+        ]
       }
     ]
   },
@@ -733,28 +747,36 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
-          "label": "Extra Small",
-          "value": "XS"
-        }, {
-          "label": "Small",
-          "value": "S"
-        }, {
-          "label": "Medium",
-          "value": "M"
-        }, {
-          "label": "Large",
-          "value": "L"
-        }, {
-          "label": "Extra Large",
-          "value": "XL"
-        }, {
-          "label": "2XL",
-          "value": "XXL"
-        }, {
-          "label": "3XL",
-          "value": "XXXL"
-        }]
+        "options": [
+          {
+            "label": "Extra Small",
+            "value": "XS"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          },
+          {
+            "label": "Extra Large",
+            "value": "XL"
+          },
+          {
+            "label": "2XL",
+            "value": "XXL"
+          },
+          {
+            "label": "3XL",
+            "value": "XXXL"
+          }
+        ]
       },
       {
         "type": "color",
@@ -796,27 +818,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
-          "label": "Left",
-          "value": "left",
-          "barIcon": "TextAlignLeft",
-          "barTitle": "Align left"
-        }, {
-          "label": "Center",
-          "value": "center",
-          "barIcon": "TextAlignCenter",
-          "barTitle": "Align center"
-        }, {
-          "label": "Right",
-          "value": "right",
-          "barIcon": "TextAlignRight",
-          "barTitle": "Align right"
-        }, {
-          "label": "Justify",
-          "value": "justify",
-          "barIcon": "TextAlignJustify",
-          "barTitle": "Justify text"
-        }]
+        "options": [
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "TextAlignLeft",
+            "barTitle": "Align left"
+          },
+          {
+            "label": "Center",
+            "value": "center",
+            "barIcon": "TextAlignCenter",
+            "barTitle": "Align center"
+          },
+          {
+            "label": "Right",
+            "value": "right",
+            "barIcon": "TextAlignRight",
+            "barTitle": "Align right"
+          },
+          {
+            "label": "Justify",
+            "value": "justify",
+            "barIcon": "TextAlignJustify",
+            "barTitle": "Justify text"
+          }
+        ]
       }
     ]
   },
@@ -837,16 +864,20 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
-          "label": "Small",
-          "value": "S"
-        }, {
-          "label": "Medium",
-          "value": "M"
-        }, {
-          "label": "Large",
-          "value": "L"
-        }]
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ]
       },
       {
         "type": "color",
@@ -1037,16 +1068,20 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
-          "label": "Small",
-          "value": "S"
-        }, {
-          "label": "Medium",
-          "value": "M"
-        }, {
-          "label": "Large",
-          "value": "L"
-        }]
+        "options": [
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ]
       },
       {
         "type": "color",
@@ -1088,27 +1123,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
-          "label": "Left",
-          "value": "left",
-          "barIcon": "TextAlignLeft",
-          "barTitle": "Align left"
-        }, {
-          "label": "Center",
-          "value": "center",
-          "barIcon": "TextAlignCenter",
-          "barTitle": "Align center"
-        }, {
-          "label": "Right",
-          "value": "right",
-          "barIcon": "TextAlignRight",
-          "barTitle": "Align right"
-        }, {
-          "label": "Justify",
-          "value": "justify",
-          "barIcon": "TextAlignJustify",
-          "barTitle": "Justify text"
-        }]
+        "options": [
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "TextAlignLeft",
+            "barTitle": "Align left"
+          },
+          {
+            "label": "Center",
+            "value": "center",
+            "barIcon": "TextAlignCenter",
+            "barTitle": "Align center"
+          },
+          {
+            "label": "Right",
+            "value": "right",
+            "barIcon": "TextAlignRight",
+            "barTitle": "Align right"
+          },
+          {
+            "label": "Justify",
+            "value": "justify",
+            "barIcon": "TextAlignJustify",
+            "barTitle": "Justify text"
+          }
+        ]
       }
     ]
   },
@@ -1165,7 +1205,15 @@
         "type": "select",
         "label": "Card Width",
         "key": "cardWidth",
-        "options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
+        "options": [
+          "24rem",
+          "28rem",
+          "32rem",
+          "40rem",
+          "48rem",
+          "60rem",
+          "100%"
+        ],
         "defaultValue": "32rem"
       },
       {
@@ -1785,11 +1833,7 @@
     "icon": "Form",
     "hasChildren": true,
     "illegalChildren": ["section", "form"],
-    "actions": [
-      "ValidateForm",
-      "ClearForm",
-      "ChangeFormStep"
-    ],
+    "actions": ["ValidateForm", "ClearForm", "ChangeFormStep"],
     "styles": ["size"],
     "settings": [
       {
@@ -1816,7 +1860,8 @@
           {
             "label": "Medium",
             "value": "spectrum--medium"
-          }, {
+          },
+          {
             "label": "Large",
             "value": "spectrum--large"
           }
@@ -1833,7 +1878,7 @@
     "context": [
       {
         "type": "static",
-        "values":  [
+        "values": [
           {
             "label": "Value",
             "key": "__value"
@@ -1947,27 +1992,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
-          "label": "Left",
-          "value": "left",
-          "barIcon": "TextAlignLeft",
-          "barTitle": "Align left"
-        }, {
-          "label": "Center",
-          "value": "center",
-          "barIcon": "TextAlignCenter",
-          "barTitle": "Align center"
-        }, {
-          "label": "Right",
-          "value": "right",
-          "barIcon": "TextAlignRight",
-          "barTitle": "Align right"
-        }, {
-          "label": "Justify",
-          "value": "justify",
-          "barIcon": "TextAlignJustify",
-          "barTitle": "Justify text"
-        }]
+        "options": [
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "TextAlignLeft",
+            "barTitle": "Align left"
+          },
+          {
+            "label": "Center",
+            "value": "center",
+            "barIcon": "TextAlignCenter",
+            "barTitle": "Align center"
+          },
+          {
+            "label": "Right",
+            "value": "right",
+            "barIcon": "TextAlignRight",
+            "barTitle": "Align right"
+          },
+          {
+            "label": "Justify",
+            "value": "justify",
+            "barIcon": "TextAlignJustify",
+            "barTitle": "Justify text"
+          }
+        ]
       }
     ]
   },
@@ -2480,15 +2530,42 @@
     "styles": ["size"],
     "editable": true,
     "draggable": false,
-    "illegalChildren": [
-      "section"
-    ],
+    "illegalChildren": ["section"],
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
         "key": "dataProvider"
       },
+      {
+        "type": "field",
+        "label": "Latitude Key",
+        "key": "latitudeKey",
+        "dependsOn": "dataProvider"
+      },
+      {
+        "type": "field",
+        "label": "Longitude Key",
+        "key": "longitudeKey",
+        "dependsOn": "dataProvider"
+      },
+      {
+        "type": "field",
+        "label": "Title Key",
+        "key": "titleKey",
+        "dependsOn": "dataProvider"
+      },
+      {
+        "type": "event",
+        "label": "On marker click",
+        "key": "onMarkerClick",
+        "context": [
+          {
+            "label": "Clicked marker",
+            "key": "marker"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Enable Fullscreen",
@@ -2512,23 +2589,8 @@
         "label": "Zoom Level (0-100)",
         "key": "zoomLevel",
         "defaultValue": 72,
-        "max" : 100,
-        "min" : 0
-      },
-      {
-        "type": "field",
-        "label": "Latitude Key",
-        "key": "latitudeKey"
-      },
-      {
-        "type": "field",
-        "label": "Longitude Key",
-        "key": "longitudeKey"
-      },
-      {
-        "type": "field",
-        "label": "Title Key",
-        "key": "titleKey"
+        "max": 100,
+        "min": 0
       },
       {
         "type": "text",
@@ -2538,7 +2600,7 @@
       },
       {
         "type": "text",
-        "label": "Default Location (lat,lng)",
+        "label": "Default Location",
         "key": "defaultLocation",
         "defaultValue": "51.5072,-0.1276"
       },
@@ -2710,15 +2772,15 @@
     ],
     "context": {
       "type": "static",
-      "values":  [
+      "values": [
         {
           "label": "Rows",
           "key": "rows"
         },
-	{
-	  "label": "Extra Info",
-	  "key": "info"
-	},
+        {
+          "label": "Extra Info",
+          "key": "info"
+        },
         {
           "label": "Rows Length",
           "key": "rowsLength"
@@ -3192,7 +3254,6 @@
             "key": "cardDescription",
             "label": "Description",
             "nested": true
-
           },
           {
             "type": "text",
@@ -3457,12 +3518,12 @@
       {
         "type": "static",
         "suffix": "provider",
-        "values":  [
+        "values": [
           {
             "label": "Rows",
             "key": "rows"
           },
-	  {
+          {
             "label": "Extra Info",
             "key": "info"
           },
@@ -3483,12 +3544,12 @@
       {
         "type": "static",
         "suffix": "repeater",
-        "values":  [
+        "values": [
           {
             "label": "Row Index",
             "key": "index"
           }
-         ]
+        ]
       },
       {
         "type": "schema",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index e4176587ee..d9af295108 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -1,6 +1,7 @@
 <script context="module">
   // Cache the definition of settings for each component type
   let SettingsDefinitionCache = {}
+  let SettingsDefinitionMapCache = {}
 
   // Cache the settings of each component ID.
   // This speeds up remounting as well as repeaters.
@@ -74,6 +75,8 @@
   // Component information derived during initialisation
   let constructor
   let definition
+  let settingsDefinition
+  let settingsDefinitionMap
 
   // Set up initial state for each new component instance
   $: initialise(instance)
@@ -118,7 +121,7 @@
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings
-  $: enrichComponentSettings($context)
+  $: enrichComponentSettings($context, settingsDefinitionMap)
 
   // Evaluate conditional UI settings and store any component setting changes
   // which need to be made. This is broken into 2 lines to avoid svelte
@@ -168,12 +171,14 @@
     }
 
     // Get the settings definition for this component, and cache it
-    let settingsDefinition
     if (SettingsDefinitionCache[definition.name]) {
       settingsDefinition = SettingsDefinitionCache[definition.name]
+      settingsDefinitionMap = SettingsDefinitionMapCache[definition.name]
     } else {
       settingsDefinition = getSettingsDefinition(definition)
+      settingsDefinitionMap = getSettingsDefinitionMap(settingsDefinition)
       SettingsDefinitionCache[definition.name] = settingsDefinition
+      SettingsDefinitionMapCache[definition.name] = settingsDefinitionMap
     }
 
     // Parse the instance settings, and cache them
@@ -190,7 +195,9 @@
     dynamicSettings = instanceSettings.dynamicSettings
 
     // Force an initial enrichment of the new settings
-    enrichComponentSettings(get(context), { force: true })
+    enrichComponentSettings(get(context), settingsDefinitionMap, {
+      force: true,
+    })
   }
 
   // Gets the component constructor for the specified component
@@ -226,6 +233,14 @@
     return settings
   }
 
+  const getSettingsDefinitionMap = settingsDefinition => {
+    let map = {}
+    settingsDefinition?.forEach(setting => {
+      map[setting.key] = setting
+    })
+    return map
+  }
+
   const getInstanceSettings = (instance, settingsDefinition) => {
     // Get raw settings
     let settings = {}
@@ -248,7 +263,7 @@
         } else if (typeof value === "string" && value.includes("{{")) {
           // Strings can be trivially checked
           delete newStaticSettings[setting.key]
-        } else if (value[0]?.["##eventHandlerType"] != null) {
+        } else if (setting.type === "event") {
           // Always treat button actions as dynamic
           delete newStaticSettings[setting.key]
         } else if (typeof value === "object") {
@@ -273,7 +288,11 @@
   }
 
   // Enriches any string component props using handlebars
-  const enrichComponentSettings = (context, options = { force: false }) => {
+  const enrichComponentSettings = (
+    context,
+    settingsDefinitionMap,
+    options = { force: false }
+  ) => {
     const contextChanged = context.key !== lastContextKey
     if (!contextChanged && !options?.force) {
       return
@@ -285,7 +304,11 @@
     const enrichmentTime = latestUpdateTime
 
     // Enrich settings with context
-    const newEnrichedSettings = enrichProps(dynamicSettings, context)
+    const newEnrichedSettings = enrichProps(
+      dynamicSettings,
+      context,
+      settingsDefinitionMap
+    )
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {
diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index 342927252a..05340fca1f 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -24,6 +24,7 @@
   export let defaultLocation
   export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   export let mapAttribution
+  export let onMarkerClick
 
   const { styleable, notificationStore } = getContext("sdk")
   const component = getContext("component")
@@ -55,7 +56,8 @@
     dataProvider?.rows,
     latitudeKey,
     longitudeKey,
-    titleKey
+    titleKey,
+    onMarkerClick
   )
   $: if (typeof mapInstance === "object" && mapMarkers.length > 0) {
     mapInstance.setZoom(0)
@@ -195,7 +197,7 @@
     maxZoomLevel,
   }
 
-  const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey) => {
+  const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey, onClick) => {
     if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) {
       return
     }
@@ -220,6 +222,15 @@
         direction: "top",
         offset: [0, -25]
       }).addTo(mapMarkerGroup)
+
+      if (onClick) {
+        marker.on("click", () => {
+          onClick({
+            marker: row
+          })
+        })
+      }
+
       mapMarkers = [...mapMarkers, marker]
     })
   }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 25659cea98..d880455af0 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -308,7 +308,7 @@ export const enrichButtonActions = (actions, context) => {
   let buttonContext = context.actions || []
 
   const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
-  return async () => {
+  return async eventContext => {
     for (let i = 0; i < handlers.length; i++) {
       try {
         // Skip any non-existent action definitions
@@ -317,7 +317,11 @@ export const enrichButtonActions = (actions, context) => {
         }
 
         // Built total context for this action
-        const totalContext = { ...context, actions: buttonContext }
+        const totalContext = {
+          ...context,
+          actions: buttonContext,
+          eventContext,
+        }
 
         // Get and enrich this button action with the total context
         let action = actions[i]
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 0727b5943f..14760252a9 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -22,7 +22,7 @@ export const propsAreSame = (a, b) => {
  * Enriches component props.
  * Data bindings are enriched, and button actions are enriched.
  */
-export const enrichProps = (props, context) => {
+export const enrichProps = (props, context, settingsDefinitionMap) => {
   // Create context of all bindings and data contexts
   // Duplicate the closest context as "data" which the builder requires
   const totalContext = {
@@ -38,7 +38,7 @@ export const enrichProps = (props, context) => {
   let normalProps = { ...props }
   let actionProps = {}
   Object.keys(normalProps).forEach(prop => {
-    if (prop?.toLowerCase().includes("onclick")) {
+    if (settingsDefinitionMap?.[prop]?.type === "event") {
       actionProps[prop] = normalProps[prop]
       delete normalProps[prop]
     }
@@ -61,7 +61,7 @@ export const enrichProps = (props, context) => {
   // Conditions
   if (enrichedProps._conditions?.length) {
     enrichedProps._conditions.forEach((condition, idx) => {
-      if (condition.setting?.toLowerCase().includes("onclick")) {
+      if (settingsDefinitionMap?.[condition.setting]?.type === "event") {
         // Use the original condition action value to enrich it to a button
         // action
         condition.settingValue = enrichButtonActions(

From d89b12c57df224b2d0decefb3de0383a281f62ed Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Mar 2022 11:17:32 +0000
Subject: [PATCH 3/9] Change dev docker-compose restart policy to on-failure to
 stop running BB docker containers 247

---
 hosting/docker-compose.dev.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml
index df403c0a22..43b8526e9e 100644
--- a/hosting/docker-compose.dev.yaml
+++ b/hosting/docker-compose.dev.yaml
@@ -5,7 +5,7 @@ version: "3"
 services:
   minio-service:
     container_name: budi-minio-dev
-    restart: always
+    restart: on-failure
     image: minio/minio
     volumes:
       - minio_data:/data
@@ -23,7 +23,7 @@ services:
 
   proxy-service:
     container_name: budi-nginx-dev
-    restart: always
+    restart: on-failure
     image: nginx:latest
     volumes:
       - ./.generated-nginx.dev.conf:/etc/nginx/nginx.conf
@@ -38,7 +38,7 @@ services:
   couchdb-service:
     # platform: linux/amd64
     container_name: budi-couchdb-dev
-    restart: always
+    restart: on-failure
     image: ibmcom/couchdb3
     environment:
       - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
@@ -59,7 +59,7 @@ services:
 
   redis-service:
     container_name: budi-redis-dev
-    restart: always
+    restart: on-failure
     image: redis
     command: redis-server --requirepass ${REDIS_PASSWORD}
     ports:

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 4/9] 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,
           })
         })
       }

From b3840f0ae0a902dc284e179c3f0497e21fd0e362 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Mar 2022 13:54:32 +0000
Subject: [PATCH 5/9] Fix duplicate handlers for map click setting and update
 map to only zoom to markers once

---
 .../app/embedded-map/EmbeddedMap.svelte       | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index 1746a79d95..d71873c0f3 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -37,6 +37,7 @@
   let mapInstance
   let mapMarkerGroup = new L.FeatureGroup()
   let mapMarkers = []
+  let loaded = false
 
   let minZoomLevel = 0
   let maxZoomLevel = 18
@@ -60,20 +61,13 @@
     titleKey,
     onMarkerClick
   )
-  $: if (typeof mapInstance === "object" && mapMarkers.length > 0) {
+  $: if (!loaded && typeof mapInstance === "object" && mapMarkers.length > 0) {
+    loaded = true
     mapInstance.setZoom(0)
     mapInstance.fitBounds(mapMarkerGroup.getBounds(), {
       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") {
@@ -277,6 +271,17 @@
 
     //Initialise the map
     mapInstance.setView(initCoords, adjustedZoomLevel)
+
+    // Add click handler
+    mapInstance?.on("click", e => {
+      console.log("map clicked!")
+      if (onMapClick) {
+        onMapClick({
+          lat: e.latlng.lat,
+          lng: e.latlng.lng,
+        })
+      }
+    })
   }
 
   const mapAction = () => {

From ced26dfa64fd66a4cb08ac8f83c2a43e6a83ad82 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 16 Mar 2022 14:53:12 +0000
Subject: [PATCH 6/9] Improve map actions, tidy up some parts of the map
 component and ensure settings update properly

---
 packages/client/manifest.json                 |  44 ++-
 .../app/embedded-map/EmbeddedMap.svelte       | 355 +++++++++++-------
 packages/client/src/stores/confirmation.js    |  16 +-
 packages/client/src/utils/buttonActions.js    |  53 +--
 4 files changed, 277 insertions(+), 191 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 2336c2f3f6..6c8ed8cbcc 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2558,7 +2558,7 @@
       {
         "type": "event",
         "label": "On marker click",
-        "key": "onMarkerClick",
+        "key": "onClickMarker",
         "context": [
           {
             "label": "Clicked marker",
@@ -2566,58 +2566,66 @@
           }
         ]
       },
+      {
+        "type": "boolean",
+        "label": "Enable creating markers",
+        "key": "creationEnabled",
+        "defaultValue": false
+      },
       {
         "type": "event",
-        "label": "On map click",
-        "key": "onMapClick",
+        "label": "On create marker",
+        "key": "onCreateMarker",
+        "dependsOn": "creationEnabled",
         "context": [
           {
-            "label": "Clicked latitude",
+            "label": "New marker latitude",
             "key": "lat"
           },
           {
-            "label": "Clicked longitude",
+            "label": "New marker longitude",
             "key": "lng"
           }
         ]
       },
       {
         "type": "boolean",
-        "label": "Enable Fullscreen",
+        "label": "Enable fullscreen",
         "key": "fullScreenEnabled",
         "defaultValue": true
       },
       {
         "type": "boolean",
-        "label": "Enable Location",
+        "label": "Enable location",
         "key": "locationEnabled",
         "defaultValue": true
       },
       {
         "type": "boolean",
-        "label": "Enable Zoom",
+        "label": "Enable zoom",
         "key": "zoomEnabled",
         "defaultValue": true
       },
-      {
-        "type": "number",
-        "label": "Zoom Level (0-100)",
-        "key": "zoomLevel",
-        "defaultValue": 72,
-        "max": 100,
-        "min": 0
-      },
       {
         "type": "text",
         "label": "Tile URL",
         "key": "tileURL",
         "defaultValue": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       },
+
       {
         "type": "text",
-        "label": "Default Location",
+        "label": "Default Location (when empty)",
         "key": "defaultLocation",
-        "defaultValue": "51.5072,-0.1276"
+        "placeholder": "51.5072,-0.1276"
+      },
+      {
+        "type": "number",
+        "label": "Default Location Zoom Level (0-100)",
+        "key": "zoomLevel",
+        "placeholder": 50,
+        "max": 100,
+        "min": 0
       },
       {
         "type": "text",
diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index d71873c0f3..b7eb516aa8 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -2,8 +2,8 @@
   import L from "leaflet"
   import sanitizeHtml from "sanitize-html"
   import "leaflet/dist/leaflet.css"
-  import { Helpers } from "@budibase/bbui"
-  import { getContext } from "svelte"
+  import { Helpers, Button } from "@budibase/bbui"
+  import { onMount, getContext } from "svelte"
   import {
     FullScreenControl,
     LocationControl,
@@ -24,91 +24,16 @@
   export let defaultLocation
   export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   export let mapAttribution
-  export let onMarkerClick
-  export let onMapClick
+  export let creationEnabled = false
+  export let onClickMarker
+  export let onCreateMarker
 
   const { styleable, notificationStore } = getContext("sdk")
   const component = getContext("component")
   const embeddedMapId = `${Helpers.uuid()}-wrapper`
 
-  let cachedDeviceCoordinates
-  const fallbackCoordinates = [51.5072, -0.1276] //London
-
-  let mapInstance
-  let mapMarkerGroup = new L.FeatureGroup()
-  let mapMarkers = []
-  let loaded = false
-
-  let minZoomLevel = 0
-  let maxZoomLevel = 18
-  let adjustedZoomLevel = !Number.isInteger(zoomLevel)
-    ? 72
-    : Math.round(zoomLevel * (maxZoomLevel / 100))
-
-  $: zoomControlUpdated(mapInstance, zoomEnabled)
-  $: locationControlUpdated(mapInstance, locationEnabled)
-  $: fullScreenControlUpdated(mapInstance, fullScreenEnabled)
-  $: updateMapDimensions(
-    mapInstance,
-    $component.styles.normal.width,
-    $component.styles.normal.height
-  )
-  $: addMapMarkers(
-    mapInstance,
-    dataProvider?.rows,
-    latitudeKey,
-    longitudeKey,
-    titleKey,
-    onMarkerClick
-  )
-  $: if (!loaded && typeof mapInstance === "object" && mapMarkers.length > 0) {
-    loaded = true
-    mapInstance.setZoom(0)
-    mapInstance.fitBounds(mapMarkerGroup.getBounds(), {
-      paddingTopLeft: [0, 24],
-    })
-  }
-
-  const updateMapDimensions = mapInstance => {
-    if (typeof mapInstance !== "object") {
-      return
-    }
-    mapInstance.invalidateSize()
-  }
-
-  let isValidLatitude = value => {
-    return !isNaN(value) && value > -90 && value < 90
-  }
-
-  let isValidLongitude = value => {
-    return !isNaN(value) && value > -180 && value < 180
-  }
-
-  const parseDefaultLocation = defaultLocation => {
-    if (typeof defaultLocation !== "string") {
-      return fallbackCoordinates
-    }
-    let defaultLocationParts = defaultLocation.split(",")
-    if (defaultLocationParts.length !== 2) {
-      return fallbackCoordinates
-    }
-
-    let parsedDefaultLatitude = parseFloat(defaultLocationParts[0].trim())
-    let parsedDefaultLongitude = parseFloat(defaultLocationParts[1].trim())
-
-    return isValidLatitude(parsedDefaultLatitude) === true &&
-      isValidLongitude(parsedDefaultLongitude) === true
-      ? [parsedDefaultLatitude, parsedDefaultLongitude]
-      : fallbackCoordinates
-  }
-
-  $: defaultCoordinates =
-    mapMarkers.length > 0
-      ? parseDefaultLocation(defaultLocation)
-      : fallbackCoordinates
-
   // Map Button Controls
-  let locationControl = new LocationControl({
+  const locationControl = new LocationControl({
     position: "bottomright",
     onLocationFail: err => {
       if (err.code === GeolocationPositionError.PERMISSION_DENIED) {
@@ -134,13 +59,135 @@
       }
     },
   })
-  let fullScreenControl = new FullScreenControl({
+  const fullScreenControl = new FullScreenControl({
     position: "topright",
   })
-  let zoomControl = L.control.zoom({
+  const zoomControl = L.control.zoom({
     position: "bottomright",
   })
 
+  // Map and marker configuration
+  const defaultMarkerOptions = {
+    html:
+      '<div><svg width="26px" height="26px" class="spectrum-Icon" focusable="false" stroke="#b12b27" stroke-width="1%">' +
+      '<use xlink:href="#spectrum-icon-18-Location" /></svg></div>',
+    className: "embedded-map-marker",
+    iconSize: [26, 26],
+    iconAnchor: [13, 26],
+    popupAnchor: [0, -13],
+  }
+  const mapMarkerOptions = {
+    icon: L.divIcon(defaultMarkerOptions),
+    draggable: false,
+    alt: "Location Marker",
+  }
+  const candidateMarkerOptions = {
+    icon: L.divIcon({
+      ...defaultMarkerOptions,
+      className: "embedded-map-marker--candidate",
+    }),
+    draggable: false,
+    alt: "Location Marker",
+  }
+  const mapOptions = {
+    fullScreen: false,
+    zoomControl: false,
+    scrollWheelZoom: zoomEnabled,
+    minZoomLevel,
+    maxZoomLevel,
+  }
+  const fallbackCoordinates = [51.5072, -0.1276] //London
+
+  let mapInstance
+  let mapMarkerGroup = new L.FeatureGroup()
+  let candidateMarkerGroup = new L.FeatureGroup()
+  let candidateMarkerPosition
+  let mounted = false
+  let initialMarkerZoomCompleted = false
+  let minZoomLevel = 0
+  let maxZoomLevel = 18
+  let cachedDeviceCoordinates
+
+  $: validRows = getValidRows(dataProvider?.rows, latitudeKey, longitudeKey)
+  $: safeZoomLevel = parseZoomLevel(zoomLevel)
+  $: defaultCoordinates = parseDefaultLocation(defaultLocation)
+  $: initMap(tileURL, mapAttribution, safeZoomLevel)
+  $: zoomControlUpdated(mapInstance, zoomEnabled)
+  $: locationControlUpdated(mapInstance, locationEnabled)
+  $: fullScreenControlUpdated(mapInstance, fullScreenEnabled)
+  $: width = $component.styles.normal.width
+  $: height = $component.styles.normal.height
+  $: width, height, mapInstance?.invalidateSize()
+  $: defaultCoordinates, resetView()
+  $: addMapMarkers(
+    mapInstance,
+    validRows,
+    latitudeKey,
+    longitudeKey,
+    titleKey,
+    onClickMarker
+  )
+
+  const isValidLatitude = value => {
+    return !isNaN(value) && value > -90 && value < 90
+  }
+
+  const isValidLongitude = value => {
+    return !isNaN(value) && value > -180 && value < 180
+  }
+
+  const getValidRows = (rows, latKey, lngKey) => {
+    if (!rows?.length || !latKey || !lngKey) {
+      return []
+    }
+    return rows.filter(row => {
+      return isValidLatitude(row[latKey]) && isValidLongitude(row[lngKey])
+    })
+  }
+
+  const parseZoomLevel = zoomLevel => {
+    let zoom = zoomLevel
+    if (zoom == null || isNaN(zoom)) {
+      zoom = 50
+    } else {
+      zoom = parseFloat(zoom)
+      zoom = Math.max(0, Math.min(100, zoom))
+    }
+    return Math.round((zoom * maxZoomLevel) / 100)
+  }
+
+  const parseDefaultLocation = defaultLocation => {
+    if (typeof defaultLocation !== "string") {
+      return fallbackCoordinates
+    }
+    let defaultLocationParts = defaultLocation.split(",")
+    if (defaultLocationParts.length !== 2) {
+      return fallbackCoordinates
+    }
+
+    let parsedDefaultLatitude = parseFloat(defaultLocationParts[0].trim())
+    let parsedDefaultLongitude = parseFloat(defaultLocationParts[1].trim())
+
+    return isValidLatitude(parsedDefaultLatitude) === true &&
+      isValidLongitude(parsedDefaultLongitude) === true
+      ? [parsedDefaultLatitude, parsedDefaultLongitude]
+      : fallbackCoordinates
+  }
+
+  const resetView = () => {
+    if (!mapInstance) {
+      return
+    }
+    if (mapMarkerGroup.getLayers().length) {
+      mapInstance.setZoom(0)
+      mapInstance.fitBounds(mapMarkerGroup.getBounds(), {
+        paddingTopLeft: [0, 24],
+      })
+    } else {
+      mapInstance.setView(defaultCoordinates, safeZoomLevel)
+    }
+  }
+
   const locationControlUpdated = (mapInstance, locationEnabled) => {
     if (typeof mapInstance !== "object") {
       return
@@ -176,51 +223,21 @@
     }
   }
 
-  //Map icon and marker configuration
-  const mapIconMarkup =
-    '<div><svg width="26px" height="26px" class="spectrum-Icon" focusable="false" stroke="#b12b27" stroke-width="1%">' +
-    '<use xlink:href="#spectrum-icon-18-Location" /></svg></div>'
-  const mapIcon = L.divIcon({
-    html: mapIconMarkup,
-    className: "embedded-map-marker",
-    iconSize: [26, 26],
-    iconAnchor: [13, 26],
-    popupAnchor: [0, -13],
-  })
-  const mapMarkerOptions = {
-    icon: mapIcon,
-    draggable: false,
-    alt: "Location Marker",
-  }
-  let mapOptions = {
-    fullScreen: false,
-    zoomControl: false,
-    scrollWheelZoom: zoomEnabled,
-    minZoomLevel,
-    maxZoomLevel,
-  }
-
   const addMapMarkers = (
     mapInstance,
-    rows,
+    validRows,
     latKey,
     lngKey,
     titleKey,
     onClick
   ) => {
-    if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) {
+    if (!mapInstance || !validRows?.length) {
       return
     }
 
     mapMarkerGroup.clearLayers()
-
-    const validRows = rows.filter(row => {
-      return isValidLatitude(row[latKey]) && isValidLongitude(row[lngKey])
-    })
-
     validRows.forEach(row => {
       let markerCoords = [row[latKey], row[lngKey]]
-
       let marker = L.marker(markerCoords, mapMarkerOptions).addTo(mapInstance)
       let markerContent = generateMarkerPopupContent(
         row[latKey],
@@ -242,57 +259,91 @@
           })
         })
       }
-
-      mapMarkers = [...mapMarkers, marker]
     })
+
+    // Zoom to markers if this is the first time
+    if (!initialMarkerZoomCompleted) {
+      resetView()
+      initialMarkerZoomCompleted = true
+    }
   }
 
   const generateMarkerPopupContent = (latitude, longitude, text) => {
     return text || latitude + "," + longitude
   }
 
-  const initMap = () => {
-    const initCoords = defaultCoordinates
-
+  const initMap = (tileURL, attribution, zoom) => {
+    if (!mounted) {
+      return
+    }
+    if (mapInstance) {
+      mapInstance.remove()
+    }
     mapInstance = L.map(embeddedMapId, mapOptions)
     mapMarkerGroup.addTo(mapInstance)
+    candidateMarkerGroup.addTo(mapInstance)
 
-    const cleanAttribution = sanitizeHtml(mapAttribution, {
+    // Add attribution
+    const cleanAttribution = sanitizeHtml(attribution, {
       allowedTags: ["a"],
       allowedAttributes: {
         a: ["href", "target"],
       },
     })
-
     L.tileLayer(tileURL, {
       attribution: "&copy; " + cleanAttribution,
-      zoom: adjustedZoomLevel,
+      zoom,
     }).addTo(mapInstance)
 
-    //Initialise the map
-    mapInstance.setView(initCoords, adjustedZoomLevel)
-
     // Add click handler
-    mapInstance?.on("click", e => {
-      console.log("map clicked!")
-      if (onMapClick) {
-        onMapClick({
-          lat: e.latlng.lat,
-          lng: e.latlng.lng,
-        })
-      }
-    })
+    mapInstance.on("click", handleMapClick)
+
+    // Reset view
+    resetView()
   }
 
-  const mapAction = () => {
-    initMap()
-    return {
-      destroy() {
-        mapInstance.remove()
-        mapInstance = undefined
-      },
+  const handleMapClick = e => {
+    if (!creationEnabled) {
+      return
+    }
+    candidateMarkerGroup.clearLayers()
+    candidateMarkerPosition = [e.latlng.lat, e.latlng.lng]
+    let candidateMarker = L.marker(
+      candidateMarkerPosition,
+      candidateMarkerOptions
+    )
+    candidateMarker
+      .bindTooltip("New marker", {
+        permanent: true,
+        direction: "top",
+        offset: [0, -25],
+      })
+      .addTo(candidateMarkerGroup)
+      .on("click", clearCandidateMarker)
+  }
+
+  const createMarker = async () => {
+    if (!onCreateMarker) {
+      return
+    }
+    const res = await onCreateMarker({
+      lat: candidateMarkerPosition[0],
+      lng: candidateMarkerPosition[1],
+    })
+    if (res !== false) {
+      clearCandidateMarker()
     }
   }
+
+  const clearCandidateMarker = () => {
+    candidateMarkerGroup.clearLayers()
+    candidateMarkerPosition = null
+  }
+
+  onMount(() => {
+    mounted = true
+    initMap(tileURL, mapAttribution, safeZoomLevel)
+  })
 </script>
 
 <div class="embedded-map-wrapper map-default" use:styleable={$component.styles}>
@@ -300,7 +351,14 @@
     <div>{error}</div>
   {/if}
 
-  <div id={embeddedMapId} class="embedded embedded-map" use:mapAction />
+  <div id={embeddedMapId} class="embedded embedded-map" />
+
+  {#if candidateMarkerPosition}
+    <div class="button-container">
+      <Button secondary quiet on:click={clearCandidateMarker}>Cancel</Button>
+      <Button cta on:click={createMarker}>Create marker</Button>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -318,6 +376,9 @@
   .embedded-map :global(.embedded-map-marker) {
     color: #ee3b35;
   }
+  .embedded-map :global(.embedded-map-marker--candidate) {
+    color: var(--primaryColor);
+  }
   .embedded-map :global(.embedded-map-control) {
     font-size: 22px;
   }
@@ -325,4 +386,12 @@
     height: 100%;
     width: 100%;
   }
+  .button-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
+  }
 </style>
diff --git a/packages/client/src/stores/confirmation.js b/packages/client/src/stores/confirmation.js
index 497b021b04..bb9a54386f 100644
--- a/packages/client/src/stores/confirmation.js
+++ b/packages/client/src/stores/confirmation.js
@@ -4,30 +4,36 @@ const initialState = {
   showConfirmation: false,
   title: null,
   text: null,
-  callback: null,
+  onConfirm: null,
+  onCancel: null,
 }
 
 const createConfirmationStore = () => {
   const store = writable(initialState)
 
-  const showConfirmation = (title, text, callback) => {
+  const showConfirmation = (title, text, onConfirm, onCancel) => {
     store.set({
       showConfirmation: true,
       title,
       text,
-      callback,
+      onConfirm,
+      onCancel,
     })
   }
   const confirm = async () => {
     const state = get(store)
-    if (!state.showConfirmation || !state.callback) {
+    if (!state.showConfirmation || !state.onConfirm) {
       return
     }
     store.set(initialState)
-    await state.callback()
+    await state.onConfirm()
   }
   const cancel = () => {
+    const state = get(store)
     store.set(initialState)
+    if (state.onCancel) {
+      state.onCancel()
+    }
   }
 
   return {
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index d880455af0..d9d4dced71 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -331,33 +331,36 @@ export const enrichButtonActions = (actions, context) => {
         // If this action is confirmable, show confirmation and await a
         // callback to execute further actions
         if (action.parameters?.confirm) {
-          const defaultText = confirmTextMap[action["##eventHandlerType"]]
-          const confirmText = action.parameters?.confirmText || defaultText
-          confirmationStore.actions.showConfirmation(
-            action["##eventHandlerType"],
-            confirmText,
-            async () => {
-              // When confirmed, execute this action immediately,
-              // then execute the rest of the actions in the chain
-              const result = await callback()
-              if (result !== false) {
-                // Generate a new total context to pass into the next enrichment
-                buttonContext.push(result)
-                const newContext = { ...context, actions: buttonContext }
+          return new Promise(resolve => {
+            const defaultText = confirmTextMap[action["##eventHandlerType"]]
+            const confirmText = action.parameters?.confirmText || defaultText
+            confirmationStore.actions.showConfirmation(
+              action["##eventHandlerType"],
+              confirmText,
+              async () => {
+                // When confirmed, execute this action immediately,
+                // then execute the rest of the actions in the chain
+                const result = await callback()
+                if (result !== false) {
+                  // Generate a new total context to pass into the next enrichment
+                  buttonContext.push(result)
+                  const newContext = { ...context, actions: buttonContext }
 
-                // Enrich and call the next button action
-                const next = enrichButtonActions(
-                  actions.slice(i + 1),
-                  newContext
-                )
-                await next()
+                  // Enrich and call the next button action
+                  const next = enrichButtonActions(
+                    actions.slice(i + 1),
+                    newContext
+                  )
+                  resolve(await next())
+                } else {
+                  resolve(false)
+                }
+              },
+              () => {
+                resolve(false)
               }
-            }
-          )
-
-          // Stop enriching actions when encountering a confirmable action,
-          // as the callback continues the action chain
-          return
+            )
+          })
         }
 
         // For non-confirmable actions, execute the handler immediately

From 4cf9d8612a450e61d0baf26eccb6d354e81b3906 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 16 Mar 2022 14:58:48 +0000
Subject: [PATCH 7/9] Update some settings text to be more consistent

---
 packages/client/manifest.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6c8ed8cbcc..ddea782ef0 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2557,7 +2557,7 @@
       },
       {
         "type": "event",
-        "label": "On marker click",
+        "label": "On Click Marker",
         "key": "onClickMarker",
         "context": [
           {
@@ -2574,7 +2574,7 @@
       },
       {
         "type": "event",
-        "label": "On create marker",
+        "label": "On Create Marker",
         "key": "onCreateMarker",
         "dependsOn": "creationEnabled",
         "context": [

From d03dc54efd78751266f35aac1f59b0094c51b6ed Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 16 Mar 2022 15:03:13 +0000
Subject: [PATCH 8/9] Update default height of map component

---
 .../client/src/components/app/embedded-map/EmbeddedMap.svelte    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index b7eb516aa8..a6803ef5dd 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -364,6 +364,7 @@
 <style>
   .embedded-map-wrapper {
     background-color: #f1f1f1;
+    height: 320px;
   }
   .map-default {
     min-height: 180px;

From eb582e6c808e65acac8ce4f118fc8ec78877be70 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 25 Mar 2022 10:59:45 +0000
Subject: [PATCH 9/9] Fix bug which prevented last marker being removed from
 the map if deleted

---
 .../src/components/app/embedded-map/EmbeddedMap.svelte      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
index a6803ef5dd..7738a0d345 100644
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@@ -231,11 +231,15 @@
     titleKey,
     onClick
   ) => {
-    if (!mapInstance || !validRows?.length) {
+    if (!mapInstance) {
       return
     }
 
     mapMarkerGroup.clearLayers()
+    if (!validRows?.length) {
+      return
+    }
+
     validRows.forEach(row => {
       let markerCoords = [row[latKey], row[lngKey]]
       let marker = L.marker(markerCoords, mapMarkerOptions).addTo(mapInstance)