better-mreso/app/components/map.client.vue

<template>
    <ClientOnly>
        <MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
            <MglNavigationControl />
            <mgl-geo-json-source
                v-if="clustersData.features"
                source-id="clusters"
                :data="clustersData"
            >
                <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>

            <mgl-geo-json-source
                v-if="linesData.features"
                source-id="lines"
                :data="linesData"
            >
                <mgl-line-layer layer-id="lines_drawn" />
            </mgl-geo-json-source>
        </MglMap>
    </ClientOnly>

    <div v-if="routesRequest.data.value" id="lineSelector">
        <div
            v-for="route of routesRequest.data.value"
            :key="route.id"
            :class="{
                selected: selectedRoute === route.id,
                lineLabel: true,
            }"
            @click="selectRoute(route.id)"
        >
            {{ route.type }} : {{ route.shortName }}
        </div>
    </div>
</template>

<script setup lang="ts">
import type {
    Feature,
    FeatureCollection,
    MultiLineString,
    Point,
} from "geojson";
import { useMap } from "@indoorequal/vue-maplibre-gl";
import { LngLat, LngLatBounds, Popup } from "maplibre-gl";
const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
const center = [5.735, 45.185];
const zoom = 12;
const cluster_paint = {
    "circle-radius": 5,
    "circle-color": "#FF0000",
};
const cluster_label = {
    "text-field": ["get", "id"],
};
const map = useMap();

const selectedRoute = ref<string>("");
const selectedStops = ref<string[]>([]);

const clustersRequest =
    await useFetch<FeatureCollection<Point>>("/clusters.json");
const clusters = computed(() => clustersRequest.data.value?.features ?? []);
const clustersData = computed<FeatureCollection<Point>>(() => {
    return {
        type: "FeatureCollection",
        features: clusters.value.filter((f) =>
            selectedStops.value.includes(f.properties?.id),
        ),
    };
});

const linesRequest =
    await useFetch<FeatureCollection<MultiLineString>>("/lignes.json");
const transport_lines = computed(() => linesRequest.data.value?.features ?? []);
const selectedLine = computed(() =>
    transport_lines.value.find(
        (f) => f.properties?.id == selectedRoute.value.replace(":", "_"),
    ),
);
const linesData = computed<FeatureCollection<MultiLineString>>(() => {
    return {
        type: "FeatureCollection",
        features: !selectedLine.value ? [] : [selectedLine.value],
    };
});

const routesRequest = await useFetch("/routes.json");
console.log(routesRequest.data.value);
async function selectRoute(lineId: string) {
    selectedRoute.value = lineId;
    const data = await $fetch<object[]>(
        `https://data.mobilites-m.fr/api/routers/default/index/routes/${selectedRoute.value.replace("_", ":")}/clusters`,
    );
    const stops = [];
    for (const stop of data) {
        stops.push(stop.id);
    }

    selectedStops.value = stops;
    console.log(data[0]);
    const bounds = data.reduce(
        (bounds, point) => {
            return bounds.extend(new LngLat(point.lon, point.lat));
        },
        new LngLatBounds([data[0].lon, data[0].lat, data[0].lon, data[0].lat]),
    );

    map.map.fitBounds(bounds, {
        padding: 20,
    });
}

async function clusterClick(e) {
    const feature: Feature = e.features[0];
    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>

<style scoped lang="css">
#lineSelector {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    overflow: auto;
    background: white;
}

.lineLabel.selected {
    color: red;
}
</style>