<leaflet-map> 1.0.0 was released on 2015-05-28. Please check out the change notes for breaking changes.

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.


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



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.



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


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

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"}'> 

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()">

    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)

Circles, polyline and polygons

Circles, polylines and polygons can be drawn on the map.

Hi, I am a polygon. Hi, I am a circle.

<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-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-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-circle longitude="77.64" latitude="12.93"
     radius="500" color="#0a0" fillColor="#077">


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.

Map source: Stendhal MMORPG

<leaflet-map latitude="78.8" longitude="-96" zoom="5" max-zoom="6">

        min-zoom="2" max-zoom="6" noWrap>

            Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>



Tile layer WMS

It is possible to display data from external WMS services as tile layers on the map.

Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox Weather data © 2012 IEM Nexrad

<leaflet-map latitude="40" longitude="-85" zoom="4">

        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>

        layers="nexrad-n0r-900913" format="image/png" transparent opacity="0.5">

            Weather data © 2012 IEM Nexrad




Leaflet events are converted into html events which originate from the component.

Center: 51.505, -0.091

<div id="eventout">Center: 51.505, -0.091</div>
<leaflet-map latitude="51.505" longitude="-0.091" zoom="8"> </leaflet-map>

    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; 

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>



Example of a GeoJSON layer, which is filled by an ajax request.

Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox

<leaflet-map latitude="0.3516" longitude="102.304" zoom="6">

        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>

    <template is="dom-bind">
      <iron-ajax url="demo-geojson.json" last-response="{{data}}" auto>
      <leaflet-geojson color="#FF0000" data="[[data]]"></leaflet-geojson>


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.