leaflet-map is a web-component which provides access to the leaflet map JavaScript library via html elements.
Please have a look at the demo or the api documentation.
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.
For example use <leaflet-map latitude="51.505" longitude="-0.09" zoom="13"> </leaflet-map> to define the view and zoom level.Web-components are an emerging standard which is based on Custom Elements, Shadow DOM, HTML Imports and Web Animations. Polymer is a library which simplifies working with web-components. It includes a compatibility layer for browsers which do not yet support web-components natively, yet.
Make leaflet maps using declarative Polymer web components. To get started read the documentation or checkout the demo.
Install this web component using Bower:
bower install leaflet-map
Import the main component and start creating your map:
<head>
<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="leaflet-map.html">
<style>
html, body {
margin: 0;
height: 100%;
}
leaflet-map {
height: 100%;
}
</style>
</head>
<body>
<leaflet-map fit-to-markers>
<leaflet-marker longitude="77.2" latitude="28.4">
Marker I
</leaflet-marker>
<leaflet-circle longitude="77.2" latitude="28.4" radius="300">
Round
</leaflet-circle>
</leaflet-map>
</body>Although leaflet-map is still under heavy development, it is already fully usable.
List of demos:
- leaflet-map (L.map)
- leaflet-marker (L.marker)
- leaflet-icon (L.icon)
- leaflet-divicon (L.divicon) (since 0.0.1)
- leaflet-circle (L.circle) (since 0.3.0)
- leaflet-polygon (L.polygon) (since 0.3.0)
- leaflet-polyline (L.polyline) (since 0.3.0)
- leaflet-tilelayer (L.tileLayer)
- leaflet-tilelayer-wms (L.tileLayer.wms) (since 0.0.2)
- leaflet-scale-control (L.control.scale) (since 0.2.0)
- leaflet-geojson (since 0.4.0)
- leaflet-geolocation (part of L.map) (since 0.0.2)
Please have a look at the change log, for recent developments.
leaflet-map depends on webcomponentsjs in ../webcomponentsjs, Polymer in ../polymer and leaflet in ../leaflet. If you use bower, those will be installed automatically at the right locations.
Please note that the pages have to be accessed via a webserver. file://-urls are not supported.
Child elements like markers or layers will be initialized by the surrounding container (the map or a layer) by setting a "container" javascript property. Therefore the child element should define a _containerChanged method and use that as initializer. Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.