Refactoring marker-layer & popup

Author: frodrigo

web/src/pages/map/index.vue

@@ -38,14 +38,17 @@
         </side-pannel>
         <l-map
           :item-state="itemState"
-          :issue-uuid="issueUuid"
           :map-state="mapState"
-          :remote-url-read="remote_url_read"
           @set-map="setMap($event)"
-          @set-marker-layer="markerLayer = $event"
-          @update-issue-uuid="issueUuid = $event"
           class="map"
         />
+        <MarkerLayer v-if="map" ref="markerLayer" :map="map" />
+        <OsmObject
+          v-if="map"
+          ref="osmObject"
+          :map="map"
+          :remote-url-read="remote_url_read"
+        />
         <side-pannel
           ref="doc"
           :map="map"
@@ -70,21 +73,28 @@
             :main_website="main_website"
             :user="user"
             :issue="editor"
-            @issue-done="markerLayer.corrected()"
-            @close="$refs.editor.hide()"
+            @issue-done="$refs.popup.corrected()"
           />
         </side-pannel>
       </div>
       <iframe id="hiddenIframe" name="hiddenIframe"></iframe>
       <popup
+        ref="popup"
+        v-if="map"
+        :map="map"
+        :initial-uuid="issueUuid"
         :main_website="main_website"
         :remote_url_read="remote_url_read"
-        :marker-layer="markerLayer"
+        @update-issue-uuid="issueUuid = $event"
+        @q="$refs.osmObject.select($event)"
+        @remove-marker="$refs.markerLayer.remove($event)"
         @fix-edit="
           $refs.doc.hide()
           $refs.editor.show()
           editor = [$event.uuid, $event.fix]
         "
+        @show-doc="showDoc"
+        @load-doc="loadDoc"
       />
     </div>
   </div>
@@ -99,10 +109,11 @@ import ItemsFilters from './items-filters.vue'
 import ItemsList from './items-list.vue'
 import Items from './items.vue'
 import LMap from './map.vue'
+import MarkerLayer from './marker-layer.vue'
+import OsmObject from './osm-object.vue'
 import Popup from './popup.vue'
 import SidePannel from './side-pannel.vue'
 import Top from './top.vue'
-import ExternalVueAppEvent from '../../ExternalVueAppEvent'
 import { ItemState, LanguagesName, Category } from '../../types'
 import VueParent from '../Parent.vue'
 
