chfore: split map into components
This commit is contained in:
@@ -1,165 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<mgl-geo-json-source source-id="lines" :data="routeWithLine.line">
|
||||||
|
<mgl-line-layer layer-id="line" :paint="paint" :layout="layout" />
|
||||||
|
</mgl-geo-json-source>
|
||||||
|
<mgl-geo-json-source source-id="lines_border" :data="routeWithLine.line">
|
||||||
|
<mgl-line-layer
|
||||||
|
layer-id="line_border"
|
||||||
|
:paint="offset_paint"
|
||||||
|
:layout="layout"
|
||||||
|
/>
|
||||||
|
</mgl-geo-json-source>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Feature, MultiLineString } from "geojson";
|
||||||
|
|
||||||
|
const { routeWithLine } = defineProps<{
|
||||||
|
routeWithLine: { route: Route; line: Feature<MultiLineString> };
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const paint = computed(() => ({
|
||||||
|
"line-color": "#" + routeWithLine.route.color,
|
||||||
|
"line-width": 4,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const layout = {
|
||||||
|
"line-join": "round",
|
||||||
|
"line-cap": "round",
|
||||||
|
};
|
||||||
|
|
||||||
|
const offset_paint = computed(() => ({
|
||||||
|
"line-color": "#000000",
|
||||||
|
"line-width": 2,
|
||||||
|
"line-gap-width": 2,
|
||||||
|
}));
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<ClientOnly>
|
||||||
|
<MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
|
||||||
|
<MglNavigationControl />
|
||||||
|
<MapLines
|
||||||
|
v-for="r of routeWithLines"
|
||||||
|
:key="r.route.id"
|
||||||
|
:route-with-line="r"
|
||||||
|
/>
|
||||||
|
<MapClusters
|
||||||
|
v-if="clustersData.features"
|
||||||
|
:clusters="clustersData"
|
||||||
|
/>
|
||||||
|
</MglMap>
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
|
<div v-if="routesRequest.data.value" id="lineSelector">
|
||||||
|
<div
|
||||||
|
v-for="route of routesRequest.data.value"
|
||||||
|
:key="route.id"
|
||||||
|
:class="{
|
||||||
|
selected: selectedRoutes.includes(route.id),
|
||||||
|
lineLabel: true,
|
||||||
|
}"
|
||||||
|
:style="{
|
||||||
|
background: '#' + route.color,
|
||||||
|
color: '#' + route.textColor,
|
||||||
|
}"
|
||||||
|
@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 } from "maplibre-gl";
|
||||||
|
const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
|
||||||
|
const center = new LngLat(5.735, 45.185);
|
||||||
|
const zoom = 12;
|
||||||
|
|
||||||
|
const map = useMap();
|
||||||
|
|
||||||
|
const selectedRoutes = 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 routesRequest = await useFetch<Route[]>("/routes.json");
|
||||||
|
|
||||||
|
// Selected routes with lines
|
||||||
|
const routeWithLines = computed(() => {
|
||||||
|
const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
|
||||||
|
for (const routeId of selectedRoutes.value) {
|
||||||
|
const route = routesRequest.data.value?.find((r) => r.id == routeId);
|
||||||
|
if (!route) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const line = transport_lines.value.find(
|
||||||
|
(f) => routeId == f.properties?.id.replace("_", ":"),
|
||||||
|
);
|
||||||
|
if (!line) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
shownLines.push({
|
||||||
|
route,
|
||||||
|
line,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return shownLines;
|
||||||
|
});
|
||||||
|
|
||||||
|
async function selectRoute(routeId: string) {
|
||||||
|
if (!map.map) {
|
||||||
|
console.error("Map is not yet initialized ! aborting");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
selectedRoutes.value = [routeId];
|
||||||
|
const stops: string[] = [];
|
||||||
|
for (const route of selectedRoutes.value) {
|
||||||
|
const data = await $fetch<Cluster[]>(
|
||||||
|
`https://data.mobilites-m.fr/api/routers/default/index/routes/${route.replace("_", ":")}/clusters`,
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const stop of data) {
|
||||||
|
stops.push(stop.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedStops.value = stops;
|
||||||
|
|
||||||
|
const points = clusters.value.filter((c) =>
|
||||||
|
stops.includes(c.properties?.id),
|
||||||
|
);
|
||||||
|
const firstPoint = points[0];
|
||||||
|
if (!firstPoint) {
|
||||||
|
console.error("Data does not contains any points. Aborting");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const bounds = clusters.value
|
||||||
|
.filter((c) => stops.includes(c.properties?.id))
|
||||||
|
.reduce(
|
||||||
|
(bounds, point) => {
|
||||||
|
return bounds.extend(
|
||||||
|
new LngLat(
|
||||||
|
point.geometry.coordinates[0]!,
|
||||||
|
point.geometry.coordinates[1]!,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
new LngLatBounds([
|
||||||
|
firstPoint.geometry.coordinates[0]!,
|
||||||
|
firstPoint.geometry.coordinates[1]!,
|
||||||
|
firstPoint.geometry.coordinates[0]!,
|
||||||
|
firstPoint.geometry.coordinates[1]!,
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
|
||||||
|
map.map.fitBounds(bounds, {
|
||||||
|
padding: 20,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
#lineSelector {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineLabel {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.lineLabel.selected {
|
||||||
|
color: red !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Vendored
+23
@@ -0,0 +1,23 @@
|
|||||||
|
interface Route {
|
||||||
|
id: string;
|
||||||
|
gtfsId: string;
|
||||||
|
shortName: string;
|
||||||
|
longName: string;
|
||||||
|
color: string;
|
||||||
|
textColor: string;
|
||||||
|
mode: string;
|
||||||
|
type: string;
|
||||||
|
timeSheet: string;
|
||||||
|
pdfTimeSheet: boolean;
|
||||||
|
pdfMap: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Cluster {
|
||||||
|
city: string;
|
||||||
|
code: string;
|
||||||
|
id: string;
|
||||||
|
lat: number;
|
||||||
|
lon: number;
|
||||||
|
name: string;
|
||||||
|
visible: boolean;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user