chfore: split map into components

2026-07-05 11:27:59 +02:00
parent df977558fa
commit 6fa15f2ef3
5 changed files with 289 additions and 165 deletions
@@ -0,0 +1,68 @@
+<template>
+    <ClientOnly>
+        <mgl-geo-json-source
+            v-if="clusters"
+            source-id="clusters"
+            :data="clusters"
+        >
+            <mgl-circle-layer
+                layer-id="clusters_dots"
+                :paint="cluster_paint"
+                @click="clusterClick"
+                @mouseenter="clusterEnter"
+                @mouseleave="clusterLeave"
+            />
+            <MglSymbolLayer
+                layer-id="clusters_labels"
+                :layout="cluster_label"
+            />
+        </mgl-geo-json-source>
+    </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { FeatureCollection, Point } from "geojson";
+import { useMap } from "@indoorequal/vue-maplibre-gl";
+import { Popup } from "maplibre-gl";
+const cluster_paint = {
+    "circle-radius": 5,
+    "circle-color": "#FF0000",
+};
+const cluster_label = {
+    "text-field": ["get", "id"],
+};
+const map = useMap();
+
+const { clusters } = defineProps<{
+    clusters: FeatureCollection<Point>;
+}>();
+
+async function clusterClick(e: FeatureCollection) {
+    const feature = e.features[0];
+    if (!feature || !feature.properties) {
+        return;
+    }
+    const code = feature.properties.code;
+    if (!code) {
+        return;
+    }
+    const coordinates = feature.geometry.coordinates.slice();
+    const data = await $fetch<FeatureCollection<Point>>(
+        `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
+    );
+    if (!map.map) {
+        return;
+    }
+    new Popup()
+        .setLngLat(coordinates)
+        .setHTML(`This cluster contains ${data.features.length} stops`)
+        .addTo(map.map);
+}
+
+function clusterEnter() {
+    map.map!.getCanvas().style.cursor = "pointer";
+}
+function clusterLeave() {
+    map.map!.getCanvas().style.cursor = "";
+}
+</script>