-
Notifications
You must be signed in to change notification settings - Fork 1
Components
The central class of the API , it is used to create a map and manipulate it ( https://leafletjs.com/reference.html#map).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Map instance | L.Map |
- Props
name | description | type | default |
---|---|---|---|
options | Map option see leafletjs documentation | Object |
{} |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
</script>
<Map options={mapOptions} events={['click']} on:click={(e) => alert(e)}></Map>
Used to load and display tile layers on the map ( https://leafletjs.com/reference.html#tilelayer).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet tile instance | L.TileLayer |
- Props
name | description | type | default |
---|---|---|---|
url | URL template | string |
undefined |
opacity | opacity of the grid layer | number |
1 |
zIndex | zIndex of the grid layer | number |
1 |
wms | Used to display WMS services | boolean |
false |
options | TileLayer option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
</Map>
Used to load and display tile layers on the map ( https://leafletjs.com/reference.html#marker).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Marker instance | L.Marker |
- Props
name | description | type | default |
---|---|---|---|
url | URL template | string |
undefined |
latLng | geographical point with a certain latitude and longitude | L.latLng |
[0,0] |
icon | represents an icon to provide when creating a marker | L.icon |
L.Icon.Default |
opacity | opacity of the layer | number |
1 |
zIndexOffset | zIndex of the layer | number |
1 |
wms | Used to display WMS services | boolean |
false |
options | Marker option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Marker } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerLatLng = [40.6852119,-74.0788838];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Marker latLng={markerLatLng}></Marker>
</Map>
Represents an icon to provide when creating a marker. ( https://leafletjs.com/reference.html#icon ).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Icon instance | L.Icon |
- Props
name | description | type | default |
---|---|---|---|
options | Icon option see leafletjs documentation | Object |
{} |
- Exemple:
<script>
import { Map, TileLayer, Marker, Icon } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerLatLng = [40.6852119,-74.0788838];
const iconOption = {
iconUrl: 'https://leafletjs.com/docs/images/logo.png',
iconSize: [150, 60],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
};
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Marker latLng={markerLatLng}>
<Icon options="{iconOption}"></Icon>
</Marker>
</Map>
Represents a lightweight icon for markers that uses a simple
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Div Icon instance | L.DivIcon |
- Props
name | description | type | default |
---|---|---|---|
options | Div icon option see leafletjs documentation | Object |
{} |
- Exemple:
<script>
import { Map, TileLayer, Marker, DivIcon } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerLatLng = [40.6852119,-74.0788838];
const iconOption = {
iconSize: [130, 60],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
};
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Marker latLng={markerLatLng}>
<DivIcon options={iconOption}>
<h3>I'm div icon marker</h3>
</DivIcon>
</Marker>
</Map>
Used to open popups in certain places of the map ( https://leafletjs.com/reference.html#popup).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Popup instance | L.Popup |
- Props
name | description | type | default |
---|---|---|---|
latLng | geographical point with a certain latitude and longitude | L.latLng |
[0,0] |
options | Popup option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Marker, Popup } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerLatLng = [40.6852119,-74.0788838];
const popupMessage = "Statue of Liberty National Monument";
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Marker latLng={markerLatLng}>
<Popup>{popupMessage}</Popup>
</Marker>
</Map>
Used to display small texts on top of map layers ( https://leafletjs.com/reference.html#tooltip).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet ToolTip instance | L.ToolTip |
- Props
name | description | type | default |
---|---|---|---|
latLng | geographical point with a certain latitude and longitude | L.latLng |
[0,0] |
options | ToolTip option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Marker, Tooltip } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerLatLng = [40.6852119,-74.0788838];
const toolTipMessage = "Statue of Liberty National Monument";
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Marker latLng={markerLatLng}>
<Tooltip>{toolTipMessage}</Tooltip>
</Marker>
</Map>
Layer for drawing circle on the map ( https://leafletjs.com/reference.html#circle).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Circle instance | L.Circle |
- Props
name | description | type | default |
---|---|---|---|
latLng | geographical point with a certain latitude and longitude | L.latLng |
[0,0] |
radius | radius of the circle | number |
10 |
style | appearance of a Path | Object |
https://leafletjs.com/reference.html#path-option |
marker | Used to display Circle marker | boolean |
false |
options | Circle option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Circle } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const circleLatLng= [40.6852119,-74.0788838];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Circle latLng={circleLatLng}></Circle>
</Map>
Layer for drawing polyline on the map ( https://leafletjs.com/reference.html#polyline).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Polyline instance | L.Polyline |
- Props
name | description | type | default |
---|---|---|---|
latLngs | multi-dimensional array, array of arrays of geographic points | Array |
[] |
style | appearance of a Path | Object |
https://leafletjs.com/reference.html#path-option |
options | Polyline option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Polyline } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Polyline latLngs={latlngs}></Polyline>
</Map>
Layer for drawing polygon on the map ( https://leafletjs.com/reference.html#polygon).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Polygon instance | L.Polygon |
- Props
name | description | type | default |
---|---|---|---|
latLngs | multi-dimensional array, array of arrays of geographic points | Array |
[] |
style | appearance of a Path | Object |
https://leafletjs.com/reference.html#path-option |
options | Polygon option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Polygon } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Polygon latLngs={latlngs}></Polygon>
</Map>
Layer for drawing rectangle on the map ( https://leafletjs.com/reference.html#rectangle).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Rectangle instance | L.Rectangle |
- Props
name | description | type | default |
---|---|---|---|
bounds | rectangle bounds | Array |
[] |
style | appearance of a Path | Object |
https://leafletjs.com/reference.html#path-option |
options | Rectangle option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, Rectangle } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const bounds = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Rectangle bounds={bounds}></Rectangle>
</Map>
Used to group several layers and handle them as one. If you add it to the map, any layers added or removed from the group will be added/removed on the map as well ( https://leafletjs.com/reference.html#layergroup).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet LayerGroup instance | L.LayerGroup |
- Props
name | description | type | default |
---|---|---|---|
zIndex | zIndex of the grid layer | number |
1 |
options | LayerGroup option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, LayerGroup, Marker } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerlatLng1 = [56.1210604, -3.021240];
const markerlatLng2 = [60.1210604, -8.021240];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<LayerGroup>
<Marker latLng={markerlatLng1}></Marker>
<Marker latLng={markerlatLng2}></Marker>
</LayerGroup>
</Map>
Extended LayerGroup that makes it easier to do the same thing to all its member layers:
- bindPopup binds a popup to all of the layers at once (likewise with bindTooltip)
- Events are propagated to the FeatureGroup, so if the group has an event handler, it will handle events from any of the layers. This includes mouse events and custom events.
- Has layeradd and layerremove events
( https://leafletjs.com/reference.html#featuregroup)
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet FeatureGroup instance | L.FeatureGroup |
- Props
name | description | type | default |
---|---|---|---|
zIndex | zIndex of the grid layer | number |
1 |
style | appearance of a Path | Object |
https://leafletjs.com/reference.html#path-option |
options | FeatureGroup option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, FeatureGroup, Marker, Popup } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const markerlatLng1 = [56.1210604, -3.021240];
const markerlatLng2 = [60.1210604, -8.021240];
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<FeatureGroup>
<Marker latLng={markerlatLng1}></Marker>
<Marker latLng={markerlatLng2}></Marker>
<Popup>I'm bind on all markers</Popup>
</FeatureGroup>
</Map>
Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup ( https://leafletjs.com/reference.html#geojson).
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet GeoJson instance | L.GeoJson |
- Props
name | description | type | default |
---|---|---|---|
data | array of GeoJSON object | Array |
[] |
zIndex | zIndex of the grid layer | number |
1 |
style | appearance of a Path | Object |
https://leafletjs.com/reference.html#path-option |
options | GeoJson option see leafletjs documentation | Object |
{} |
name | Control layers display name | string |
undefined |
events | List of events to listen | Array |
[] |
- Exemple:
<script>
import { Map, TileLayer, GeoJson, Popup } from 'svelte-map-leaflet'
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const geoJsonData = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama", "color" : "green"},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696]]]}},
{"type":"Feature","id":"02","properties":{"name":"Alaska","color" : "blue"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-131.602021,55.117982],[-177.964321,51.651078],[-178.123152,51.919448]]],[[[-187.107557,52.992929],[-187.293773,52.927205],[-187.304726,52.823143],[-188.90491,52.762897],[-188.642017,52.927205],[-188.642017,53.003883],[-187.107557,52.992929]]]]}},
]}
const geoJsonOption = {
style: function (feature) {
return {color: feature.properties.color};
}
}
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<GeoJson data={geoJsonData} options={geoJsonOption}>
<Popup>
I'm bind on all Polygon
</Popup>
</GeoJson>
</Map>
//TODO
//TODO
//TODO
A basic zoom control with two buttons (zoom in and zoom out). It is put on the map by default unless you set its zoomControl option to false ( https://leafletjs.com/reference.html#control-zoom)
- Methods
name | description | type |
---|---|---|
getInstance | retrun leaflet Control.Zoom instance | L.Control.Zoom |
- Props
name | description | type | default |
---|---|---|---|
options | Control.Zoom option see leafletjs documentation | Object |
{} |
position | position of the control on map | string |
'topleft' |
- Exemple:
<script>
import { Map, TileLayer, Zoom } from 'svelte-map-leaflet';
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10, zoomControl: false};
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const zoomOption = {zoomInText: 'ZI', zoomOutText: 'ZO'};
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Zoom options={zoomOption}></Zoom>
</Map>
***
### Scale
A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems ( https://leafletjs.com/reference.html#control-scale)
* Methods
| name | description | type|
|:----:|:-----------:|:----:|
| **getInstance** | retrun leaflet Control.Scale instance | `L.Control.Scale` |
* Props
| name | description | type | default |
|:----:|:-----------:|:----:|:-------:|
| **options** | Control.Scale option see leafletjs documentation | `Object` | `{}` |
| **position** | position of the control on map | `string` | `'bottomleft'` |
* Exemple:
```svelte
<script>
import { Map, TileLayer, Scale } from 'svelte-map-leaflet';
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10 };
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const scaleOption = {maxWidth: 400, imperial: false};
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Scale options={scaleOption}></Scale>
</Map>
***
### Attribution
The attribution control allows you to display attribution data in a small text box on a map. It is put on the map by default unless you set its attributionControl option to false ( https://leafletjs.com/reference.html#control-attribution)
* Methods
| name | description | type|
|:----:|:-----------:|:----:|
| **getInstance** | retrun leaflet Control.Attribution instance | `L.Control.Attribution` |
* Props
| name | description | type | default |
|:----:|:-----------:|:----:|:-------:|
| **prefix** | text before the attributions | `string` | `'Leaflet'` |
| **position** | position of the control on map | `string` | `'botttomright'` |
* Exemple:
```svelte
<script>
import { Map, TileLayer, Attribution } from 'svelte-map-leaflet';
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10, attributionControl: false };
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const attributionPrefix = "svelte-leaflet";
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Attribution prefix={attributionPrefix}></Attribution>
</Map>
***
### Layer
The layers control gives users the ability to switch between different base layers and switch overlays on/off ( https://leafletjs.com/reference.html#control-layers)
* Methods
| name | description | type|
|:----:|:-----------:|:----:|
| **getInstance** | retrun leaflet Control.Scale instance | `L.Control.Layers` |
* Props
| name | description | type | default |
|:----:|:-----------:|:----:|:-------:|
| **options** | Control.Layers option see leafletjs documentation | `Object` | `{}` |
| **position** | position of the control on map | `string` | `'bottomleft'` |
* Exemple:
```svelte
<script>
import { Map, TileLayer, Layers, Overlay, BaseLayer, Marker, Circle, LayerGroup } from 'svelte-map-leaflet';
const mapOptions = { center: [40.6852119,-74.0788838], zoom: 10 };
const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const scaleOption = {maxWidth: 400, imperial: false};
</script>
<Map options={mapOptions}>
<TileLayer url={tileUrl}></TileLayer>
<Layers>
<Overlay>
<Marker name="Marker 1" latLng={[56.1210604, -3.021240]}></Marker>
<Marker name="Marker 2" latLng={[60.1210604, -8.021240]}></Marker>
</Overlay>
<BaseLayer>
<Circle name="Display circle" latLng={[42.1210604, -9.021240]} radius={10}></Circle>
<LayerGroup name="Display group of layers">
<Marker latLng={[48.1210604, -5.021240]}></Marker>
<Circle latLng={[46.1210604, -5.021240]} radius={10}></Circle>
</LayerGroup>
</BaseLayer>
</Layers>
</Map>
***