leaflet-html 0.3.3 → 0.3.5

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "leaflet-html",
   "type": "module",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Leaflet expressed in HTML",
+  "keywords": [
+     "leaflet",
+     "hda",
+     "html",
+     "hypermedia",
+     "maps"
+  ],
   "source": "src/index.js",
   "main": "./dist/leaflet-html.cjs",
   "module": "./dist/leaflet-html.js",
   "author": "andrewgryan",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/andrewgryan/leaflet-html.git"

package/.github/workflows/master.yml

@@ -1,15 +0,0 @@
-on: push
-name: Build and deploy GH Pages
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/master'
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: build_and_deploy
-        uses: shalzz/zola-deploy-action@v0.17.2
-        env:
-          BUILD_DIR: docs
-          PAGES_BRANCH: gh-pages
-          TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/npm-publish.yml

@@ -1,37 +0,0 @@
-name: npm-publish
-on:
-  push:
-    branches:
-      - master
-jobs:
-  npm-publish:
-    name: npm-publish
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Set Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 21
-      - name: Install
-        uses: borales/actions-yarn@v4
-        with:
-          cmd: install
-      - name: Build
-        uses: borales/actions-yarn@v4
-        with:
-          cmd: build
-      - name: Publish if version has been updated
-        uses: pascalgn/npm-publish-action@1.3.9
-        with:
-          tag_name: "v%s"
-          tag_message: "v%s"
-          create_tag: "true"
-          commit_pattern: "^Release (\\S+)"
-          workspace: "."
-          publish_command: "yarn"
-          publish_args: "--non-interactive"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/.prettierignore

@@ -1,2 +0,0 @@
-docs
-example

package/.prettierrc

@@ -1 +0,0 @@
-{}

package/docs/config.toml

@@ -1,16 +0,0 @@
-# The URL the site will be built for
-base_url = "https://andrewgryan.github.io/leaflet-html"
-
-# Whether to automatically compile all Sass files in the sass directory
-compile_sass = false
-
-# Whether to build a search index to be used later on by a JavaScript library
-build_search_index = false
-
-[markdown]
-# Whether to do syntax highlighting
-# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
-highlight_code = true
-
-[extra]
-# Put all your custom variables here

package/docs/content/_index.md

