@inventage/leaflet-map

<leaflet-map>

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