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

View File

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