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.
List of demos:
- leaflet-map (L.map)
- leaflet-marker (L.marker)
- leaflet-icon (L.icon)
- leaflet-divicon (L.divIcon)
- leaflet-tilelayer (L.tileLayer)
- leaflet-tilelayer-wms (L.tileLayer.wms)
- leaflet-circle (L.cirlce)
- leaflet-polyline (L.polyline)
- leaflet-polygon (L.polygon)
- leaflet-geolocation (part of L.map)
- leaflet-scale-control (L.control.scale)
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="../platform/platform.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 latitude="51.505" longitude="-0.09" zoom="13">
<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"
iconurl="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 latitude="77.6" longitude="12.95" zoom="12">
<leaflet-polygon color="#f00">
<leaflet-point latitude="77.5700" longitude="12.9700"> </leaflet-point>
<leaflet-point latitude="77.6034" longitude="13.0001"> </leaflet-point>
<leaflet-point latitude="77.6006" longitude="12.9547"> </leaflet-point>
</leaflet-polygon>
<leaflet-circle latitude="77.58" longitude="12.93"
radius="2000" color="#0a0" fillColor="#aa0" fillOpacity="0.5" fill="true"
</leaflet-circle>
<leaflet-polyline>
<leaflet-point latitude="77.6400" longitude="12.9100"> </leaflet-point>
<leaflet-point latitude="77.6229" longitude="12.9259"> </leaflet-point>
<leaflet-point latitude="77.6499" longitude="12.9699"> </leaflet-point>
<leaflet-point latitude="77.6119" longitude="12.9738"> </leaflet-point>
</leaflet-polyline>
<leaflet-circle latitude="77.64" longitude="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" maxZoom="6">
<leaflet-tilelayer
url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
minZoom="2" maxZoom="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" maxZoom="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="13"> </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="true">
</leaflet-scale-control>
</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.
Advanced demo of a custom component which uses data binding and geo location.