Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@inventage/leaflet-map

0.7.0 • Public • Published

undraw.co map illustration

<leaflet-map>


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

made with open-wc Main Workflow npm version

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

Install

npm i @inventage/leaflet-map

DownloadsWeekly Downloads

14

Version

0.7.0

License

MIT

Unpacked Size

40 kB

Total Files

14

Last publish

Collaborators

  • avatar
  • avatar
  • avatar