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)

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 -->
<polymer-element name="geolocation-sample" noscript>
  <template>
    <style>
       :host { display: block; overflow: hidden} 
       :host leaflet-map {height:18em; width:99%; border: none}
    </style>

    <-- information text above the map -->
    <template if="{{!latitude}}">
        Location Unknown.
    </template>

    <template if="{{latitude}}">
        lat: {{latitude}}, lng: {{longitude}}, accuracy: {{accuracy}} meter
    </template>


    <leaflet-map>

      <-- request geo-location information -->
      <leaflet-geolocation enableHighAccuracy
        latitude="{{latitude}}" longitude="{{longitude}}" accuracy="{{accuracy}}"
      </leaflet-geolocation>


      <-- add marker, if location information is available -->
      <template if="{{latitude}}">
        <leaflet-marker latitude="{{latitude}}" longitude="{{longitude}}">
            I am within {{accuracy}} meters of this location.
        </leaflet-marker>

        <leaflet-circle latitude="{{latitude}}" longitude="{{longitude}}"
          radius="{{accuracy}}"color="#d00">
        </leaflet-circle>

      </template>

    </leaflet-map>

  </template>
</polymer-element>

<-- use our component -->
<geolocation-sample> </geolocation-sample>