Svelte Leaflet

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

Need a Svelte website built?

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

npm i -D @radiofrance/svelte-leaflet

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

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)

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)} />

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.

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

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

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

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

Enables clustering of child markers

Name	Type	Default	Notes
`options`	MarkerClusterGroupOptions	`{}`	MarkerClusterGroup options

Allows to draw lines on the map

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