feat: plan trip

app/components/map/map.client.vue

@@ -10,6 +10,23 @@
                     :clusters="shownClusters"
                     :route="r.route"
             /></template>
+
+            <mgl-geo-json-source
+                :source-id="`trip_leg_${index}`"
+                :data="line"
+                v-for="(line, index) in store.selectedTrips"
+            >
+                <mgl-line-layer
+                    :layer-id="`trip_line_leg_${index}`"
+                    :paint="{
+                        'line-width': 4,
+                        'line-color':
+                            '#' +
+                            (store.routesById[line.properties?.routeId]
+                                ?.color || '000000'),
+                    }"
+                />
+            </mgl-geo-json-source>
         </MglMap>
     </ClientOnly>
 </template>
@@ -22,18 +39,38 @@ import type {
     Point,
 } from "geojson";
 
+const paint = {
+    "line-color": "#FF0000",
+    "line-width": 4,
+};
+
 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 style =
+//     "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json";
 const center = new LngLat(5.735, 45.185);
 const zoom = 12;
 
+const emit = defineEmits<{
+    loaded: [];
+}>();
+
 const store = useMresoStore();
 await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
 const image = useSvgImage();
 const map = useMap("main");
 
+watchEffect(() => {
+    console.log(store.selectedTrip);
+});
+
+watch(map, () => {
+    if (map.isLoaded) {
+        emit("loaded");
+    }
+});
 watchEffect(async () => {
     const allClusters = [];
     for (const routeId of store.selectedRouteIds) {
@@ -102,3 +139,15 @@ const shownLines = computed(() => {
     return l;
 });
 </script>
+
+<style scoped lang="css">
+.maplibregl-map {
+    grid-area: "map";
+}
+</style>
+
+<style lang="css">
+.maplibregl-map {
+    grid-area: map;
+}
+</style>