From ea6f7934ece3f35c7d956fee3899195e9fe3cd69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sat, 16 Nov 2024 15:45:55 -0800
Subject: [PATCH] maps

---
 demo/maps.html    | 40 +++++++++-------------------
 deno.json         |  1 +
 deno.lock         | 11 ++++++++
 src/maps/index.ts | 66 ++++++++++++++++++++++++++---------------------
 4 files changed, 61 insertions(+), 57 deletions(-)
diff --git a/demo/maps.html b/demo/maps.html
index a64bd16..9f0f4c7 100644
--- a/demo/maps.html
+++ b/demo/maps.html
@@ -19,7 +19,7 @@
         margin: 0;
       }
 
-      leaflet-map,
+      folk-map,
       geo-wiki {
         display: block;
         height: 100%;
@@ -38,34 +38,27 @@
   </head>
   <body>
     <fc-geometry x="25" y="100" width="400" height="200">
-      <leaflet-map coordinates="52.09, 5.12" zoom="13"></leaflet-map>
+      <folk-map coordinates="52.09, 5.12" zoom="13"></folk-map>
     </fc-geometry>
 
     <fc-geometry x="50" y="550" width="400" height="250">
-      <leaflet-map
-        coordinates="51.50404120260676, -0.14007568359375003"
-        zoom="13"
-      ></leaflet-map>
+      <folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map>
     </fc-geometry>
 
     <fc-geometry x="500" y="400" width="500" height="300">
-      <geo-wiki
-        coordinates="51.50404120260676, -0.14007568359375003"
-      ></geo-wiki>
+      <geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
     </fc-geometry>
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
-      import { LeafletMap } from '../src/maps';
+      import { FolkMap } from '../src/maps';
+
       FolkGeometry.register();
-      LeafletMap.register();
+      FolkMap.register();
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right &&
-          rect1.right > rect2.left &&
-          rect1.top < rect2.bottom &&
-          rect1.bottom > rect2.top
+          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
         );
       }
 
@@ -81,12 +74,7 @@
         );
       }
 
