leaflet-html 0.2.1 → 0.3.0

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/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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"}
+{"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","// @ts-check\nimport { 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","// @ts-check\n/** @typedef {import(\"leaflet\").Layer} Layer */\nimport { control } from \"leaflet\";\nimport { mapAddTo } from \"./events.js\";\n\nclass LControlLayers extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    /** @type {{ [key: string]: Layer }} */\n    const base = {};\n    /** @type {{ [key: string]: Layer }} */\n    const overlay = {};\n    const controlLayers = control.layers(base, overlay);\n\n    this.addEventListener(mapAddTo, (ev) => {\n      const { type, name, layer } = ev.detail;\n      if (type === \"overlay\") {\n        controlLayers.addOverlay(layer, name);\n      } else if (type === \"base\") {\n        controlLayers.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: controlLayers,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\nexport default LControlLayers;\n","// @ts-check\nimport { layerGroup } from \"leaflet\";\nimport { 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 = 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          if (node instanceof HTMLElement) {\n            const leafletId = node.getAttribute(\"leaflet-id\");\n            if (leafletId !== null) {\n              const layer = group.getLayer(parseInt(leafletId));\n              if (typeof layer !== \"undefined\") {\n                group.removeLayer(layer);\n              }\n            }\n          }\n        });\n      });\n    });\n    observer.observe(this, { childList: true });\n  }\n}\n\nexport default LLayerGroup;\n","// @ts-check\nimport * as L from \"leaflet\";\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      if (this.map !== null) {\n        this.map[method](bounds);\n      }\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      if (this.map !== null) {\n        this.map.removeLayer(ev.detail.layer);\n      }\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","// @ts-check\nimport { 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","// @ts-check\nimport { 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","// @ts-check\nimport { tileLayer } from \"leaflet\";\nimport { 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    if (urlTemplate === null) {\n      return;\n    }\n    const options = {};\n    const key = \"attribution\";\n    if (this.hasAttribute(key)) {\n      options[key] = this.getAttribute(key);\n    }\n    const layer = 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","// @ts-check\nclass 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","// @ts-check\nimport { imageOverlay } from \"leaflet\";\nimport { 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    if (url === null) {\n      console.warn(\"attribute 'url' not set\");\n      return;\n    }\n    let bounds = this.getAttribute(\"bounds\");\n    if (bounds === null) {\n      console.warn(\"attribute 'bounds' not set\");\n      return;\n    }\n    const options = {\n      opacity: parseFloat(this.getAttribute(\"opacity\") || \"1.0\"),\n      alt: this.getAttribute(\"alt\") || \"\",\n    };\n    this.layer = imageOverlay(url, JSON.parse(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","// @ts-check\nimport { videoOverlay } from \"leaflet\";\nimport { 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 = 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","// @ts-check\nimport { geoJSON } from \"leaflet\";\nimport { mapAddTo } from \"./events.js\";\n\nclass LGeoJSON extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    const value = this.getAttribute(\"geojson\");\n    if (value !== null) {\n      const layer = geoJSON(JSON.parse(value));\n      this.dispatchEvent(\n        new CustomEvent(mapAddTo, {\n          bubbles: true,\n          cancelable: true,\n          detail: {\n            layer,\n          },\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","controlLayers","control","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","parseInt","removeLayer","observe","childList","LMap","_this","map","method","bounds","_this2","L","center","zoom","setView","JSON","parse","addTo","LMarker","setIcon","icon","_proto","latLng","opacity","parseFloat","marker","hasAttribute","setAttribute","stamp","bindPopup","content","attributeChangedCallback","_oldValue","newValue","setLatLng","setOpacity","observedAttributes","LOverlayLayers","LPopup","LTileLayer","urlTemplate","options","key","tileLayer","LLatLngBounds","_name","LImageOverlay","url","alt","imageOverlay","console","warn","setUrl","setBounds","LVideoOverlay","autoplay","muted","playsInline","videoOverlay","LGeoJSON","value","geoJSON","camelCase","kebab","replace","x","toUpperCase","LIcon","crossOrigin","customElements","define"],"mappings":"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"}

package/docs/content/articles/basic.md

