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>