A web component for displaying a map with certain features using Leaflet.
npm i @inventage/leaflet-map
<script type="module">
import '@inventage/leaflet-map';
</script>
<leaflet-map></leaflet-map>
https://inventage-leaflet-map.glitch.me/
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 |
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. |
Property | Type | Description | Default |
---|---|---|---|
--leaflet-map-min-height |
Length | Min. height of the map element | 50vh |