Add basic support for point in map plugin for Yasgui

.changeset/cyan-kings-exercise.md

@@ -0,0 +1,5 @@
+---
+"trifid-plugin-yasgui": patch
+---
+
+Add basic support for POINT WKT elements for the Map plugin

.gitignore

@@ -1,4 +1,5 @@
 .idea
+.vscode
 coverage/
 node_modules/
 *.tgz

packages/yasgui/index.js

@@ -33,6 +33,15 @@ const trifidFactory = async (trifid) => {
     decorateReply: false,
   })
 
+  // Serve files from the public directory
+  const publicDirectory = new URL('public/', import.meta.url)
+  const publicPath = fileURLToPath(publicDirectory)
+  server.register(fastifyStatic, {
+    root: publicPath.replace(/^file:\/\//, ''),
+    prefix: '/yasgui-public/',
+    decorateReply: false,
+  })
+
   // Serve static files for custom plugins
   const pluginsUrl = new URL('build/', import.meta.url)
   const pluginsPath = fileURLToPath(pluginsUrl)

packages/yasgui/package.json

@@ -16,6 +16,7 @@
     "url": "https://github.com/zazuko/trifid/issues"
   },
   "files": [
+    "public",
     "test",
     "views",
     "dist",

packages/yasgui/plugins/deps.js

@@ -3,4 +3,6 @@ import '@openlayers-elements/maps/ol-map.js'
 import '@openlayers-elements/maps/ol-select.js'
 import '@openlayers-elements/maps/ol-layer-openstreetmap.js'
 import '@openlayers-elements/maps/ol-layer-wkt.js'
+import '@openlayers-elements/core/ol-layer-vector.js'
+import '@openlayers-elements/maps/ol-marker-icon.js'
 import '@openlayers-elements/swisstopo/swisstopo-wmts'

packages/yasgui/plugins/map.js

@@ -149,10 +149,12 @@ class YasguiMap {
       }),
     })
 
+    const vectorLayer = document.createElement('ol-layer-vector')
     const wkt = document.createElement('ol-layer-wkt')
     const select = document.createElement('ol-select')
     select.style = featureStyle
 
+    mapLayer.appendChild(vectorLayer)
     mapLayer.appendChild(wkt)
     mapLayer.appendChild(select)
     el.appendChild(mapLayer)
@@ -162,6 +164,10 @@ class YasguiMap {
     this.yasr.resultsEl.appendChild(el)
 
     select.addEventListener('feature-selected', (e) => {
+      if (!e?.detail?.feature) {
+        return
+      }
+
       const feature = e.detail.feature
       feature.setStyle(editStyle)
       const id = feature.getId()
@@ -179,11 +185,30 @@ class YasguiMap {
     })
 
     select.addEventListener('feature-unselected', (e) => {
+      if (!e?.detail?.feature) {
+        return
+      }
+
       const feature = e.detail.feature
       feature.setStyle(featureStyle)
       overlay.style.display = 'none'
     })
 
+    // Explicitly add POINT data to the map
+    const pointResults = results.filter((result) => result.wkt.includes('POINT'))
+    pointResults.forEach((result) => {
+      const markerIcon = document.createElement('ol-marker-icon')
+      const coords = result.wkt.match(/POINT *\(([^)]+)\)/)[1].split(' ')
+      if (coords.length !== 2) {
+        return
+      }
+      markerIcon.setAttribute('lat', coords[1])
+      markerIcon.setAttribute('lon', coords[0])
+      markerIcon.setAttribute('src', '/yasgui-public/marker-icon.svg')
+      vectorLayer.appendChild(markerIcon)
+    })
+
+    // Also contains POINT data, to correctly fit the map
     wkt.featureData = results
     wkt.featureStyle = featureStyle
 

packages/yasgui/test/yasgui.test.js

@@ -96,5 +96,11 @@ describe('trifid-plugin-yasgui', () => {
       await res.text() // Just make sure that the stream is consumed
       strictEqual(res.status, 200)
     })
+
+    it('can serve marker icon SVG', async () => {
+      const res = await fetch(`${getListenerURL(trifidListener)}/yasgui-public/marker-icon.svg`)
+      await res.text() // Just make sure that the stream is consumed
+      strictEqual(res.status, 200)
+    })
   })
 })