fledgling geojson support

andrewgryan · May 8, 2024 · c77ad27 · c77ad27
1 parent 21afcf8
commit c77ad27
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/example/geojson/index.html b/example/geojson/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GeoJSON</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/[email protected]/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+    <script type="module" src="/src/index.js"></script>
+    <style>
+      * {
+        margin: 0;
+      }
+      l-map {
+        display: block;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <l-map center="[55,0]" zoom="5">
+      <l-tile-layer
+        url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
+      ></l-tile-layer>
+      <l-geojson id="feature" geojson='{"type":"Feature","properties":{"name":"Coors Field","amenity":"Baseball Stadium","popupContent":"This is where the Rockies play!"},"geometry":{"type":"Point","coordinates":[-104.99404,39.75621]}}'></l-geojson>
+    </l-map>
+    <script>
+      document.getElementById("feature").addEventListener("map:addTo", (ev) => {
+        console.log({ message: "Hello, World!", ev })
+      })
+    </script>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,7 @@ import LTileLayer from "./l-tile-layer.js";
 import LLatLngBounds from "./l-lat-lng-bounds.js";
 import LImageOverlay from "./l-image-overlay.js";
 import LVideoOverlay from "./l-video-overlay.js";
+import LGeoJSON from "./l-geojson.js";
 
 
 const init = (() => {
@@ -25,6 +26,7 @@ const init = (() => {
   customElements.define("l-lat-lng-bounds", LLatLngBounds)
   customElements.define("l-image-overlay", LImageOverlay)
   customElements.define("l-video-overlay", LVideoOverlay)
+  customElements.define("l-geojson", LGeoJSON)
 })();
 
 export default init;
diff --git a/src/l-geojson.js b/src/l-geojson.js
@@ -0,0 +1,20 @@
+import { mapAddTo } from "./events.js"
+
+class LGeoJSON extends HTMLElement {
+  constructor() {
+    super()
+  }
+
+  connectedCallback() {
+    const layer = L.geoJSON(JSON.parse(this.getAttribute("geojson")))
+    this.dispatchEvent(new CustomEvent(mapAddTo, {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        layer
+      }
+    }))
+  }
+}
+
+export default LGeoJSON