leaflet-html 0.2.0 → 0.2.2

package/dist/leaflet-html.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaflet-html.umd.js","sources":["../src/events.js","../src/l-base-layers.js","../src/l-control-layers.js","../src/l-layer-group.js","../src/l-map.js","../src/l-marker.js","../src/l-overlay-layers.js","../src/l-popup.js","../src/l-tile-layer.js","../src/l-lat-lng-bounds.js","../src/l-image-overlay.js","../src/l-video-overlay.js","../src/l-geojson.js","../src/index.js"],"sourcesContent":["export const mapAddTo = \"map:addTo\"\nexport const popupAdd = \"popup:add\"\nexport const layerRemove = \"layer:remove\"\n","import { mapAddTo } from \"./events.js\"\n\nclass LBaseLayers extends HTMLElement {\n  constructor() {\n    super()\n  }\n  \n  connectedCallback() {\n    this.addEventListener(mapAddTo, (ev) => {\n      ev.detail[\"type\"] = \"base\"\n    })\n  }\n}\n\nexport default LBaseLayers\n\n","import { mapAddTo } from \"./events.js\"\n\nclass LControlLayers extends HTMLElement {\n  constructor() {\n    super()\n  }\n  \n  connectedCallback() {\n    const base = {}\n    const overlay = {}\n    const control = L.control.layers(base, overlay)\n\n    this.addEventListener(mapAddTo, (ev) => {\n      const { type, name, layer } = ev.detail\n      if (type === \"overlay\") {\n        control.addOverlay(layer, name)\n      } else if (type === \"base\") {\n        control.addBaseLayer(layer, name)\n      }\n      ev.preventDefault()\n    })\n    \n    const event = new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: control\n      }\n    })\n    this.dispatchEvent(event)\n  }\n}\n\nexport default LControlLayers\n","import { mapAddTo } from \"./events.js\"\n\nclass LLayerGroup extends HTMLElement {\n  constructor() {\n    super()\n  }\n  \n  connectedCallback() {\n    const name = this.getAttribute(\"name\")\n    const group = L.layerGroup()\n    const event = new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: group,\n        name\n      }\n    })\n    this.dispatchEvent(event)\n\n    this.addEventListener(mapAddTo, (ev) => {\n      ev.stopPropagation()\n      group.addLayer(ev.detail.layer)\n    })\n\n    const observer = new MutationObserver(function(mutations) {\n      mutations.forEach((mutation) => {\n        mutation.removedNodes.forEach((node) => {\n          const leafletId = node.getAttribute(\"leaflet-id\");\n          const layer = group.getLayer(leafletId);\n          group.removeLayer(layer);\n        });\n      });\n    });\n    observer.observe(this, { childList: true })\n  }\n}\n\nexport default LLayerGroup\n","// @ts-check\nimport { layerRemove, mapAddTo } from \"./events.js\"\n\nclass LMap extends HTMLElement {\n  constructor() {\n    super()\n\n    this.map = null\n    this.addEventListener(\"map:bounds\", (ev) => {\n      const { bounds, method } = ev.detail\n      this.map[method](bounds)\n    })\n  }\n\n  connectedCallback() {\n    this.map = L.map(this)\n    const center = this.getAttribute(\"center\")\n    const zoom = this.getAttribute(\"zoom\")\n    if ((center !== null) && (zoom !== null)) {\n      this.map.setView(JSON.parse(center), parseInt(zoom))\n    }\n    this.addEventListener(mapAddTo, (ev) => {\n      const layer = ev.detail.layer\n      layer.addTo(this.map)\n    })\n\n    this.addEventListener(layerRemove, (ev) => {\n      this.map.remove(ev.detail.layer)\n    })\n  }\n}\n\nexport default LMap\n","import { mapAddTo, popupAdd } from \"./events.js\"; \n\nclass LMarker extends HTMLElement {\n  static observedAttributes = [\"lat-lng\", \"opacity\"]\n\n  constructor() {\n    super()\n    this.layer = null\n  }\n\n  connectedCallback() {\n    const latLng = JSON.parse(this.getAttribute(\"lat-lng\"))\n    const opacity = parseFloat(this.getAttribute(\"opacity\") || \"1.0\")\n    this.layer = L.marker(latLng, { opacity });\n    this.setAttribute(\"leaflet-id\", L.stamp(this.layer))\n\n    this.addEventListener(popupAdd, (ev) => {\n      const { content } = ev.detail\n      this.layer.bindPopup(content)\n    })\n    \n    const event = new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: this.layer\n      }\n    })\n    this.dispatchEvent(event)\n  }\n\n  attributeChangedCallback(name, _oldValue, newValue) {\n    if (this.layer !== null) {\n      if (name === \"lat-lng\") {\n        this.layer.setLatLng(JSON.parse(newValue))\n      }\n      if (name === \"opacity\") {\n        this.layer.setOpacity(parseFloat(newValue))\n      }\n    }\n  }\n}\n\n\nexport default LMarker\n","import { mapAddTo } from \"./events.js\"\n\nclass LOverlayLayers extends HTMLElement {\n  constructor() {\n    super()\n  }\n  \n  connectedCallback() {\n    this.addEventListener(mapAddTo, (ev) => {\n      ev.detail[\"type\"] = \"overlay\"\n    })\n  }\n}\n\nexport default LOverlayLayers\n","import { popupAdd } from \"./events.js\"\n\nclass LPopup extends HTMLElement {\n  constructor() {\n    super()\n  }\n\n  connectedCallback() {\n    const content = this.getAttribute(\"content\")\n    const event = new CustomEvent(popupAdd, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        content\n      }\n    })\n    this.dispatchEvent(event)\n  }\n}\n\n\nexport default LPopup\n\n","import { mapAddTo } from \"./events.js\"\n\nclass LTileLayer extends HTMLElement {\n  constructor() {\n    super()\n  }\n\n  connectedCallback() {\n    const name = this.getAttribute(\"name\")\n    const urlTemplate = this.getAttribute(\"url-template\")\n    const attribution = this.getAttribute(\"attribution\")\n    const options = { attribution }\n    const layer = L.tileLayer(urlTemplate, options)\n    const event = new CustomEvent(mapAddTo, { detail: { name, layer }, bubbles: true})\n    this.dispatchEvent(event)\n  }\n}\n\nexport default LTileLayer\n","class LLatLngBounds extends HTMLElement {\n  static observedAttributes = [\"bounds\"]\n\n  constructor() {\n    super()\n  }\n\n  attributeChangedCallback(_name, _oldValue, newValue) {\n    const event = new CustomEvent(\"map:bounds\", {\n      bubbles: true,\n      detail: {\n        bounds: JSON.parse(newValue),\n        method: this.getAttribute(\"method\") || \"fitBounds\"\n      }\n    })\n    this.dispatchEvent(event)\n  }\n}\n\nexport default LLatLngBounds\n","import { mapAddTo } from \"./events.js\"\n\nclass LImageOverlay extends HTMLElement {\n  static observedAttributes = [\"url\", \"bounds\", \"opacity\"]\n\n  constructor() {\n    super()\n    this.layer = null\n  }\n\n  connectedCallback() {\n    const url = this.getAttribute(\"url\")\n    const bounds = JSON.parse(this.getAttribute(\"bounds\"))\n    const options = {\n      opacity: parseFloat(this.getAttribute(\"opacity\") || \"1.0\"),\n      alt: this.getAttribute(\"alt\") || \"\"\n    }\n    this.layer = L.imageOverlay(url, bounds, options)\n    this.dispatchEvent(new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: this.layer\n      }\n    }))\n  }\n\n  attributeChangedCallback(name, _oldValue, newValue) {\n    if (this.layer !== null) {\n      if (name === \"url\") {\n        this.layer.setUrl(newValue)\n      } else if (name === \"bounds\") {\n        this.layer.setBounds(JSON.parse(newValue))\n      } else if (name === \"opacity\") {\n        this.layer.setOpacity(parseFloat(newValue))\n      }\n    }\n  }\n}\n\nexport default LImageOverlay\n","import { mapAddTo } from \"./events.js\"\n\nclass LVideoOverlay extends HTMLElement {\n  constructor() {\n    super()\n  }\n\n  connectedCallback() {\n    const url = JSON.parse(this.getAttribute(\"url\"))\n    const bounds = JSON.parse(this.getAttribute(\"bounds\"))\n    const options = {\n      opacity: parseFloat(this.getAttribute(\"opacity\") || \"1.0\"),\n      alt: this.getAttribute(\"alt\") || \"\",\n      autoplay: true,\n      muted: true,\n      playsInline: true\n    }\n    const layer = L.videoOverlay(url, bounds, options)\n    this.dispatchEvent(new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer\n      }\n    }))\n  }\n}\n\nexport default LVideoOverlay\n\n","import { mapAddTo } from \"./events.js\"\n\nclass LGeoJSON extends HTMLElement {\n  constructor() {\n    super()\n  }\n\n  connectedCallback() {\n    const layer = L.geoJSON(JSON.parse(this.getAttribute(\"geojson\")))\n    this.dispatchEvent(new CustomEvent(mapAddTo, {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        layer\n      }\n    }))\n  }\n}\n\nexport default LGeoJSON\n","// @ts-check\nimport LBaseLayers from \"./l-base-layers.js\";\nimport LControlLayers from \"./l-control-layers.js\"; \nimport LLayerGroup from \"./l-layer-group.js\"; \nimport LMap from \"./l-map.js\"; \nimport LMarker from \"./l-marker.js\"; \nimport LOverlayLayers from \"./l-overlay-layers.js\";\nimport LPopup from \"./l-popup.js\"; \nimport LTileLayer from \"./l-tile-layer.js\";\nimport LLatLngBounds from \"./l-lat-lng-bounds.js\";\nimport LImageOverlay from \"./l-image-overlay.js\";\nimport LVideoOverlay from \"./l-video-overlay.js\";\nimport LGeoJSON from \"./l-geojson.js\";\n\n\nconst init = (() => {\n  // Custom elements (order of definition is important)\n  customElements.define(\"l-map\", LMap)\n  customElements.define(\"l-control-layers\", LControlLayers)\n  customElements.define(\"l-base-layers\", LBaseLayers)\n  customElements.define(\"l-overlay-layers\", LOverlayLayers)\n  customElements.define(\"l-layer-group\", LLayerGroup)\n  customElements.define(\"l-tile-layer\", LTileLayer)\n  customElements.define(\"l-marker\", LMarker)\n  customElements.define(\"l-popup\", LPopup)\n  customElements.define(\"l-lat-lng-bounds\", LLatLngBounds)\n  customElements.define(\"l-image-overlay\", LImageOverlay)\n  customElements.define(\"l-video-overlay\", LVideoOverlay)\n  customElements.define(\"l-geojson\", LGeoJSON)\n})();\n\nexport default init;\n"],"names":["mapAddTo","popupAdd","LBaseLayers","_HTMLElement","call","this","_inheritsLoose","prototype","connectedCallback","addEventListener","ev","detail","_wrapNativeSuper","HTMLElement","LControlLayers","control","L","layers","_ev$detail","type","name","layer","addOverlay","addBaseLayer","preventDefault","event","CustomEvent","cancelable","bubbles","dispatchEvent","LLayerGroup","getAttribute","group","layerGroup","stopPropagation","addLayer","MutationObserver","mutations","forEach","mutation","removedNodes","node","leafletId","getLayer","removeLayer","observe","childList","LMap","_this","map","method","bounds","_this2","center","zoom","setView","JSON","parse","parseInt","addTo","remove","LMarker","_proto","latLng","opacity","parseFloat","marker","setAttribute","stamp","bindPopup","content","attributeChangedCallback","_oldValue","newValue","setLatLng","setOpacity","observedAttributes","LOverlayLayers","LPopup","LTileLayer","urlTemplate","attribution","tileLayer","LLatLngBounds","_name","LImageOverlay","url","options","alt","imageOverlay","setUrl","setBounds","LVideoOverlay","autoplay","muted","playsInline","videoOverlay","LGeoJSON","geoJSON","customElements","define"],"mappings":"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"}
+{"version":3,"file":"leaflet-html.umd.js","sources":["../src/events.js","../src/l-base-layers.js","../src/l-control-layers.js","../src/l-layer-group.js","../src/l-map.js","../src/l-marker.js","../src/l-overlay-layers.js","../src/l-popup.js","../src/l-tile-layer.js","../src/l-lat-lng-bounds.js","../src/l-image-overlay.js","../src/l-video-overlay.js","../src/l-geojson.js","../src/l-icon.js","../src/index.js"],"sourcesContent":["export const mapAddTo = \"map:addTo\";\nexport const popupAdd = \"popup:add\";\nexport const layerRemove = \"layer:remove\";\n","import { mapAddTo } from \"./events.js\";\n\nclass LBaseLayers extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    this.addEventListener(mapAddTo, (ev) => {\n      ev.detail[\"type\"] = \"base\";\n    });\n  }\n}\n\nexport default LBaseLayers;\n","import { mapAddTo } from \"./events.js\";\n\nclass LControlLayers extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const base = {};\n    const overlay = {};\n    const control = L.control.layers(base, overlay);\n\n    this.addEventListener(mapAddTo, (ev) => {\n      const { type, name, layer } = ev.detail;\n      if (type === \"overlay\") {\n        control.addOverlay(layer, name);\n      } else if (type === \"base\") {\n        control.addBaseLayer(layer, name);\n      }\n      ev.preventDefault();\n    });\n\n    const event = new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: control,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\nexport default LControlLayers;\n","import { mapAddTo } from \"./events.js\";\n\nclass LLayerGroup extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const name = this.getAttribute(\"name\");\n    const group = L.layerGroup();\n    const event = new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: group,\n        name,\n      },\n    });\n    this.dispatchEvent(event);\n\n    this.addEventListener(mapAddTo, (ev) => {\n      ev.stopPropagation();\n      group.addLayer(ev.detail.layer);\n    });\n\n    const observer = new MutationObserver(function (mutations) {\n      mutations.forEach((mutation) => {\n        mutation.removedNodes.forEach((node) => {\n          const leafletId = node.getAttribute(\"leaflet-id\");\n          const layer = group.getLayer(leafletId);\n          group.removeLayer(layer);\n        });\n      });\n    });\n    observer.observe(this, { childList: true });\n  }\n}\n\nexport default LLayerGroup;\n","// @ts-check\nimport { layerRemove, mapAddTo } from \"./events.js\";\n\nclass LMap extends HTMLElement {\n  constructor() {\n    super();\n\n    this.map = null;\n    this.addEventListener(\"map:bounds\", (ev) => {\n      const { bounds, method } = ev.detail;\n      this.map[method](bounds);\n    });\n  }\n\n  connectedCallback() {\n    this.map = L.map(this);\n    const center = this.getAttribute(\"center\");\n    const zoom = this.getAttribute(\"zoom\");\n    if (center !== null && zoom !== null) {\n      this.map.setView(JSON.parse(center), parseInt(zoom));\n    }\n    this.addEventListener(mapAddTo, (ev) => {\n      const layer = ev.detail.layer;\n      layer.addTo(this.map);\n    });\n\n    this.addEventListener(layerRemove, (ev) => {\n      this.map.remove(ev.detail.layer);\n    });\n  }\n}\n\nexport default LMap;\n","// @vitest-environment happy-dom\nimport * as L from \"leaflet\";\nimport { mapAddTo, popupAdd } from \"./events.js\";\n\nclass LMarker extends HTMLElement {\n  static observedAttributes = [\"lat-lng\", \"opacity\", \"icon\"];\n\n  constructor() {\n    super();\n    this.layer = null;\n    this.addEventListener(\"icon:add\", (ev) => {\n      ev.stopPropagation();\n      this.layer.setIcon(ev.detail.icon);\n    });\n  }\n\n  connectedCallback() {\n    const latLng = JSON.parse(this.getAttribute(\"lat-lng\"));\n    const opacity = parseFloat(this.getAttribute(\"opacity\") || \"1.0\");\n    this.layer = L.marker(latLng, { opacity });\n    if (this.hasAttribute(\"icon\")) {\n      const icon = L.icon(JSON.parse(this.getAttribute(\"icon\")));\n      this.layer.setIcon(icon);\n    }\n\n    this.setAttribute(\"leaflet-id\", L.stamp(this.layer));\n\n    this.addEventListener(popupAdd, (ev) => {\n      const { content } = ev.detail;\n      this.layer.bindPopup(content);\n    });\n\n    const event = new CustomEvent(mapAddTo, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        layer: this.layer,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  attributeChangedCallback(name, _oldValue, newValue) {\n    if (this.layer !== null) {\n      if (name === \"lat-lng\") {\n        this.layer.setLatLng(JSON.parse(newValue));\n      }\n      if (name === \"opacity\") {\n        this.layer.setOpacity(parseFloat(newValue));\n      }\n      if (name === \"icon\") {\n        this.layer.setIcon(L.icon(JSON.parse(newValue)));\n      }\n    }\n  }\n}\n\nif (import.meta.vitest) {\n  const { it, expect, beforeAll } = import.meta.vitest;\n\n  beforeAll(() => {\n    customElements.define(\"l-marker\", LMarker);\n  });\n\n  it(\"default icon\", () => {\n    const el = document.createElement(\"l-marker\");\n    document.body.appendChild(el);\n    let actual = el.layer.getIcon();\n    let expected = new L.Icon.Default();\n    expect(actual).toEqual(expected);\n  });\n\n  it(\"adds an icon\", () => {\n    const el = document.createElement(\"l-marker\");\n    // Set attribute before appendChild\n    el.setAttribute(\"icon\", JSON.stringify({ iconUrl: \"foo.png\" }));\n    document.body.appendChild(el);\n    let actual = el.layer.getIcon();\n    let expected = L.icon({ iconUrl: \"foo.png\" });\n    expect(actual).toEqual(expected);\n  });\n\n  it(\"changes an icon\", () => {\n    const el = document.createElement(\"l-marker\");\n    // Set attribute after appendChild\n    document.body.appendChild(el);\n    el.setAttribute(\"icon\", JSON.stringify({ iconUrl: \"bar.png\" }));\n    let actual = el.layer.getIcon();\n    let expected = L.icon({ iconUrl: \"bar.png\" });\n    expect(actual).toEqual(expected);\n  });\n}\n\nexport default LMarker;\n","import { mapAddTo } from \"./events.js\";\n\nclass LOverlayLayers extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    this.addEventListener(mapAddTo, (ev) => {\n      ev.detail[\"type\"] = \"overlay\";\n    });\n  }\n}\n\nexport default LOverlayLayers;\n","import { popupAdd } from \"./events.js\";\n\nclass LPopup extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const content = this.getAttribute(\"content\");\n    const event = new CustomEvent(popupAdd, {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        content,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\nexport default LPopup;\n","import { mapAddTo } from \"./events.js\";\n\nclass LTileLayer extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const name = this.getAttribute(\"name\");\n    const urlTemplate = this.getAttribute(\"url-template\");\n    const attribution = this.getAttribute(\"attribution\");\n    const options = { attribution };\n    const layer = L.tileLayer(urlTemplate, options);\n    const event = new CustomEvent(mapAddTo, {\n      detail: { name, layer },\n      bubbles: true,\n    });\n    this.dispatchEvent(event);\n  }\n}\n\nexport default LTileLayer;\n","class LLatLngBounds extends HTMLElement {\n  static observedAttributes = [\"bounds\"];\n\n  constructor() {\n    super();\n  }\n\n  attributeChangedCallback(_name, _oldValue, newValue) {\n    const event = new CustomEvent(\"map:bounds\", {\n      bubbles: true,\n      detail: {\n        bounds: JSON.parse(newValue),\n        method: this.getAttribute(\"method\") || \"fitBounds\",\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\nexport default LLatLngBounds;\n","import { mapAddTo } from \"./events.js\";\n\nclass LImageOverlay extends HTMLElement {\n  static observedAttributes = [\"url\", \"bounds\", \"opacity\"];\n\n  constructor() {\n    super();\n    this.layer = null;\n  }\n\n  connectedCallback() {\n    const url = this.getAttribute(\"url\");\n    const bounds = JSON.parse(this.getAttribute(\"bounds\"));\n    const options = {\n      opacity: parseFloat(this.getAttribute(\"opacity\") || \"1.0\"),\n      alt: this.getAttribute(\"alt\") || \"\",\n    };\n    this.layer = L.imageOverlay(url, bounds, options);\n    this.dispatchEvent(\n      new CustomEvent(mapAddTo, {\n        cancelable: true,\n        bubbles: true,\n        detail: {\n          layer: this.layer,\n        },\n      }),\n    );\n  }\n\n  attributeChangedCallback(name, _oldValue, newValue) {\n    if (this.layer !== null) {\n      if (name === \"url\") {\n        this.layer.setUrl(newValue);\n      } else if (name === \"bounds\") {\n        this.layer.setBounds(JSON.parse(newValue));\n      } else if (name === \"opacity\") {\n        this.layer.setOpacity(parseFloat(newValue));\n      }\n    }\n  }\n}\n\nexport default LImageOverlay;\n","import { mapAddTo } from \"./events.js\";\n\nclass LVideoOverlay extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const url = JSON.parse(this.getAttribute(\"url\"));\n    const bounds = JSON.parse(this.getAttribute(\"bounds\"));\n    const options = {\n      opacity: parseFloat(this.getAttribute(\"opacity\") || \"1.0\"),\n      alt: this.getAttribute(\"alt\") || \"\",\n      autoplay: true,\n      muted: true,\n      playsInline: true,\n    };\n    const layer = L.videoOverlay(url, bounds, options);\n    this.dispatchEvent(\n      new CustomEvent(mapAddTo, {\n        cancelable: true,\n        bubbles: true,\n        detail: {\n          layer,\n        },\n      }),\n    );\n  }\n}\n\nexport default LVideoOverlay;\n","import { mapAddTo } from \"./events.js\";\n\nclass LGeoJSON extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const layer = L.geoJSON(JSON.parse(this.getAttribute(\"geojson\")));\n    this.dispatchEvent(\n      new CustomEvent(mapAddTo, {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          layer,\n        },\n      }),\n    );\n  }\n}\n\nexport default LGeoJSON;\n","// @vitest-environment happy-dom\nimport * as L from \"leaflet\";\n\nconst camelCase = (kebab) => kebab.replace(/-./g, (x) => x[1].toUpperCase());\n\nclass LIcon extends HTMLElement {\n  constructor() {\n    super();\n    this.icon = null;\n  }\n\n  connectedCallback() {\n    const options = {};\n\n    // Strings\n    let keys = [\n      \"icon-url\",\n      \"icon-retina-url\",\n      \"shadow-url\",\n      \"shadow-retina-url\",\n      \"class-name\",\n    ];\n    keys.forEach((key) => {\n      if (this.hasAttribute(key)) {\n        options[camelCase(key)] = this.getAttribute(key);\n      }\n    });\n\n    // Points\n    let points = [\n      \"icon-anchor\",\n      \"icon-size\",\n      \"shadow-anchor\",\n      \"shadow-size\",\n      \"tooltip-anchor\",\n      \"popup-anchor\",\n    ];\n    points.forEach((key) => {\n      if (this.hasAttribute(key)) {\n        options[camelCase(key)] = JSON.parse(this.getAttribute(key));\n      }\n    });\n\n    if (this.hasAttribute(\"cross-origin\")) {\n      options.crossOrigin = this.getAttribute(\"cross-origin\") === \"true\";\n    }\n    this.icon = L.icon(options);\n\n    const event = new CustomEvent(\"icon:add\", {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        icon: this.icon,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\nif (import.meta.vitest) {\n  const { it, expect, beforeAll } = import.meta.vitest;\n\n  beforeAll(() => {\n    customElements.define(\"l-icon\", LIcon);\n  });\n\n  it(\"default\", () => {\n    const el = document.createElement(\"l-icon\");\n    document.body.appendChild(el);\n\n    let actual = el.icon;\n    let expected = L.icon();\n    expect(actual).toEqual(expected);\n  });\n\n  it(\"emits icon:add event\", async () => {\n    const el = document.createElement(\"l-icon\");\n    let promise = new Promise((resolve) => {\n      el.addEventListener(\"icon:add\", (ev) => {\n        resolve(ev.detail.icon);\n      });\n    });\n    document.body.appendChild(el);\n    let actual = await promise;\n    let expected = L.icon();\n    expect(actual).toEqual(expected);\n  });\n\n  it(\"options\", () => {\n    const el = document.createElement(\"l-icon\");\n    el.setAttribute(\"icon-url\", \"url.png\");\n    el.setAttribute(\"icon-retina-url\", \"retina.png\");\n    el.setAttribute(\"icon-size\", \"[0, 0]\");\n    el.setAttribute(\"icon-anchor\", \"[0, 0]\");\n    el.setAttribute(\"popup-anchor\", \"[0, 0]\");\n    el.setAttribute(\"tooltip-anchor\", \"[0, 0]\");\n    el.setAttribute(\"shadow-url\", \"urlShadow.png\");\n    el.setAttribute(\"shadow-retina-url\", \"retinaShadow.png\");\n    el.setAttribute(\"shadow-size\", \"[0, 0]\");\n    el.setAttribute(\"shadow-anchor\", \"[0, 0]\");\n    el.setAttribute(\"class-name\", \"foo\");\n    el.setAttribute(\"cross-origin\", \"true\");\n    document.body.appendChild(el);\n\n    let actual = el.icon;\n    let expected = L.icon({\n      iconUrl: \"url.png\",\n      iconRetinaUrl: \"retina.png\",\n      iconSize: [0, 0],\n      iconAnchor: [0, 0],\n      popupAnchor: [0, 0],\n      tooltipAnchor: [0, 0],\n      shadowUrl: \"urlShadow.png\",\n      shadowRetinaUrl: \"retinaShadow.png\",\n      shadowSize: [0, 0],\n      shadowAnchor: [0, 0],\n      className: \"foo\",\n      crossOrigin: true,\n    });\n    expect(actual).toEqual(expected);\n  });\n}\n\nexport default LIcon;\n","// @ts-check\nimport LBaseLayers from \"./l-base-layers.js\";\nimport LControlLayers from \"./l-control-layers.js\";\nimport LLayerGroup from \"./l-layer-group.js\";\nimport LMap from \"./l-map.js\";\nimport LMarker from \"./l-marker.js\";\nimport LOverlayLayers from \"./l-overlay-layers.js\";\nimport LPopup from \"./l-popup.js\";\nimport LTileLayer from \"./l-tile-layer.js\";\nimport LLatLngBounds from \"./l-lat-lng-bounds.js\";\nimport LImageOverlay from \"./l-image-overlay.js\";\nimport LVideoOverlay from \"./l-video-overlay.js\";\nimport LGeoJSON from \"./l-geojson.js\";\nimport LIcon from \"./l-icon.js\";\n\nconst init = (() => {\n  // Custom elements (order of definition is important)\n  customElements.define(\"l-map\", LMap);\n  customElements.define(\"l-control-layers\", LControlLayers);\n  customElements.define(\"l-base-layers\", LBaseLayers);\n  customElements.define(\"l-overlay-layers\", LOverlayLayers);\n  customElements.define(\"l-layer-group\", LLayerGroup);\n  customElements.define(\"l-tile-layer\", LTileLayer);\n  customElements.define(\"l-marker\", LMarker);\n  customElements.define(\"l-popup\", LPopup);\n  customElements.define(\"l-lat-lng-bounds\", LLatLngBounds);\n  customElements.define(\"l-image-overlay\", LImageOverlay);\n  customElements.define(\"l-video-overlay\", LVideoOverlay);\n  customElements.define(\"l-geojson\", LGeoJSON);\n  customElements.define(\"l-icon\", LIcon);\n})();\n\nexport default init;\n"],"names":["mapAddTo","popupAdd","LBaseLayers","_HTMLElement","call","this","_inheritsLoose","prototype","connectedCallback","addEventListener","ev","detail","_wrapNativeSuper","HTMLElement","LControlLayers","control","L","layers","_ev$detail","type","name","layer","addOverlay","addBaseLayer","preventDefault","event","CustomEvent","cancelable","bubbles","dispatchEvent","LLayerGroup","getAttribute","group","layerGroup","stopPropagation","addLayer","MutationObserver","mutations","forEach","mutation","removedNodes","node","leafletId","getLayer","removeLayer","observe","childList","LMap","_this","map","method","bounds","_this2","center","zoom","setView","JSON","parse","parseInt","addTo","remove","LMarker","setIcon","icon","_proto","latLng","opacity","parseFloat","marker","hasAttribute","setAttribute","stamp","bindPopup","content","attributeChangedCallback","_oldValue","newValue","setLatLng","setOpacity","observedAttributes","LOverlayLayers","LPopup","LTileLayer","urlTemplate","attribution","tileLayer","LLatLngBounds","_name","LImageOverlay","url","options","alt","imageOverlay","setUrl","setBounds","LVideoOverlay","autoplay","muted","playsInline","videoOverlay","LGeoJSON","geoJSON","camelCase","kebab","replace","x","toUpperCase","LIcon","key","crossOrigin","customElements","define"],"mappings":"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"}

