diff --git a/ts/map/Layer.vue b/ts/map/Layer.vue index 88261847..08b5478d 100644 --- a/ts/map/Layer.vue +++ b/ts/map/Layer.vue @@ -6,8 +6,10 @@ import maplibregl from "maplibre-gl"; import { inject, onMounted, onBeforeUnmount, Ref, useAttrs, watch } from "vue"; +export type MouseEvent = maplibregl.MapLayerMouseEvent; type LayerType = maplibregl.LayerSpecification["type"]; interface Emits { + (e: "click", evt: MouseEvent): void; (e: "mouseenter"): void; (e: "mouseleave"): void; } @@ -24,7 +26,7 @@ const attrs = useAttrs(); const emit = defineEmits(); const props = withDefaults(defineProps(), {}); -type OnCallbackFunc = () => void; +type OnCallbackFunc = (e?: MouseEvent) => void; type RegisterOnFunc = ( eventname: string, layerid: string, @@ -56,6 +58,13 @@ onMounted(() => { if (registerLayer) { registerLayer(props.id, getLayerConfig()); } + if (registerOn) { + registerOn("click", props.id, (e?: MouseEvent) => { + if (e) { + emit("click", e); + } + }); + } if (registerOn) { registerOn("mouseenter", props.id, () => { emit("mouseenter"); diff --git a/ts/view/Dash.vue b/ts/view/Dash.vue index 0deca7b2..0976e447 100644 --- a/ts/view/Dash.vue +++ b/ts/view/Dash.vue @@ -134,7 +134,6 @@
import { onMounted, reactive, ref } from "vue"; import Map from "@/map/Map.vue"; -import Layer from "@/map/Layer.vue"; +import Layer, { MouseEvent } from "@/map/Layer.vue"; import Source from "@/map/Source.vue"; import { boundsDefault, boundsFromAPI } from "@/map/util"; import { formatBigNumber, formatTimeRelative } from "@/format"; @@ -275,8 +277,12 @@ onMounted(async () => { const syncs = await storeSync.fetchAll(); console.log("syncs", syncs); }); -function doClickMap(cell: string) { - router.push("/_/cell/" + cell); +function doClickMap(e: MouseEvent) { + //router.push("/_/cell/" + cell); + if (!e.features || e.features.length == 0) return; + const feature = e.features[0]; + const properties = feature.properties; + console.log("clicked", properties.cell); } function doLayerMouseEnter() { mapCursor.value = "pointer";