From 125f6e3057a16c15c4fe6e379bce601af3cfa0c5 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Thu, 24 Oct 2024 21:41:09 +0800
Subject: feat: patch 14f1398, more marker type

* add module 'marker' for svg markers, they are from https://labs.mapbox.com/maki-icons/editor/
* use grid layout and title for menu itmes
* update mapclay version to use element for adding marker
---
 src/Link.mjs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/Link.mjs')

diff --git a/src/Link.mjs b/src/Link.mjs
index 61aa5f8..2ff1123 100644
--- a/src/Link.mjs
+++ b/src/Link.mjs
@@ -1,5 +1,6 @@
 import LeaderLine from 'leader-line'
 import { insideWindow, insideParent } from './utils'
+import * as markers from './marker.mjs'
 
 /** VAR: pattern for coodinates */
 export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/
@@ -106,11 +107,19 @@ export class GeoLink extends window.HTMLAnchorElement {
       .map(map => {
         const renderer = map.renderer
         const lonLat = [Number(this.dataset.lon), Number(this.dataset.lat)]
+        const type = params.get('type') ?? 'pin'
+        const svg = markers[type]
+        const element = document.createElement('div')
+        element.style.cssText = `width: ${svg.size[0]}px; height: ${svg.size[1]}px;`
+        element.innerHTML = svg.html
 
         const marker = map.querySelector(`.marker[data-xy="${lonLat}"]`) ??
           renderer.addMarker({
             xy: lonLat,
-            type: params.get('type') ?? null,
+            element,
+            type,
+            anchor: svg.anchor,
+            size: svg.size,
           })
         marker.dataset.xy = lonLat
         marker.title = new URLSearchParams(this.search).get('xy') ?? lonLat
-- 
cgit v1.2.3-70-g09d2