package/docs/content/_index.md

@@ -5,6 +5,11 @@
 [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
 
@@ -47,9 +52,9 @@ The following is a live running example of Leaflet HTML.
   </l-control-layers>
 </l-map>
 
+The above application is represented in HTML using the following syntax.
 
 ```html
-<!-- Example -->
 <l-map center="[39.61, -105.02]" zoom="10">
   <l-control-layers>
     <l-base-layers>
@@ -59,7 +64,6 @@ The following is a live running example of Leaflet HTML.
         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>
@@ -82,3 +86,4 @@ The following is a live running example of Leaflet HTML.
 </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

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

package/docs/content/articles/basic.md

@@ -0,0 +1,115 @@
++++
+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=""
+/>
+<script
+  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+  crossorigin=""
+></script>
+...
+</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.js"
+  }
+}
+</script>
+```
+
+```html
+<script
+  type="module"
+  src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
+></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/icons.md

@@ -0,0 +1,35 @@
++++
+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"></l-icon>
+</l-marker>
+```
+
+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]"
+    icon='{"iconUrl": "icons/leaf-green.png"}'
+  ></l-marker>
+</l-map>

package/docs/content/articles/style.md

@@ -0,0 +1,14 @@
++++
+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/templates/article-page.html

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

package/docs/templates/article.html

