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