This commit is contained in:
Ulf Gebhardt 2023-01-04 13:34:59 +01:00
parent be41815b1a
commit 9a3f88ca80
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
3 changed files with 40 additions and 41 deletions

View File

@ -126,7 +126,7 @@ export default {
{ src: '~/plugins/vue-filters.js' }, { src: '~/plugins/vue-filters.js' },
{ src: '~/plugins/vue-infinite-loading.js', ssr: false }, { src: '~/plugins/vue-infinite-loading.js', ssr: false },
{ src: '~/plugins/vue-observe-visibility.js', ssr: false }, { src: '~/plugins/vue-observe-visibility.js', ssr: false },
{ src: '~/plugins/v-mapbox.js', mode: "client" }, { src: '~/plugins/v-mapbox.js', mode: 'client' },
], ],
router: { router: {
@ -158,7 +158,7 @@ export default {
buildModules: [ buildModules: [
// https://composition-api.nuxtjs.org/getting-started/setup#quick-start // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
"@nuxtjs/composition-api/module" '@nuxtjs/composition-api/module',
], ],
/* /*

View File

@ -33,16 +33,16 @@
</client-only> </client-only>
</template> </template>
<script> <script>
import mapboxgl from "mapbox-gl"; import mapboxgl from 'mapbox-gl'
export default { export default {
name: "Map", name: 'Map',
data() { data() {
return { return {
mapboxgl, mapboxgl,
mapOptions: { mapOptions: {
accessToken: accessToken:
"pk.eyJ1IjoiYnVzZmFrdG9yIiwiYSI6ImNraDNiM3JxcDBhaWQydG1uczhpZWtpOW4ifQ.7TNRTO-o9aK1Y6MyW_Nd4g", // ocelot-token 'pk.eyJ1IjoiYnVzZmFrdG9yIiwiYSI6ImNraDNiM3JxcDBhaWQydG1uczhpZWtpOW4ifQ.7TNRTO-o9aK1Y6MyW_Nd4g', // ocelot-token
style: "mapbox://styles/mapbox/outdoors-v12?optimize=true", style: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
center: [10.452764, 51.165707], // center of Germany center: [10.452764, 51.165707], // center of Germany
zoom: 4, zoom: 4,
maxZoom: 22, maxZoom: 22,
@ -51,35 +51,35 @@ export default {
// https://docs.mapbox.com/api/maps/styles/ // https://docs.mapbox.com/api/maps/styles/
available: [ available: [
{ {
title: "Outdoors", title: 'Outdoors',
url: "mapbox://styles/mapbox/outdoors-v12?optimize=true", url: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
}, },
{ {
title: "Streets", title: 'Streets',
url: "mapbox://styles/mapbox/streets-v11?optimize=true", url: 'mapbox://styles/mapbox/streets-v11?optimize=true',
}, },
{ {
title: "Satellite", title: 'Satellite',
url: "mapbox://styles/mapbox/satellite-streets-v11?optimize=true", url: 'mapbox://styles/mapbox/satellite-streets-v11?optimize=true',
}, },
{ {
title: "Dark", title: 'Dark',
url: "mapbox://styles/mapbox/dark-v10?optimize=true", url: 'mapbox://styles/mapbox/dark-v10?optimize=true',
}, },
], ],
}, },
}; }
}, },
methods: { methods: {
onMapLoad({ map }) { onMapLoad({ map }) {
this.map = map; this.map = map
}, },
setStyle(url) { setStyle(url) {
this.map.setStyle(url) this.map.setStyle(url)
this.mapOptions.style = url this.mapOptions.style = url
}, },
}, },
}; }
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -1,25 +1,24 @@
// Vue2 + Mapbox Reference: https://github.com/geospoc/v-mapbox/issues/702 // Vue2 + Mapbox Reference: https://github.com/geospoc/v-mapbox/issues/702
import Vue from "vue"; import Vue from 'vue'
import { import {
MglGeojsonLayer, MglGeojsonLayer,
MglVectorLayer, MglVectorLayer,
MglMap, MglMap,
MglMarker, MglMarker,
MglPopup, MglPopup,
MglScaleControl, MglScaleControl,
} from "v-mapbox"; } from 'v-mapbox'
// Map // Map
Vue.component("MglMap", MglMap); Vue.component('MglMap', MglMap)
// Controls // Controls
Vue.component("MglScaleControl", MglScaleControl); Vue.component('MglScaleControl', MglScaleControl)
// Layers // Layers
Vue.component("MglGeojsonLayer", MglGeojsonLayer); Vue.component('MglGeojsonLayer', MglGeojsonLayer)
Vue.component("MglVectorLayer", MglVectorLayer); Vue.component('MglVectorLayer', MglVectorLayer)
// Marker & Popup
Vue.component("MglMarker", MglMarker);
Vue.component("MglPopup", MglPopup);
// Marker & Popup
Vue.component('MglMarker', MglMarker)
Vue.component('MglPopup', MglPopup)