@@ -1,89 +0,0 @@
-+++
-+++
-# Leaflet HTML
-
-[LeafletJS](https://leafletjs.com/) is a library geared towards map based visualisations.
-Leaflet HTML expresses that JavaScript API in HTML.
-
-## How-to guides
-
-[Articles](@/articles/_index.md) have been written to make adopting Leaflet HTML simpler.
-These articles follow the Leaflet tutorials closely and add a few `leaflet-html` specific
-tips and tricks.
-
-## Design principles
-
-Leaflet HTML tries to model Leaflet's API as closely as possible to avoid confusion and to ease onboarding.
-Naming conventions are followed where possible.
-The hierarchy in the JS API is replicated by nesting HTML elements.
-
-## Example
-
-The following is a live running example of Leaflet HTML.
-
-<l-map center="[39.61, -105.02]" zoom="10">
-  <l-control-layers>
-    <l-base-layers>
-      <l-tile-layer
-        name="CartoDB_Voyager"
-        url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-        max-zoom="20"
-        subdomains="abcd"
-        show
-      ></l-tile-layer>
-    </l-base-layers>
-    <l-overlay-layers>
-      <l-layer-group name="Cities">
-        <l-marker lat-lng="[39.61, -105.02]">
-          <l-popup content="This is Littleton, CO."></l-popup>
-        </l-marker>
-        <l-marker lat-lng="[39.74, -104.99]">
-          <l-popup content="This is Denver, CO."></l-popup>
-        </l-marker>
-        <l-marker lat-lng="[39.73, -104.8]">
-          <l-popup content="This is Aurora, CO."></l-popup>
-        </l-marker>
-        <l-marker lat-lng="[39.77, -105.23]">
-          <l-popup content="This is Golden, CO."></l-popup>
-        </l-marker>
-      </l-layer-group>
-    </l-overlay-layers>
-  </l-control-layers>
-</l-map>
-
-The above application is represented in HTML using the following syntax.
-
-```html
-<l-map center="[39.61, -105.02]" zoom="10">
-  <l-control-layers>
-    <l-base-layers>
-      <l-tile-layer
-        name="CartoDB_Voyager"
-        url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-        max-zoom="20"
-        subdomains="abcd"
-      ></l-tile-layer>
-    </l-base-layers>
-    <l-overlay-layers>
-      <l-layer-group name="Cities">
-        <l-marker lat-lng="[39.61, -105.02]">
-          <l-popup content="This is Littleton, CO."></l-popup>
-        </l-marker>
-        <l-marker lat-lng="[39.74, -104.99]">
-          <l-popup content="This is Denver, CO."></l-popup>
-        </l-marker>
-        <l-marker lat-lng="[39.73, -104.8]">
-          <l-popup content="This is Aurora, CO."></l-popup>
-        </l-marker>
-        <l-marker lat-lng="[39.77, -105.23]">
-          <l-popup content="This is Golden, CO."></l-popup>
-        </l-marker>
-      </l-layer-group>
-    </l-overlay-layers>
-  </l-control-layers>
-</l-map>
-```
-
-The above example is a taste of the syntax and capabilities of wrapping Leaflet in HTML tags.

package/docs/content/articles/_index.md

@@ -1,5 +0,0 @@
-+++
-title = "Leaflet HTML articles"
-template = "article.html"
-page_template = "article-page.html"
-+++

package/docs/content/articles/basic.md

@@ -1,110 +0,0 @@
-+++
-title = "Basic usage"
-+++
-
-The minimal `leaflet-html` app is a basemap centered and zoomed on a location.
-
-```html
-<l-map center="[53, 0]" zoom="4">
-  <l-tile-layer
-    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-  ></l-tile-layer>
-</l-map>
-```
-
-<l-map center="[53, 0]" zoom="4">
-  <l-tile-layer
-    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-  ></l-tile-layer>
-</l-map>
-
-To add the above widget to a HTML document both JS and CSS tags need to be included in the `<head>` of the page.
-
-## Assets
-
-Basic HTML recommended settings, e.g. `charset`, `lang`, and `viewport` to help with cross device support.
-Can be placed in the `<head>` tag, along with CSS and JS assets.
-
-```html
-<head lang="en">
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
-```
-
-### Leaflet
-
-Leaflet is an external dependency of `leaflet-html`, as such,
-the standard Leaflet assets should be included.
-
-```html
-<head>
-...
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-  crossorigin=""
-/>
-...
-</head>
-```
-
-### Leaflet-HTML
-
-Leaflet-HTML is available via **npm** and **unpkg**.
-To get started quickly, use the CDN version available on **unpkg**.
-
-```html
-<script type="importmap">
-  {
-    "imports": {
-      "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
-      "leaflet-html": "https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
-    }
-  }
-</script>
-```
-
-```html
-<script type="module">
-  import "leaflet-html";
-</script>
-```
-
-The `@latest` keyword should keep your site up to date during development.
-
-## Minimal style
-
-By default Custom elements are `display: inline`,
-meaning they are unaffected by `height`.
-Add the following ruleset to your stylesheet to enable map size.
-
-```css
-l-map {
-  display: block;
-}
-```
-
-It's not always necessary to set `block` directly on an `l-map` tag.
-For example, a parent with `display: grid`, will size the `l-map` tag appropriately.
-
-### Z-index
-
-Leaflet has fairly strong `z-index` settings that are not easy to override.
-The easiest way to get around them is to start a new stacking context using `isolation: isolate`.
-
-### Sensible defaults
-
-Without knowing anything specific about your application the following settings should be a good starting place.
-
-```css
-l-map {
-  display: block;
-  block-size: 40ch;
-  isolation: isolate;
-  z-index: 1;
-}
-```
-
-This allows overlaying your own UI elements and gives full control over size and position of each map on the page.

package/docs/content/articles/htmx.md

@@ -1,84 +0,0 @@
-+++
-title = "Working with HTMX"
-+++
-
-To add HTMX to a project.
-Add a script tag to pull the library into your page.
-
-```html
-<script src="https://unpkg.com/htmx.org@1.9.12"></script>
-<!-- have a button POST a click via AJAX -->
-<button hx-get="/clicked" hx-swap="outerHTML">
-  Click Me
-</button>
-```
-
-<script src="https://unpkg.com/htmx.org@1.9.12"></script>
-<button hx-get={{ url(path="htmx/clicked.html") }} hx-swap="outerHTML">
-  Click Me
-</button>
-
-## Use with Leaflet-HTML
-
-The principles that govern HTMX development also hold for Leaflet-HTML.
-A button that requests HTML to replace part of the document should update the map.
-
-```html
-<!-- Initial map -->
-<l-map center="[55,-5]" zoom="4">
-  <l-tile-layer
-    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-  ></l-tile-layer>
-</l-map>
-
-<!-- Tiles -->
-<button hx-get="/tile-osm.html" hx-target="l-tile-layer" hx-swap="outerHTML">
-  OSM
-</button>
-<button hx-get="/tile-voyager.html" hx-target="l-tile-layer" hx-swap="outerHTML">
-  Voyager
-</button>
-<button hx-get="/tile-esri.html" hx-target="l-tile-layer" hx-swap="outerHTML">
-  ESRI
-</button>
-
-<!-- Marker -->
-<button hx-get="/marker.html" hx-target="l-map" hx-swap="beforeend">
-  Add marker
-</button>
-<button hx-get="/marker.html" hx-target="l-marker" hx-swap="delete">
-  Delete marker
-</button>
-```
-
-<l-map center="[55,-5]" zoom="4">
-  <l-tile-layer
-    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-  ></l-tile-layer>
-</l-map>
-
-<button hx-get={{ url(path='htmx/tile-osm.html') }} hx-target="l-tile-layer" hx-swap="outerHTML">
-  OSM
-</button>
-<button hx-get={{ url(path='htmx/tile-voyager.html') }} hx-target="l-tile-layer" hx-swap="outerHTML">
-  Voyager
-</button>
-<button hx-get={{ url(path='htmx/tile-esri.html') }} hx-target="l-tile-layer" hx-swap="outerHTML">
-  ESRI
-</button>
-<button hx-get={{ url(path='htmx/marker.html') }} hx-target="l-map" hx-swap="beforeend">
-  Add marker
-</button>
-<button hx-get={{ url(path='htmx/marker.html')}} hx-target="l-marker" hx-swap="delete">
-  Delete marker
-</button>
-
-The above approach works by triggering the change handlers in the `<l-tile-layer>` custom element.
-The additional HTML tags generated by Leaflet are also inside the `<l-map>` tag.
-Care should be taken to not `hx-swap` the tags governed by Leaflet.
-
-All Leaflet-HTML tags, e.g. `<l-marker>`, `<l-icon>`, etc. can be swapped however you like.
-It is just the contents of `<l-map>` that needs careful consideration.
-
-A more elegant mechanism in the future will make it clear which part of the document is controlled by Leaflet.
-

package/docs/content/articles/icons.md

@@ -1,47 +0,0 @@
-+++
-title = "Custom icons"
-+++
-
-There are two ways to add an icon to a marker.
-One is to specify a `icon` attribute containing a JSON string of `L.Icon` options.
-
-```html
-<l-marker
-  lat-lng="[51.5, -0.09]"
-  icon='{"iconUrl": "icons/leaf-green.png"}'
-></l-marker>
-```
-
-The other way is to create a separate HTML tag to configure the icon.
-This is a more HTML centered approach.
-The above JSON approach may be suitable in cases where the icon data is available in a data structure.
-
-```html
-<l-marker lat-lng="[51.5, -0.09]"><l-icon
-    icon-url="/icons/leaf-green.png"
-    shadow-url="/icons/leaf-shadow.png"
-    icon-size="[38, 95]"
-    shadow-size="[50, 64]" 
-    icon-anchor="[22, 94]" 
-    shadow-anchor="[4, 62]" 
-    popup-anchor="[-3, -76]" 
-  ></l-icon>
-```
-
-Both are supported, choose whichever is most convenient.
-
-<l-map center="[51.5, -0.09]" zoom="12">
-  <l-tile-layer
-    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-  ></l-tile-layer>
-  <l-marker lat-lng="[51.5, -0.09]"><l-icon
-      icon-url={{ url(path='icons/leaf-green.png') }}
-      shadow-url={{ url(path='icons/leaf-shadow.png') }}
-      icon-size="[38, 95]"
-      shadow-size="[50, 64]" 
-      icon-anchor="[22, 94]" 
-      shadow-anchor="[4, 62]" 
-      popup-anchor="[-3, -76]" 
-    ></l-icon>
-  </l-marker>
-</l-map>

package/docs/content/articles/style.md

@@ -1,14 +0,0 @@
-+++
-title = "Styling leaflet objects"
-+++
-
-## Naming convention
-Leaflet styles objects using the `style` keyword option.
-Leaflet HTML, on the other hand, needs to support inline style and leaflet style.
-Therefore, the keyword `l-style` is used to style the underlying leaflet objects.
-
-## Example
-
-```html
-<l-marker l-style='{"color": "hotpink"}'></l-marker>
-```

package/docs/static/htmx/clicked.html

@@ -1 +0,0 @@
-<h2>Hello, HTMX!</h2>

package/docs/static/htmx/marker.html

@@ -1,3 +0,0 @@
-<l-marker lat-lng="[55,-5]">
-  <l-popup content="I'm from the server"></l-popup>
-</l-marker>

package/docs/static/htmx/tile-esri.html

@@ -1,3 +0,0 @@
-<l-tile-layer
-  url-template="https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}"
-></l-tile-layer>

package/docs/static/htmx/tile-osm.html

@@ -1,4 +0,0 @@
-<l-tile-layer
-  url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-></l-tile-layer>
-  

package/docs/static/htmx/tile-voyager.html

@@ -1,4 +0,0 @@
-<l-tile-layer
-  url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-></l-tile-layer>
-  

package/docs/static/style.css

@@ -1,48 +0,0 @@
-@import "https://unpkg.com/open-props";
-
-l-map {
-  display: block;
-  block-size: 40ch;
-  isolation: isolate;
-  z-index: 1;
-}
-
-body {
-  font-family: system-ui;
-  line-height: 1.6;
-  margin: 0;
-  min-height: 100vh;
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
-h1, h2, h3 {
-  font-weight: 100;
-}
-
-pre {
-  padding-inline: 0.75rem;
-  padding-block: 0.5rem;
-  border-radius: 0.2rem;
-  overflow-x: auto;
-}
-
-main {
-  inline-size: min(90%, 80ch);
-  margin-inline: auto;
-  max-inline-size: 100vw;
-}
-
-footer {
-  margin-block-start: auto;
-  min-height: 15ch;
-  background-color: var(--gray-9);
-  padding: var(--size-3);
-
-  & .logo {
-    color: var(--gray-2);
-    font-size: var(--font-size-0);
-    letter-spacing: var(--font-letterspacing-5);
-  }
-}
-

package/docs/templates/article-page.html

@@ -1,8 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<main>
-  <h1>{{ page.title }}</h1>
-  {{ page.content | safe }}
-</main>
-{% endblock %}

package/docs/templates/article.html

@@ -1,12 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<main>
-  <h1>{{section.title}}</h1>
-  <ul>
-    {% for page in section.pages %}
-      <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
-    {% endfor %}
-  </ul>
-</main>
-{% endblock content %}

package/docs/templates/base.html

@@ -1,43 +0,0 @@
-{% if config.base_url == "https://andrewgryan.github.io/leaflet-html" %}
-  {% set js_url = "https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js" %}
-{% else %}
-  {% set js_url = "/leaflet-html.js" %}
-{% endif %}
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-  </style>
-    <link rel="stylesheet" href="/style.css" />
-    <link rel="stylesheet" href="/leaflet-html/style.css" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-      crossorigin=""
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
-          "leaflet-html": "{{ js_url | safe }}"
-        }
-      }
-    </script>
-    <script type="module">
-      import "leaflet-html";
-    </script>
-</head>
-<body>
-<nav>
-  <a href="{{ get_url(path='@/_index.md') }}">Home</a>
-  <a href="{{ get_url(path='@/articles/_index.md') }}">Articles</a>
-</nav>
-{% block content %}{% endblock %}
-<footer>
-  <div class="logo">Leaflet-HTML</div>
-</footer>
-</body>
-</html>

package/docs/templates/index.html

@@ -1,6 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<main>
-{{ section.content | safe }}
-</main>
-{% endblock %}

package/docs/templates/shortcodes/url.html

@@ -1 +0,0 @@
-{{ get_url(path=path) }}

package/example/geojson/index.html

@@ -1,44 +0,0 @@
-<!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/leaflet@1.9.4/dist/leaflet.css"
-      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-      crossorigin=""
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js"
-        }
-      }
-    </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>