Most of the options documented in the Leaflet reference are exported as html attributes. All events are mapped into html events of the same name.
Simple
Creating a leaflet based map is as simple as adding a <leaflet-map> tag after two lines of boilerplate code to load the web component platform and import the leaflet-map component.
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="leaflet-map.html">
<leaflet-map> </leaflet-map>
Initial View
Like normal html elements, the map is configurable with attributes. Those attributes correspond to the option parameter of L.map as defined in the leaflet documentation. For example the initial view is defined as follows:
<leaflet-map latitude="51.505" longitude="-0.09" zoom="13">
</leaflet-map>
Marker
Markers can be defined using html tags as well. The following examples creates a semi transparent marker on the left hand side. And a second marker with a popup on click.
Text
<leaflet-map fit-to-markers>
<leaflet-marker latitude="51.5" longitude="-0.10" title="Transparent"
opacity="0.6"> </leaflet-marker>
<leaflet-marker latitude="51.5" longitude="-0.09" title="Popup Demo">
<b>Bold</b>
<p>Text</p>
</leaflet-marker>
</leaflet-map>
Marker with custom icons
Markers are based on formating templates called "icons". There are three ways to reference such an icon definition:
The template icon may be defined using <leaflet-icon> elements. This is the prefered way. Please note that iconSize is mapped to the attributes iconWidth and iconHeight. iconAnchor is mapped to iconAnchorX and iconAnchorY and so on:
<leaflet-icon id="myicon"
icon-url="https://stendhalgame.org/images/mapmarker/me.png"> </leaflet-icon>
<leaflet-marker latitude="51.5" longitude="-0.10" title="Element" icon="myicon">
</leaflet-marker>
Alternatively plain json is understood, too:
<leaflet-marker latitude="51.5" longitude="-0.09" title="Icon json"
icon='{"iconUrl": "https://stendhalgame.org/images/mapmarker/dungeon.png"}'>
</leaflet-marker>
Last but not least, an instance of L.icon may be assigned:
<leaflet-marker id="icon-ref" latitude="51.5" longitude="-0.8" title="L.icon()">
</leaflet-marker>
<script>
document.addEventListener("load", function() {
var marker = document.getElementById("icon-ref");
marker.icon = L.icon({
"iconUrl": "https://stendhalgame.org/images/mapmarker/npc.png",
"iconSize": L.point(26, 25),
"iconAnchor": L.point(0, 0)
});
});
</script>
Circles, polyline and polygons
Circles, polylines and polygons can be drawn on the map.
<leaflet-map longitude="77.6" latitude="12.95" zoom="12">
<leaflet-polygon color="#f00">
<leaflet-point longitude="77.5700" latitude="12.9700"> </leaflet-point>
<leaflet-point longitude="77.6034" latitude="13.0001"> </leaflet-point>
<leaflet-point longitude="77.6006" latitude="12.9547"> </leaflet-point>
Hi, I am a <b>polygon</b>.
</leaflet-polygon>
<leaflet-circle longitude="77.58" latitude="12.93"
radius="2000" color="#0a0" fillColor="#aa0" fillOpacity="0.5" fill="true"
Hi, I am a <b>circle</b>.
</leaflet-circle>
<leaflet-polyline>
<leaflet-point longitude="77.6400" latitude="12.9100"> </leaflet-point>
<leaflet-point longitude="77.6229" latitude="12.9259"> </leaflet-point>
<leaflet-point longitude="77.6499" latitude="12.9699"> </leaflet-point>
<leaflet-point longitude="77.6119" latitude="12.9738"> </leaflet-point>
</leaflet-polyline>
<leaflet-circle longitude="77.64" latitude="12.93"
radius="500" color="#0a0" fillColor="#077">
</leaflet-circle>
</leaflet-map>
Tile layer
Custom tile layers, for example from online games can be defined using the leaflet-tilelayer element. If there is no explicit tilelayer defined, a default one will be used as shown in previous examples.
<leaflet-map latitude="78.8" longitude="-96" zoom="5" max-zoom="6">
<leaflet-tilelayer
url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
min-zoom="2" max-zoom="6" noWrap>
Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>
</leaflet-tilelayer>
</leaflet-map>
Tile layer WMS
It is possible to display data from external WMS services as tile layers on the map.
<leaflet-map latitude="40" longitude="-85" zoom="4">
<leaflet-tilelayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" max-zoom="19">
Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contr.,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
Imagery © <a href="http://mapbox.com">Mapbox</a>
</leaflet-tilelayer>
<leaflet-tilelayer-wms
url="https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi"
layers="nexrad-n0r-900913" format="image/png" transparent opacity="0.5">
Weather data © 2012 IEM Nexrad
</leaflet-tilelayer-wms>
</leaflet-map>
Events
Leaflet events are converted into html events which originate from the component.
<div id="eventout">Center: 51.505, -0.091</div>
<leaflet-map latitude="51.505" longitude="-0.091" zoom="8"> </leaflet-map>
<script>
var map = document.getElementById("eventmap");
map.addEventListener("moveend", function(e) {
var text = "Center: " + this.latitude.toFixed(3)
+ ", " + this.longitude.toFixed(3);
document.getElementById("eventout").textContent = text;
});
</script>
Scale control
A scale control can be added and configured using <leaflet-scale-control>. By default it displays both metric and imperial units.
<leaflet-map latitude="51.505" longitude="-0.09" zoom="13">
<leaflet-scale-control position="topright" metric imperial>
</leaflet-scale-control>
</leaflet-map>
GeoJSON
Example of a GeoJSON layer, which is filled by an ajax request.
<leaflet-map latitude="0.3516" longitude="102.304" zoom="6">
<leaflet-tilelayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" max-zoom="19">
Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contr.,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
Imagery © <a href="http://mapbox.com">Mapbox</a>
</leaflet-tilelayer>
<template is="dom-bind">
<iron-ajax url="demo-geojson.json" last-response="{{data}}" auto>
</iron-ajax>
<leaflet-geojson color="#FF0000" data="[[data]]"></leaflet-geojson>
</template>
</leaflet-map>
Data binding and custom components
Data binding can be used to create markers based on dynamic information, e. g. from the rows of a spreadsheet. In this example a new component is created which listens for location tracking information and sets a marker accordingly. A circle is used to indicate the range of uncertainty.
<-- define geolocation-sample component -->
<dom-module id="geolocation-sample">
<template>
<style>
:host { display: block; overflow: hidden}
:host leaflet-map {height:18em; width:99%; border: none}
</style>
<-- information text above the map -->
<template is="dom-if" if="{{!latitude}}">
Location Unknown.
</template>
<template is="dom-if" if="{{latitude}}">
lat: <span>{{latitude}}</span>,
lng: <span>{{longitude}}</span>,
accuracy: <span>{{accuracy}}</span> meter
</template>
<leaflet-map>
<-- request geo-location information -->
<leaflet-geolocation enable-high-accuracy
latitude="{{latitude}}" longitude="{{longitude}}" accuracy="{{accuracy}}"
</leaflet-geolocation>
<-- add marker, if location information is available -->
<template is="dom-if" if="{{latitude}}">
<leaflet-marker latitude="{{latitude}}" longitude="{{longitude}}">
I am within <span>{{accuracy}}</span> meters of this location.
</leaflet-marker>
<leaflet-circle latitude="{{latitude}}" longitude="{{longitude}}"
radius="{{accuracy}}"color="#d00">
</leaflet-circle>
</template>
</leaflet-map>
</template>
</dom-module>
<script>
Polymer({
is: "geolocation-sample"
});
</script>
<-- use our component -->
<geolocation-sample> </geolocation-sample>