From e61e82d72bce159554edb48c432154c3eb5e731d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 10 Jan 2023 10:18:11 +0100
Subject: [PATCH] Add location marker and for this fix or use 'mapbox-gl' and
 'v-mpbox' CSS

---
 webapp/pages/map.vue | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/webapp/pages/map.vue b/webapp/pages/map.vue
index 08fe8d097..ef5d6f786 100644
--- a/webapp/pages/map.vue
+++ b/webapp/pages/map.vue
@@ -16,9 +16,11 @@
       :max-pitch="60"
       @load="onMapLoad"
     >
+      <!-- <MglScaleControl /> -->
       <!-- TODO: Move into mapboxgl-control-container -->
       <div class="map-controls">
         <ds-button
+          class="style-button"
           v-for="style in styles.available"
           :key="style.title"
           filled
@@ -28,6 +30,7 @@
         >
           {{ style.title }}
         </ds-button>
+        <MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
       </div>
     </mgl-map>
   </client-only>
@@ -76,7 +79,7 @@ export default {
       return {
         accessToken: this.$env.MAPBOX_TOKEN,
         style: !this.activeStyle ? this.availableStyles.outdoors.url : this.activeStyle,
-        center: [10.452764, 51.165707], // center of Germany
+        center: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE
         zoom: 4,
         maxZoom: 22,
       }
@@ -95,21 +98,32 @@ export default {
 </script>
 
 <style lang="scss">
-.mapboxgl-canvas {
+// description: https: //github.com/geospoc/v-mapbox/tree/v1.11.2/docs
+//   code example: https: //codesandbox.io/embed/v-mapbox-map-demo-k1l1n?autoresize=1&fontsize=14&hidenavigation=1&theme=dark
+// @import "~mapbox-gl/dist/mapbox-gl.css";
+// @import "~v-mapbox/dist/v-mapbox.css";
+@import "mapbox-gl/dist/mapbox-gl.css";
+@import "v-mapbox/dist/v-mapbox.css";
+
+.mgl-map-wrapper {
   height: 70vh;
 }
-.map-controls {
-  position: absolute;
-  top: 100px;
-  padding-left: 3px;
-}
-.map-controls button {
+.style-button {
   margin-left: 5px;
+  margin-top: 5px;
 }
-.mapboxgl-control-container {
-  margin-top: -45px;
-}
-.mapboxgl-control-container a {
-  color: black;
-}
+// .map-controls {
+//   position: absolute;
+//   top: 100px;
+//   padding-left: 3px;
+// }
+// .map-controls button {
+//   margin-left: 5px;
+// }
+// .mapboxgl-control-container {
+//   margin-top: -45px;
+// }
+// .mapboxgl-control-container a {
+//   color: black;
+// }
 </style>