@@ -0,0 +1,12 @@
+{% 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

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+
+  l-map {
+    display: block;
+    block-size: 40ch;
+    isolation: isolate;
+    z-index: 1;
+  }
+
+  body {
+    font-family: system-ui;
+    line-height: 1.6;
+  }
+
+  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;
+  }
+  </style>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        }
+      }
+    </script>
+    <script
+      type="module"
+      src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
+    ></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 %}
+</body>
+</html>

package/docs/templates/index.html

@@ -1,57 +1,6 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-
-  l-map {
-    display: block;
-    block-size: 40ch;
-    isolation: isolate;
-    z-index: 1;
-  }
-
-  body {
-    font-family: system-ui;
-    line-height: 1.6;
-  }
-
-  h1, h2 {
-    font-weight: 100;
-  }
-
-  pre {
-    padding-inline: 0.75rem;
-    padding-block: 0.5rem;
-    border-radius: 0.2rem;
-    overflow-x: scroll;
-  }
-
-  .wrapper {
-    inline-size: min(90%, 80ch);
-    margin-inline: auto;
-  }
-  </style>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-      crossorigin=""
-    />
-    <script
-      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-      crossorigin=""
-    ></script>
-    <script
-      type="module"
-      src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
-    ></script>
-</head>
-<body>
-<div class="wrapper">
+{% extends "base.html" %}
+{% block content %}
+<main>
 {{ section.content | safe }}
