Browse Source

Add map action for map click

master
Andrew Kingston 5 years ago
parent
commit
9e96090333
  1. 15
      packages/client/manifest.json
  2. 30
      packages/client/src/components/app/embedded-map/EmbeddedMap.svelte

15
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",

30
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,
})
})
}

Loading…
Cancel
Save