add legend on map

webapp/locales/de.json

@@ -8,6 +8,11 @@
     "loadMore": "mehr laden",
     "save": "Speichern"
   },
+  "position": {
+    "my":"Meine Position",
+    "members":"Mitglied",
+    "organizations":"Organisation"
+  },
   "admin": {
     "categories": {
       "categoryName": "Name",

webapp/locales/en.json

@@ -8,6 +8,11 @@
     "loadMore": "load more",
     "save": "Save"
   },
+  "position": {
+    "my":"My position",
+    "members":"Members",
+    "organizations":"Organizations"
+  },
   "admin": {
     "categories": {
       "categoryName": "Name",

webapp/pages/map.vue

@@ -3,8 +3,20 @@
   <div>
     <ds-space margin="small">
       <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
+      <small>
+        <div>
+     
+     <img alt="my position" src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg" width="15"/> 
+     {{ $t('position.my') }}
+     <img alt="members" src="/img/mapbox/marker-icons/mapbox-marker-icon-green.svg" width="15"/> 
+     {{ $t('position.members') }}
+     <img alt="organisations" src="/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg" width="15"/> 
+     {{ $t('position.organizations') }}
+   </div>
+      </small>
     </ds-space>
-    <ds-space margin="large" />
+   
+    <ds-space margin="small" />
     <client-only v-if="!isEmpty($env.MAPBOX_TOKEN)">
       <map-styles-buttons
         v-if="isMobile"