-</div>
-</body>
-</html>
+</main>
+{% endblock %}

package/example/geojson/index.html

@@ -15,6 +15,13 @@
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
       crossorigin=""
     ></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        }
+      }
+    </script>
     <script type="module" src="/src/index.js"></script>
     <style>
       * {

package/example/index.html

@@ -14,6 +14,13 @@
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
       crossorigin=""
     ></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        }
+      }
+    </script>
     <script
       src="/src/index.js"
       type="module"

package/example/overlays/index.html

@@ -15,6 +15,13 @@
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
       crossorigin=""
     ></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        }
+      }
+    </script>
     <script type="module" src="/src/index.js"></script>
     <style>
       * {

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "leaflet-html",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Leaflet expressed in HTML",
   "source": "src/index.js",
-  "main": "./dist/leaflet-html.js",
-  "umd:main": "./dist/leaflet-html.umd.js",
-  "exports": {
-    "module": "./dist/leaflet-html.js"
-  },
-  "module": "./dist/leaflet-html.esm.js",
+  "main": "./dist/leaflet-html.cjs",
+  "module": "./dist/leaflet-html.js",
   "author": "andrewgryan",
   "repository": {
     "type": "git",
@@ -18,9 +14,16 @@
   "license": "MIT",
   "scripts": {
     "build": "microbundle",
-    "watch": "microbundle watch"
+    "watch": "microbundle watch",
+    "test": "vitest"
   },
   "devDependencies": {
-    "microbundle": "^0.15.1"
+    "happy-dom": "^14.10.1",
+    "microbundle": "^0.15.1",
+    "prettier": "3.2.5",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "leaflet": "^1.9.4"
   }
 }

package/src/events.js

@@ -1,3 +1,3 @@
-export const mapAddTo = "map:addTo"
-export const popupAdd = "popup:add"
-export const layerRemove = "layer:remove"
+export const mapAddTo = "map:addTo";
+export const popupAdd = "popup:add";
+export const layerRemove = "layer:remove";

package/src/index.js

@@ -1,32 +1,33 @@
 // @ts-check
 import LBaseLayers from "./l-base-layers.js";
-import LControlLayers from "./l-control-layers.js"; 
-import LLayerGroup from "./l-layer-group.js"; 
-import LMap from "./l-map.js"; 
-import LMarker from "./l-marker.js"; 
+import LControlLayers from "./l-control-layers.js";
+import LLayerGroup from "./l-layer-group.js";
+import LMap from "./l-map.js";
+import LMarker from "./l-marker.js";
 import LOverlayLayers from "./l-overlay-layers.js";
-import LPopup from "./l-popup.js"; 
+import LPopup from "./l-popup.js";
 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";
-
+import LIcon from "./l-icon.js";
 
 const init = (() => {
   // Custom elements (order of definition is important)
-  customElements.define("l-map", LMap)
-  customElements.define("l-control-layers", LControlLayers)
-  customElements.define("l-base-layers", LBaseLayers)
-  customElements.define("l-overlay-layers", LOverlayLayers)
-  customElements.define("l-layer-group", LLayerGroup)
-  customElements.define("l-tile-layer", LTileLayer)
-  customElements.define("l-marker", LMarker)
-  customElements.define("l-popup", LPopup)
-  customElements.define("l-lat-lng-bounds", LLatLngBounds)
-  customElements.define("l-image-overlay", LImageOverlay)
-  customElements.define("l-video-overlay", LVideoOverlay)
-  customElements.define("l-geojson", LGeoJSON)
+  customElements.define("l-map", LMap);
+  customElements.define("l-control-layers", LControlLayers);
+  customElements.define("l-base-layers", LBaseLayers);
+  customElements.define("l-overlay-layers", LOverlayLayers);
+  customElements.define("l-layer-group", LLayerGroup);
+  customElements.define("l-tile-layer", LTileLayer);
+  customElements.define("l-marker", LMarker);
+  customElements.define("l-popup", LPopup);
+  customElements.define("l-lat-lng-bounds", LLatLngBounds);
+  customElements.define("l-image-overlay", LImageOverlay);
+  customElements.define("l-video-overlay", LVideoOverlay);
+  customElements.define("l-geojson", LGeoJSON);
+  customElements.define("l-icon", LIcon);
 })();
 
 export default init;

package/src/l-base-layers.js

@@ -1,16 +1,15 @@
-import { mapAddTo } from "./events.js"
+import { mapAddTo } from "./events.js";
 
 class LBaseLayers extends HTMLElement {
   constructor() {
-    super()
+    super();
   }
-  
+
   connectedCallback() {
     this.addEventListener(mapAddTo, (ev) => {
-      ev.detail["type"] = "base"
-    })
+      ev.detail["type"] = "base";
+    });
   }
 }
 
-export default LBaseLayers
-
+export default LBaseLayers;