115 lines
3.2 KiB
Vue
115 lines
3.2 KiB
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"
|
|
/>
|
|
<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 { FeatureCollection, MultiLineString, Point } from "geojson";
|
|
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 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 linesData = computed<FeatureCollection<MultiLineString>>(() => {
|
|
return {
|
|
type: "FeatureCollection",
|
|
features: transport_lines.value.filter(
|
|
(f) => f.properties?.id == selectedRoute.value.replace(":", "_"),
|
|
),
|
|
};
|
|
});
|
|
|
|
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;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="css">
|
|
#lineSelector {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
background: white;
|
|
}
|
|
|
|
.lineLabel.selected {
|
|
color: red;
|
|
}
|
|
</style>
|