From bde50026509b49bad96b20b48a7150286f16cf5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 10 Jan 2023 11:06:25 +0100
Subject: [PATCH] Add mapbox controls

---
 webapp/pages/map.vue       | 5 +++++
 webapp/plugins/v-mapbox.js | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/webapp/pages/map.vue b/webapp/pages/map.vue
index fe9acce44..47acaa21d 100644
--- a/webapp/pages/map.vue
+++ b/webapp/pages/map.vue
@@ -21,6 +21,7 @@
         :max-pitch="60"
         @load="onMapLoad"
       >
+        <!-- may use MglPopup for the styles -->
         <ds-button
           class="style-button"
           v-for="style in styles.available"
@@ -32,7 +33,11 @@
         >
           {{ style.title }}
         </ds-button>
+        <!-- Wolle: is MglAttributionControl needed? or what can we use for? -->
+        <!-- <MglAttributionControl /> -->
         <MglScaleControl />
+        <MglNavigationControl position="top-right" />
+        <MglGeolocateControl position="top-right" />
         <MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
       </mgl-map>
     </client-only>
diff --git a/webapp/plugins/v-mapbox.js b/webapp/plugins/v-mapbox.js
index 657b7b6d6..ebbfef3db 100644
--- a/webapp/plugins/v-mapbox.js
+++ b/webapp/plugins/v-mapbox.js
@@ -6,14 +6,20 @@ import {
   MglMap,
   MglMarker,
   MglPopup,
+  MglAttributionControl,
   MglScaleControl,
+  MglNavigationControl,
+  MglGeolocateControl,
 } from 'v-mapbox'
 
 // Map
 Vue.component('MglMap', MglMap)
 
 // Controls
+Vue.component('MglAttributionControl', MglAttributionControl)
 Vue.component('MglScaleControl', MglScaleControl)
+Vue.component('MglNavigationControl', MglNavigationControl)
+Vue.component('MglGeolocateControl', MglGeolocateControl)
 
 // Layers
 Vue.component('MglGeojsonLayer', MglGeojsonLayer)