@@ -125,7 +136,6 @@ export default VueParent.extend({
     main_website: string
     remote_url_read: string
     map: Map
-    markerLayer: Object
     item_levels: {}
     itemState: ItemState
     issueUuid: string
@@ -145,7 +155,6 @@ export default VueParent.extend({
       main_website: '',
       remote_url_read: '',
       map: null,
-      markerLayer: null,
       item_levels: {},
       itemState: {
         item: 'xxxx',
@@ -180,6 +189,8 @@ export default VueParent.extend({
     Doc,
     Editor,
     Popup,
+    MarkerLayer,
+    OsmObject,
   },
 
   created(): void {
@@ -192,14 +203,6 @@ export default VueParent.extend({
 
   mounted(): void {
     this.setData()
-
-    ExternalVueAppEvent.$on('show-doc', (e) => {
-      this.$refs.doc?.show()
-      this.doc = [e.item, e.classs]
-    })
-    ExternalVueAppEvent.$on('load-doc', (e) => {
-      this.doc = [e.item, e.classs]
-    })
   },
 
   watch: {
@@ -371,6 +374,15 @@ export default VueParent.extend({
         })
       })
     },
+
+    showDoc(e) {
+      this.$refs.doc?.show()
+      this.doc = [e.item, e.classs]
+    },
+
+    loadDoc(e) {
+      this.doc = [e.item, e.classs]
+    },
   },
 })
 </script>

web/src/pages/map/map.vue

@@ -1,14 +1,5 @@
 <template>
-  <div id="map">
-    <OsmoseMarker
-      v-if="map"
-      ref="osmoseMarker"
-      :map="map"
-      :initial-uuid="issueUuid"
-      :remote-url-read="remoteUrlRead"
-      @update-issue-uuid="$emit('update-issue-uuid', $event)"
-    />
-  </div>
+  <div id="map"></div>
 </template>
 
 <script lang="ts">
@@ -23,7 +14,6 @@ import {
 } from 'maplibre-gl'
 import Vue from 'vue'
 
-import OsmoseMarker from './osmose-marker.vue'
 import ControlLayers from '../../../static/map/ControlLayers'
 import { mapBases, mapOverlay, glStyle } from '../../../static/map/layers'
 
@@ -37,18 +27,10 @@ export default Vue.extend({
       type: Object,
       required: true,
     },
-    issueUuid: {
-      type: String,
-      default: undefined,
-    },
     mapState: {
       type: Object,
       required: true,
     },
-    remoteUrlRead: {
-      type: String,
-      required: true,
-    },
   },
 
   data(): {
@@ -59,10 +41,6 @@ export default Vue.extend({
     }
   },
 
-  components: {
-    OsmoseMarker,
-  },
-
   watch: {
     itemState: {
       deep: true,
@@ -150,7 +128,6 @@ export default Vue.extend({
     map.addControl(new ControlLayers(mapBases, mapOverlay), 'top-right')
 
     map.on('load', () => {
-      this.$emit('set-marker-layer', this.$refs.osmoseMarker)
       this.updateLayer()
     })
 

web/src/pages/map/marker-layer.vue

@@ -0,0 +1,36 @@
+<template></template>
+
+<script lang="ts">
+import { Map } from 'maplibre-gl'
+import Vue, { PropType } from 'vue'
+
+export default Vue.extend({
+  props: {
+    map: {
+      type: Object as PropType<Map>,
+      required: true,
+    },
+  },
+
+  mounted(): void {
+    this.map.on('load', () => {
+      this.map.on('mouseenter', 'markers', () => {
+        this.map.getCanvas().style.cursor = 'pointer'
+      })
+
+      this.map.on('mouseleave', 'markers', () => {
+        this.map.getCanvas().style.cursor = ''
+      })
+    })
+  },
+
+  methods: {
+    remove(featureId): void {
+      this.map.setFeatureState(
+        { source: 'markers', sourceLayer: 'issues', id: featureId },
+        { hidden: true }
+      )
+    },
+  },
+})
+</script>

web/src/pages/map/osm-object.vue

@@ -0,0 +1,57 @@
+<template></template>
+
+<script lang="ts">
+import { Map } from 'maplibre-gl'
+import Vue, { PropType } from 'vue'
+
+import osm2geojson from '../../../static/map/osm2geojson'
+
+export default Vue.extend({
+  props: {
+    map: {
+      type: Object as PropType<Map>,
+      required: true,
+    },
+    remoteUrlRead: {
+      type: String,
+      required: true,
+    },
+  },
+
+  methods: {
+    async select(data) {
+      data.elems_id = data.elems.map((elem) => elem.type + elem.id).join(',')
+
+      // Get the OSM objects
+      if (data.elems_id) {
+        this.clear()
+        const features = await Promise.all(
+          data.elems.map((elem) =>
+            fetch(
+              elem.type === 'node'
+                ? `${this.remoteUrlRead}api/0.6/node/${elem.id}`
+                : `${this.remoteUrlRead}api/0.6/${elem.type}/${elem.id}/full`
+            )
+              .then((response) => response.text())
+              .then((str) =>
+                new window.DOMParser().parseFromString(str, 'text/xml')
+              )
+              .then((xml) => osm2geojson(xml).features)
+          )
+        )
+        this.map.getSource('osm').setData({
+          type: 'FeatureCollection',
+          features: features.flat(),
+        })
+      }
+    },
+
+    clear(): void {
+      this.map.getSource('osm').setData({
+        type: 'FeatureCollection',
+        features: [],
+      })
+    },
+  },
+})
+</script>