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.
- Use as a
<Marker>child.
| Name | Type | Default | Notes |
|---|---|---|---|
options |
PopupOptions | {} |
options to pass to the leaflet popup |
Enables clustering of child markers
- Use as a
<Map>child
| 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 |