Skip to content

A library that wraps leaflet classes in domless/renderless svelte components

Notifications You must be signed in to change notification settings

radiofrance/svelte-leaflet

Repository files navigation

@radiofrance/svelte-leaflet

A library that wraps leaflet classes in domless/renderless svelte components.

Install

npm i -D @radiofrance/svelte-leaflet

Components

Map

Renders a map Leaflet Map. The Map will take up 100% of its container's height and width.

Attributes

Attribute Type Default Notes
options MapOptions {} Map options
tilesUrl string 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' more free tile services can be found at https://alexurquhart.github.io/free-tiles/
attribution string '©OpenStreetMap' (link to openstreetmap)

Events

All events are forwarded from the Map class, see the leaflet documentation for more information.

Example:

<Map {options} on:click={(e) => console.log(e.detail.latlng)} />

Marker

Add a marker to the map.

  • Can be used as a child of <Map> or <MarkerClusterGroup>
  • A <Popup> component can be passed as the Marker child to display a popup when the marker is clicked.
  • A component with slot="icon" attribute can be passed as the Marker child to display a custom icon.

Attributes

Name Type Default Notes
latlng LatLng required position of the marker
size number 25 icon size (only used with a custom icon)
id string '' an identifier to link the maker with you data

Events

All events are forwarded from the Marker class, see the leaflet documentation for more information.

Popup

<Popup> children will be displayed when the marker is clicked.

  • Use as a <Marker> child.

Attributes

Name Type Default Notes
options PopupOptions {} options to pass to the leaflet popup

MarkerClusterGroup

Enables clustering of child markers

  • Use as a <Map> child

Attributes

Name Type Default Notes
options MarkerClusterGroupOptions {} MarkerClusterGroup options

Polyline

Allows to draw lines on the map

Attributes

Name Type Default Notes
latlngs LatLng[] required array of points to draw the line
options PolylineOptions {} options to pass to the leaflet polyline

About

A library that wraps leaflet classes in domless/renderless svelte components

Resources

Stars

Watchers

Forks

Packages

No packages published