feat: implement crs in GeoLink

Now GeoLink has the following format:

geo:<LON>,<LAT>?q=<LON>,<LAT>&xy=<x,y>,crs=<EPSG:CODE>

When calling addMarker or updateCamera, only use [lon,lat] format

3 files changed, 62 insertions, 19 deletions

diff --git a/package.json b/package.json
index 59f4800..a6c7027 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,10 @@
     "markdown-it-front-matter": "^0.2.4",
     "markdown-it-inject-linenumbers": "^0.3.0",
     "markdown-it-toc-done-right": "^4.2.0",
+    "ol": "^10.2.1",
     "plain-draggable": "^2.5.15",
-    "plain-modal": "^1.0.34"
+    "plain-modal": "^1.0.34",
+    "proj4": "^2.12.1"
   },
   "author": "Hsiehg Chin Fan <pham@topo.tw>",
   "homepage": "https://outdoorsafetylab.github.io/dumbymap",
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 170cb16..2e71ee6 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -1,6 +1,8 @@
 import LeaderLine from 'leader-line'
 import { insideWindow, insideParent } from './utils'
 
+export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/
+
 /**
  * focusNextMap.
  *
@@ -100,11 +102,12 @@ const getMarkersFromMaps = link => {
     .filter(map => link.targets ? link.targets.includes(map.id) : true)
     .map(map => {
       const renderer = map.renderer
-      const markerTitle = `${link.targets ?? 'all'}@${link.xy}`
+      const markerTitle = `${link.targets ?? 'all'}@${link.dataset.xy}`
+      const lonLat = [Number(link.dataset.lon), Number(link.dataset.lat)]
 
       return map.querySelector(`.marker[title="${markerTitle}"]`) ??
         renderer.addMarker({
-          xy: link.xy,
+          xy: lonLat,
           title: markerTitle,
           type: link.type,
         })
@@ -138,21 +141,25 @@ const addLeaderLine = (link, target) => {
  */
 export const createGeoLink = (link) => {
   const url = new URL(link.href)
-  const xyInParams = url.searchParams.get('xy')?.split(',')?.map(Number)
-  const xy = xyInParams ?? url?.href
-    ?.match(/^geo:([-]?[0-9.]+),([-]?[0-9.]+)/)
+  const params = new URLSearchParams(link.search)
+  const xyInParams = params.get('xy')?.split(',')?.map(Number)
+  const [lon, lat] = url.href
+    ?.match(coordPattern)
     ?.splice(1)
     ?.reverse()
     ?.map(Number)
+  const xy = xyInParams ?? [lon, lat]
 
   if (!xy || isNaN(xy[0]) || isNaN(xy[1])) return false
 
   // Geo information in link
-  link.url = url
-  link.xy = xy
+  link.dataset.xy = xy
+  link.dataset.lon = lon
+  link.dataset.lat = lat
   link.classList.add('with-leader-line', 'geolink')
-  link.targets = link.url.searchParams.get('id')?.split(',') ?? null
-  link.type = link.url.searchParams.get('type') ?? null
+  // TODO refactor as data attribute
+  link.targets = params.get('id')?.split(',') ?? null
+  link.type = params.get('type') ?? null
 
   link.lines = []
 
@@ -170,7 +177,11 @@ export const createGeoLink = (link) => {
   link.onclick = (event) => {
     event.preventDefault()
     removeLeaderLines(link)
-    getMarkersFromMaps(link).forEach(updateMapCameraByMarker(link.xy))
+    getMarkersFromMaps(link)
+      .forEach(updateMapCameraByMarker([
+        Number(link.dataset.lon),
+        Number(link.dataset.lat)
+      ]))
   }
   return true
 }
@@ -229,9 +240,9 @@ const removeLeaderLines = link => {
  * @param {Number[]} xy
  * @return {Function} function
  */
-const updateMapCameraByMarker = xy => marker => {
+const updateMapCameraByMarker = lonLat => marker => {
   const renderer = marker.closest('.mapclay')?.renderer
-  renderer.updateCamera({ center: xy }, true)
+  renderer.updateCamera({ center: lonLat }, true)
 }
 
 /**
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 593875e..6602f29 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -9,6 +9,8 @@ import { Layout, SideBySide, Overlay } from './Layout'
 import * as utils from './dumbyUtils'
 import * as menuItem from './MenuItem'
 import PlainModal from 'plain-modal'
+import proj4 from 'proj4'
+import { register, fromEPSGCode } from 'ol/proj/proj4'
 
 /** Selector of special HTML Elements */
 const mapBlockSelector = 'pre:has(.language-map)'
@@ -59,8 +61,8 @@ export const markdown2HTML = (container, mdContent) => {
     validate: coordinateRegex,
     normalize: function (match) {
       const [, , x, sep, y] = match.text.match(coordinateRegex)
-      match.url = `geo:${y},${x}?xy=${x},${y}`
-      match.text = `${x}${sep} ${y}`
+      match.url = `geo:${y},${x}`
+      match.text = `${x}${sep}${y}`
       match.index += match.text.indexOf(x) + 1
       return match
     },
@@ -165,15 +167,43 @@ export const generateMaps = (container, {
       switchToNextLayout: throttle(utils.switchToNextLayout, 300),
     },
   }
-  Object.entries(dumbymap.utils).forEach(([util, func]) => {
-    dumbymap.utils[util] = func.bind(dumbymap)
+  Object.entries(dumbymap.utils).forEach(([util, value]) => {
+    if (typeof value === 'function') {
+      dumbymap.utils[util] = value.bind(dumbymap)
+    }
   })
 
   /** Create GeoLinks and DocLinks */
   container.querySelectorAll(docLinkSelector)
     .forEach(utils.createDocLink)
-  container.querySelectorAll(geoLinkSelector)
-    .forEach(utils.createGeoLink)
+
+  /** Set CRS and GeoLinks */
+  register(proj4)
+  fromEPSGCode(crs).then(() => {
+    const transform = proj4(crs, 'EPSG:4326').forward
+
+    Array.from(container.querySelectorAll(geoLinkSelector))
+      .map(link => {
+        // set coordinate as lat/lon in WGS84
+        const params = new URLSearchParams(link.search)
+        const [y, x] = link.href
+          .match(utils.coordPattern)
+          .splice(1)
+          .map(Number)
+        const [lon, lat] = transform([x, y])
+          .map(value => value.toFixed(6))
+        link.href = `geo:${lat},${lon}`
+
+        // set query strings
+        params.set('xy', `${x},${y}`)
+        params.set('crs', crs)
+        params.set('q', `${lat},${lon}`)
+        link.search = params
+
+        return link
+      })
+      .forEach(utils.createGeoLink)
+  })
 
   /**
    * mapFocusObserver. observe for map focus