Add mapbox controls

This commit is contained in:
Wolfgang Huß 2023-01-10 11:06:25 +01:00
parent c5b452d831
commit bde5002650
2 changed files with 11 additions and 0 deletions

View File

@ -21,6 +21,7 @@
:max-pitch="60" :max-pitch="60"
@load="onMapLoad" @load="onMapLoad"
> >
<!-- may use MglPopup for the styles -->
<ds-button <ds-button
class="style-button" class="style-button"
v-for="style in styles.available" v-for="style in styles.available"
@ -32,7 +33,11 @@
> >
{{ style.title }} {{ style.title }}
</ds-button> </ds-button>
<!-- Wolle: is MglAttributionControl needed? or what can we use for? -->
<!-- <MglAttributionControl /> -->
<MglScaleControl /> <MglScaleControl />
<MglNavigationControl position="top-right" />
<MglGeolocateControl position="top-right" />
<MglMarker :coordinates="[10.452764, 51.165707]" color="blue" /> <MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
</mgl-map> </mgl-map>
</client-only> </client-only>

View File

@ -6,14 +6,20 @@ import {
MglMap, MglMap,
MglMarker, MglMarker,
MglPopup, MglPopup,
MglAttributionControl,
MglScaleControl, MglScaleControl,
MglNavigationControl,
MglGeolocateControl,
} from 'v-mapbox' } from 'v-mapbox'
// Map // Map
Vue.component('MglMap', MglMap) Vue.component('MglMap', MglMap)
// Controls // Controls
Vue.component('MglAttributionControl', MglAttributionControl)
Vue.component('MglScaleControl', MglScaleControl) Vue.component('MglScaleControl', MglScaleControl)
Vue.component('MglNavigationControl', MglNavigationControl)
Vue.component('MglGeolocateControl', MglGeolocateControl)
// Layers // Layers
Vue.component('MglGeojsonLayer', MglGeojsonLayer) Vue.component('MglGeojsonLayer', MglGeojsonLayer)