A web component for displaying a map with certain features using Leaflet.

Installation

npm i @inventage/leaflet-map

Usage

<script type="module">
  import '@inventage/leaflet-map';
</script>

<leaflet-map></leaflet-map>

Example

https://inventage-leaflet-map.glitch.me/

Properties

| Property | Attribute | Type | Default | | --------------------- | --------------------- | --------------------------- | -------- | | defaultZoom | defaultZoom | number | 16 | | detectRetina | detectRetina | boolean | true | | latitude | latitude | number | 47.38991 | | longitude | longitude | number | 8.51604 | | markers | markers | MarkerInformation[] | [] | | maxZoom | maxZoom | number | 19 | | radius | radius | number | 0 | | selectedMarker | selectedMarker | MarkerInformation \| null | null | | updateCenterOnClick | updateCenterOnClick | boolean | false |

Events

| Event | Type | Description | | ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | center-updated | CustomEvent<{ latitude: number; longitude: number; }> | Event transporting the latitude and longitude each time the map center has updated. | | map-ready | CustomEvent<{ map: Map; }> | Event transporting an leaflet map instance. Fires using the whenReady event of leaflet map. | | tiles-loading | CustomEvent<{ promise: Promise<void>; }> | Event transporting a promise, fires when the tiles layer starts loading tiles. The promise resolves once all tiles have loaded. |

CSS Custom Properties

| Property | Type | Description | Default | | -------------------------- | ------ | ------------------------------ | ------- | | --leaflet-map-min-height | Length | Min. height of the map element | 50vh |