Skip to content

Components

Jump to bottom
Florian DIDIER edited this page Jan 8, 2022 · 8 revisions

Map

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>

Layer

UI

TileLayer

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>

Marker

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

Marker Icon

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>

Marker Div Icon

Represents a lightweight icon for markers that uses a simple

element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options ( https://leafletjs.com/reference.html#divicon).
  • 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>

Popup

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>

ToolTip

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>

Vector

Circle

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>

Polyline

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>

Polygon

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>

Rectangle

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>

Group

LayerGroup

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>

FeatureGroup

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>

GeoJson

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>

Overlay

ImageOverlay

Used to load and display a single image over specific bounds of the map ( https://leafletjs.com/reference.html#imageoverlay).

  • Methods
name description type
getInstance retrun leaflet ImageOverlay instance L.ImageOverlay
  • Props
name description type default
url URL of image string undefined
opacity opacity of the layer number 1
zIndex zIndex of the layer number 1
bounds bounds that this ImageOverlay covers Array []
options ImageOverlay option see leafletjs documentation Object {}
name Control layers display name string undefined
events List of events to listen Array []
  • Exemple:
<script>
    import { Map, TileLayer, ImageOverlay } 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 imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
    const imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
</script>

<Map options={mapOptions}>
    <TileLayer url={tileUrl}></TileLayer>
    <ImageOverlay url={imageUrl} bounds={imageBounds}></ImageOverlay>
</Map>

VideoOverlay

Used to load and display a video player over specific bounds of the map ( https://leafletjs.com/reference.html#videooverlay).

  • Methods
name description type
getInstance retrun leaflet VideoOverlay instance L.VideoOverlay
  • Props
name description type default
url URL of video string undefined
opacity opacity of the layer number 1
zIndex zIndex of the layer number 1
bounds bounds that this ImageOverlay covers Array []
options VideoOverlay option see leafletjs documentation Object {}
name Control layers display name string undefined
events List of events to listen Array []
  • Exemple:
<script>
    import { Map, TileLayer, VideoOverlay } 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 videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm';
    const videoBounds = [[ 32, -130], [ 13, -100]];
</script>

<Map options={mapOptions}>
    <TileLayer url={tileUrl}></TileLayer>
    <VideoOverlay url={videoUrl} bounds={videoBounds}></VideoOverlay>
</Map>

SvgOverlay

Used to load, display and provide DOM access to an SVG file over specific bounds of the map ( https://leafletjs.com/reference.html#svgoverlay).

  • Methods
name description type
getInstance retrun leaflet SVGOverlay instance L.SVGOverlay
  • Props
name description type default
svgProps Props to send to svg element Object {}
opacity opacity of the layer number 1
zIndex zIndex of the layer number 1
bounds bounds that this ImageOverlay covers Array []
options SVGOverlay option see leafletjs documentation Object {}
name Control layers display name string undefined
events List of events to listen Array []
  • Exemple:
<script>
    import { Map, TileLayer, SvgOverlay } 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 svgProps = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 200 200" };
    const svgBounds = [[ 32, -130], [ 13, -100]];
</script>

<Map options={mapOptions}>
    <TileLayer url={tileUrl}></TileLayer>
    <SvgOverlay {svgProps} bounds={svgBounds}>
      <rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>
    </SvgOverlay>
</Map>

Control

Zoom

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:
<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:
<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>

Layers

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.Layers 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:
<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";
</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>
Clone this wiki locally