frontend: map: add line between points

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/stores/posts.js

@@ -4,6 +4,7 @@ import { formatRelative } from 'date-fns'
 import { fr } from 'date-fns/locale'
 import { marked } from 'marked'
 import { API_BASE_URL } from '@/config.js'
+import { fromLonLat } from 'ol/proj.js'
 
 export const usePostsStore = defineStore('posts', () => {
   const postsApiPath = API_BASE_URL + '/posts'
@@ -21,6 +22,7 @@ export const usePostsStore = defineStore('posts', () => {
           const postDate = new Date(post.date)
           post.formatedDate = formatRelative(postDate, new Date(), { locale: fr })
           post.formatedDescription = marked.parse(post.description)
+          post.projectedCoordinates = fromLonLat([post.location.lon, post.location.lat]);
         }
 
         return posts.value

summer2024-frontend/src/views/MapView.vue

@@ -1,13 +1,20 @@
 <script setup>
 
 import { usePostsStore } from '@/stores/posts.js'
-import { onMounted } from 'vue'
-import { fromLonLat } from 'ol/proj.js'
+import { computed, onMounted } from 'vue'
 import { Camera } from 'lucide-vue-next'
-import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip/index.js'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip/index.js'
 
 const postStore = usePostsStore()
 
+const postsLinesCoordinates = computed(() => {
+  const coords = []
+  for (const post of postStore.posts) {
+    coords.push(post.projectedCoordinates)
+  }
+  return coords
+})
+
 onMounted(() => {
   postStore.fetchPosts()
 })
@@ -34,7 +41,7 @@ onMounted(() => {
 
       <ol-overlay
         v-for="post in postStore.posts" :key="post.id"
-        :position="fromLonLat([post.location.lon, post.location.lat])"
+        :position="post.projectedCoordinates"
         :autoPan="true"
       >
         <TooltipProvider>
@@ -54,18 +61,18 @@ onMounted(() => {
         </TooltipProvider>
       </ol-overlay>
 
-      <ol-vector-layer>
+      <ol-vector-layer v-if="postStore.posts.length > 1">
         <ol-source-vector>
-          <ol-feature v-for="post in postStore.posts" :key="post.id">
-            <ol-geom-point :coordinates="fromLonLat([post.location.lon, post.location.lat])"></ol-geom-point>
+          <ol-feature ref="profileFeatureRef">
+            <ol-geom-line-string
+              :coordinates="postsLinesCoordinates"
+            ></ol-geom-line-string>
             <ol-style>
-              <ol-style-circle :radius="5">
-                <ol-style-fill color="black"></ol-style-fill>
-                <ol-style-stroke
-                  color="black"
-                  :width="2"
-                ></ol-style-stroke>
-              </ol-style-circle>
+              <ol-style-stroke
+                color="white"
+                width="5"
+                :lineDash="[15, 15]"
+              ></ol-style-stroke>
             </ol-style>
           </ol-feature>
         </ol-source-vector>