@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.

• https://leafletjs.com/reference.html#map-event

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.

• https://leafletjs.com/reference.html#marker-event

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