@@ -46,11 +46,6 @@ the standard Leaflet assets should be included.
   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>
 ```
@@ -61,10 +56,20 @@ Leaflet-HTML is available via **npm** and **unpkg**.
 To get started quickly, use the CDN version available on **unpkg**.
 
 ```html
-<script
-  type="module"
-  src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
-></script>
+<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.

package/docs/content/articles/icons.md

@@ -17,9 +17,15 @@ 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>
+<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.
@@ -28,8 +34,14 @@ Both are supported, choose whichever is most convenient.
   <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-marker lat-lng="[51.5, -0.09]"><l-icon
+      icon-url="/leaflet-html/icons/leaf-green.png"
+      shadow-url="/leaflet-html/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/static/style.css

@@ -0,0 +1,45 @@
+@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;
+}
+
+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;
+}
+
+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/base.html

@@ -4,50 +4,26 @@
   <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="/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
-      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>
+    <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>
+    <script type="module">
+      import "leaflet-html";
+    </script>
 </head>
 <body>
 <nav>
@@ -55,5 +31,8 @@
   <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/example/geojson/index.html

@@ -10,11 +10,13 @@
       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-src.esm.js"
+        }
+      }
+    </script>
     <script type="module" src="/src/index.js"></script>
     <style>
       * {

package/example/index.html

@@ -9,11 +9,13 @@
       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-src.esm.js"
+        }
+      }
+    </script>
     <script
       src="/src/index.js"
       type="module"

package/example/overlays/index.html

@@ -10,11 +10,13 @@
       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-src.esm.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.1",
+  "version": "0.3.0",
   "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",
@@ -17,7 +13,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "microbundle --external leaflet",
+    "build": "microbundle",
     "watch": "microbundle watch",
     "test": "vitest"
   },

package/src/l-base-layers.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { mapAddTo } from "./events.js";
 
 class LBaseLayers extends HTMLElement {

package/src/l-control-layers.js

@@ -1,3 +1,6 @@
+// @ts-check
+/** @typedef {import("leaflet").Layer} Layer */
+import { control } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LControlLayers extends HTMLElement {
@@ -6,16 +9,18 @@ class LControlLayers extends HTMLElement {
   }
 
   connectedCallback() {
+    /** @type {{ [key: string]: Layer }} */
     const base = {};
+    /** @type {{ [key: string]: Layer }} */
     const overlay = {};
-    const control = L.control.layers(base, overlay);
+    const controlLayers = control.layers(base, overlay);
 
     this.addEventListener(mapAddTo, (ev) => {
       const { type, name, layer } = ev.detail;
       if (type === "overlay") {
-        control.addOverlay(layer, name);
+        controlLayers.addOverlay(layer, name);
       } else if (type === "base") {
-        control.addBaseLayer(layer, name);
+        controlLayers.addBaseLayer(layer, name);
       }
       ev.preventDefault();
     });
@@ -24,7 +29,7 @@ class LControlLayers extends HTMLElement {
       cancelable: true,
       bubbles: true,
       detail: {
-        layer: control,
+        layer: controlLayers,
       },
     });
     this.dispatchEvent(event);

package/src/l-geojson.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { geoJSON } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LGeoJSON extends HTMLElement {
@@ -6,16 +8,19 @@ class LGeoJSON extends HTMLElement {
   }
 
   connectedCallback() {
-    const layer = L.geoJSON(JSON.parse(this.getAttribute("geojson")));
-    this.dispatchEvent(
-      new CustomEvent(mapAddTo, {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          layer,
-        },
-      }),
-    );
+    const value = this.getAttribute("geojson");
+    if (value !== null) {
+      const layer = geoJSON(JSON.parse(value));
+      this.dispatchEvent(
+        new CustomEvent(mapAddTo, {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            layer,
+          },
+        }),
+      );
+    }
   }
 }
 

