From 45429d26d9b4dd868cd05c85a201064916245ab4 Mon Sep 17 00:00:00 2001
From: Nicolas Froger <nicolas@kektus.xyz>
Date: Sat, 27 Jul 2024 16:49:04 +0200
Subject: [PATCH] frontend: map: use explicit import

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
---
 summer2024-frontend/src/main.js           |  4 --
 summer2024-frontend/src/views/MapView.vue | 57 ++++++++++++++---------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/summer2024-frontend/src/main.js b/summer2024-frontend/src/main.js
index e6baf03..2d53601 100644
--- a/summer2024-frontend/src/main.js
+++ b/summer2024-frontend/src/main.js
@@ -7,13 +7,9 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
-import 'vue3-openlayers/styles.css'
-import OpenLayersMap from 'vue3-openlayers'
-
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(OpenLayersMap)
 
 app.mount('#app')
diff --git a/summer2024-frontend/src/views/MapView.vue b/summer2024-frontend/src/views/MapView.vue
index 44d0e58..88d18ae 100644
--- a/summer2024-frontend/src/views/MapView.vue
+++ b/summer2024-frontend/src/views/MapView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { Map, Layers, Sources, MapControls, Geometries, Styles } from 'vue3-openlayers'
 import { usePostsStore } from '@/stores/posts.js'
 import { computed, onMounted, ref } from 'vue'
 import { Camera, Goal, MapPin } from 'lucide-vue-next'
@@ -43,15 +44,19 @@ const goalLocations = ref([
 
 <template>
   <div class="fixed h-full w-full">
-    <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" class="h-full w-full">
-      <ol-view ref="view" :zoom="3.6" :center="[652293.6169027708, 6425265.202945196]" />
+    <Map.OlMap
+      :loadTilesWhileAnimating="true"
+      :loadTilesWhileInteracting="true"
+      class="h-full w-full"
+    >
+      <Map.OlView ref="view" :zoom="3.6" :center="[652293.6169027708, 6425265.202945196]" />
 
-      <ol-tile-layer>
-        <ol-source-osm />
-      </ol-tile-layer>
-      <ol-scaleline-control />
+      <Layers.OlTileLayer>
+        <Sources.OlSourceOsm />
+      </Layers.OlTileLayer>
+      <MapControls.OlScalelineControl />
 
-      <ol-overlay
+      <Map.OlOverlay
         v-for="post in postStore.posts"
         :key="post.id"
         :position="post.projectedCoordinates"
@@ -73,8 +78,8 @@ const goalLocations = ref([
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-      </ol-overlay>
-      <ol-overlay
+      </Map.OlOverlay>
+      <Map.OlOverlay
         v-if="locationStore.lastLocation != null"
         :position="locationStore.lastLocation.projectedCoordinates"
         :autoPan="true"
@@ -93,9 +98,9 @@ const goalLocations = ref([
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-      </ol-overlay>
+      </Map.OlOverlay>
 
-      <ol-overlay
+      <Map.OlOverlay
         v-for="loc in goalLocations"
         :key="loc.name"
         :position="loc.coords"
@@ -115,19 +120,25 @@ const goalLocations = ref([
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-      </ol-overlay>
+      </Map.OlOverlay>
 
-      <ol-vector-layer v-if="postsLinesCoordinates.length > 1">
-        <ol-source-vector>
-          <ol-feature ref="profileFeatureRef">
-            <ol-geom-line-string :coordinates="postsLinesCoordinates"></ol-geom-line-string>
-            <ol-style>
-              <ol-style-stroke color="white" width="5" :lineDash="[15, 15]"></ol-style-stroke>
-            </ol-style>
-          </ol-feature>
-        </ol-source-vector>
-      </ol-vector-layer>
-    </ol-map>
+      <Layers.OlVectorLayer v-if="postsLinesCoordinates.length > 1">
+        <Sources.OlSourceVector>
+          <Map.OlFeature ref="profileFeatureRef">
+            <Geometries.OlGeomLineString
+              :coordinates="postsLinesCoordinates"
+            ></Geometries.OlGeomLineString>
+            <Styles.OlStyle>
+              <Styles.OlStyleStroke
+                color="white"
+                width="5"
+                :lineDash="[15, 15]"
+              ></Styles.OlStyleStroke>
+            </Styles.OlStyle>
+          </Map.OlFeature>
+        </Sources.OlSourceVector>
+      </Layers.OlVectorLayer>
+    </Map.OlMap>
   </div>
 </template>