-      const proximityMap = new Map(
-        Array.from(document.querySelectorAll('fc-geometry')).map((el) => [
-          el,
-          new Set(),
-        ])
-      );
+      const proximityMap = new Map(Array.from(document.querySelectorAll('fc-geometry')).map((el) => [el, new Set()]));
 
       function handleProximity(e) {
         proximityMap.forEach((set, el) => {
@@ -124,7 +112,7 @@
         proximityMap.get(e.target.parentElement)?.forEach((el) => {
           const content = el.firstElementChild;
           if (content instanceof GeoWiki) {
-            const { lat, lng } = e.detail;
+            const { lat, lng } = e.target.coordinates;
             content.coordinates = [lat, lng];
           }
         });
@@ -152,9 +140,7 @@
 
         attributeChangedCallback(name, oldValue, newValue) {
           if (name === 'coordinates') {
-            this.#coordinates = newValue
-              .split(',')
-              .map((str) => Number(str)) || [0, 0];
+            this.#coordinates = newValue.split(',').map((str) => Number(str)) || [0, 0];
             this.searchWiki(this.#coordinates);
           }
         }
@@ -170,9 +156,7 @@
             origin: '*',
           });
           // https://www.mediawiki.org/wiki/API:Geosearch
-          this.#results = await fetch(
-            `https://en.wikipedia.org/w/api.php?${params}`
-          )
+          this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
             .then((response) => response.json())
             .then((data) => data?.query?.geosearch ?? []);
 
diff --git a/deno.json b/deno.json
index 6a68624..4c94255 100644
--- a/deno.json
+++ b/deno.json
@@ -5,6 +5,7 @@
     "preview": "vite build demo && vite preview demo"
   },
   "imports": {
+    "@types/leaflet": "npm:@types/leaflet@^1.9.14",
     "perfect-arrows": "npm:perfect-arrows@^0.3.7",
     "perfect-freehand": "npm:perfect-freehand@^1.2.2",
     "leaflet": "npm:leaflet@^1.9.4",
diff --git a/deno.lock b/deno.lock
index 71420ba..79cda53 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,6 +1,7 @@
 {
   "version": "4",
   "specifiers": {
+    "npm:@types/leaflet@^1.9.14": "1.9.14",
     "npm:leaflet@^1.9.4": "1.9.4",
     "npm:perfect-arrows@~0.3.7": "0.3.7",
     "npm:perfect-freehand@^1.2.2": "1.2.2",
@@ -134,6 +135,15 @@
     "@types/estree@1.0.6": {
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
+    "@types/geojson@7946.0.14": {
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+    },
+    "@types/leaflet@1.9.14": {
+      "integrity": "sha512-sx2q6MDJaajwhKeVgPSvqXd8rhNJSTA3tMidQGduZn9S6WBYxDkCpSpV5xXEmSg7Cgdk/5vJGhVF1kMYLzauBg==",
+      "dependencies": [
+        "@types/geojson"
+      ]
+    },
     "esbuild@0.21.5": {
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "dependencies": [
@@ -228,6 +238,7 @@
   },
   "workspace": {
     "dependencies": [
+      "npm:@types/leaflet@^1.9.14",
       "npm:leaflet@^1.9.4",
       "npm:perfect-arrows@~0.3.7",
       "npm:perfect-freehand@^1.2.2",
diff --git a/src/maps/index.ts b/src/maps/index.ts
index 4278c1b..e417ba0 100644
--- a/src/maps/index.ts
+++ b/src/maps/index.ts
@@ -1,15 +1,8 @@
-import {
-  LatLng,
-  LatLngExpression,
-  LeafletEvent,
-  map,
-  Map,
-  tileLayer,
-} from "leaflet";
+import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'leaflet';
 
 // @ts-ignore
 // Vite specific import :(
-import css from "leaflet/dist/leaflet.css?inline";
+import css from 'leaflet/dist/leaflet.css?inline';
 const styles = new CSSStyleSheet();
 styles.replaceSync(`${css}
   :host {
@@ -22,54 +15,69 @@ styles.replaceSync(`${css}
   }  
 `);
 
-export class RecenterEvent extends CustomEvent<LatLng> {
-  constructor(detail: LatLng) {
-    super("recenter", { detail, bubbles: true });
+export class RecenterEvent extends Event {
+  constructor() {
+    super('recenter', { bubbles: true });
   }
 }
 
-export class LeafletMap extends HTMLElement {
-  static tagName = "leaflet-map";
+export class FolkMap extends HTMLElement {
+  static tagName = 'folk-map';
 
   static register() {
     customElements.define(this.tagName, this);
   }
 
-  #container = document.createElement("div");
+  #container = document.createElement('div');
   #map!: Map;
 
   constructor() {
     super();
+
     this.handleEvent = this.handleEvent.bind(this);
-    const shadow = this.attachShadow({ mode: "open" });
+
+    const shadow = this.attachShadow({ mode: 'open' });
     shadow.adoptedStyleSheets.push(styles);
     shadow.appendChild(this.#container);
   }
 
+  get coordinates() {
+    return this.#map.getCenter();
+  }
+  set coordinates(coordinates) {
+    this.#map.setView(coordinates);
+  }
+
+  get zoom() {
+    return this.#map.getZoom();
+  }
+  set zoom(zoom) {
+    this.#map.setZoom(zoom);
+  }
+
   connectedCallback() {
     this.#map = map(this.#container);
     this.#map.addLayer(
-      tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
-        attribution:
-          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       })
     );
-    const coordinates = (this.getAttribute("coordinates")
-      ?.split(",")
-      .map((str) => Number(str)) || [0, 0]) as LatLngExpression;
-    const zoom = Number(this.getAttribute("zoom") || 13);
-    this.#map.setView(coordinates, zoom);
 
-    this.#map.on("zoom", this.handleEvent);
-    this.#map.on("moveend", this.handleEvent);
+    this.#map.on('zoom', this.handleEvent);
+    this.#map.on('moveend', this.handleEvent);
+
+    this.#map.setView(
+      (this.getAttribute('coordinates') || '0, 0').split(',').map(Number) as LatLngExpression,
+      Number(this.getAttribute('zoom') || 13)
+    );
   }
 
   handleEvent(event: LeafletEvent) {
     switch (event.type) {
-      case "zoom":
-      case "moveend": {
-        this.dispatchEvent(new RecenterEvent(this.#map.getCenter()));
+      case 'zoom':
+      case 'moveend': {
+        this.dispatchEvent(new RecenterEvent());
         break;
       }
     }
