71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<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(
|
|
`Cluster code : ${feature.properties.code}<br/>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>
|