package/src/l-image-overlay.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { imageOverlay } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LImageOverlay extends HTMLElement {
@@ -10,12 +12,20 @@ class LImageOverlay extends HTMLElement {
 
   connectedCallback() {
     const url = this.getAttribute("url");
-    const bounds = JSON.parse(this.getAttribute("bounds"));
+    if (url === null) {
+      console.warn("attribute 'url' not set");
+      return;
+    }
+    let bounds = this.getAttribute("bounds");
+    if (bounds === null) {
+      console.warn("attribute 'bounds' not set");
+      return;
+    }
     const options = {
       opacity: parseFloat(this.getAttribute("opacity") || "1.0"),
       alt: this.getAttribute("alt") || "",
     };
-    this.layer = L.imageOverlay(url, bounds, options);
+    this.layer = imageOverlay(url, JSON.parse(bounds), options);
     this.dispatchEvent(
       new CustomEvent(mapAddTo, {
         cancelable: true,

package/src/l-lat-lng-bounds.js

@@ -1,3 +1,4 @@
+// @ts-check
 class LLatLngBounds extends HTMLElement {
   static observedAttributes = ["bounds"];
 

package/src/l-layer-group.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { layerGroup } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LLayerGroup extends HTMLElement {
@@ -7,7 +9,7 @@ class LLayerGroup extends HTMLElement {
 
   connectedCallback() {
     const name = this.getAttribute("name");
-    const group = L.layerGroup();
+    const group = layerGroup();
     const event = new CustomEvent(mapAddTo, {
       cancelable: true,
       bubbles: true,
@@ -26,9 +28,15 @@ class LLayerGroup extends HTMLElement {
     const observer = new MutationObserver(function (mutations) {
       mutations.forEach((mutation) => {
         mutation.removedNodes.forEach((node) => {
-          const leafletId = node.getAttribute("leaflet-id");
-          const layer = group.getLayer(leafletId);
-          group.removeLayer(layer);
+          if (node instanceof HTMLElement) {
+            const leafletId = node.getAttribute("leaflet-id");
+            if (leafletId !== null) {
+              const layer = group.getLayer(parseInt(leafletId));
+              if (typeof layer !== "undefined") {
+                group.removeLayer(layer);
+              }
+            }
+          }
         });
       });
     });

package/src/l-map.js

@@ -1,4 +1,5 @@
 // @ts-check
+import * as L from "leaflet";
 import { layerRemove, mapAddTo } from "./events.js";
 
 class LMap extends HTMLElement {
@@ -8,7 +9,9 @@ class LMap extends HTMLElement {
     this.map = null;
     this.addEventListener("map:bounds", (ev) => {
       const { bounds, method } = ev.detail;
-      this.map[method](bounds);
+      if (this.map !== null) {
+        this.map[method](bounds);
+      }
     });
   }
 
@@ -25,7 +28,9 @@ class LMap extends HTMLElement {
     });
 
     this.addEventListener(layerRemove, (ev) => {
-      this.map.remove(ev.detail.layer);
+      if (this.map !== null) {
+        this.map.removeLayer(ev.detail.layer);
+      }
     });
   }
 }

package/src/l-marker.js

@@ -11,7 +11,7 @@ class LMarker extends HTMLElement {
     this.addEventListener("icon:add", (ev) => {
       ev.stopPropagation();
       this.layer.setIcon(ev.detail.icon);
-    })
+    });
   }
 
   connectedCallback() {

package/src/l-overlay-layers.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { mapAddTo } from "./events.js";
 
 class LOverlayLayers extends HTMLElement {

package/src/l-popup.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { popupAdd } from "./events.js";
 
 class LPopup extends HTMLElement {

package/src/l-tile-layer.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { tileLayer } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LTileLayer extends HTMLElement {
@@ -8,9 +10,15 @@ class LTileLayer extends HTMLElement {
   connectedCallback() {
     const name = this.getAttribute("name");
     const urlTemplate = this.getAttribute("url-template");
-    const attribution = this.getAttribute("attribution");
-    const options = { attribution };
-    const layer = L.tileLayer(urlTemplate, options);
+    if (urlTemplate === null) {
+      return;
+    }
+    const options = {};
+    const key = "attribution";
+    if (this.hasAttribute(key)) {
+      options[key] = this.getAttribute(key);
+    }
+    const layer = tileLayer(urlTemplate, options);
     const event = new CustomEvent(mapAddTo, {
       detail: { name, layer },
       bubbles: true,