nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: map: use explicit import

Browse source 
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-27 16:49:04 +02:00
commit 45429d26d9
No known key found for this signature in database
2 changed files with 34 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
summer2024-frontend/src/main.js
View file

@ -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')

57
summer2024-frontend/src/views/MapView.vue
View file

@ -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>