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 App from './App.vue'
import router from './router' import router from './router'
import 'vue3-openlayers/styles.css'
import OpenLayersMap from 'vue3-openlayers'
const app = createApp(App) const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
app.use(OpenLayersMap)
app.mount('#app') app.mount('#app')

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

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