leaflet-element
v0.0.22
Published
*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com) JavaScript library via html elements.
Downloads
21
Readme
leaflet-map
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.
Quickstart Guide
Make leaflet maps using declarative web components. To get started read the documentation or checkout the demo.
Install this web component using npm:
npm i -S leaflet-elementImport the main component and start creating your map:
import 'leaflet-element' <head>
<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>Status
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.
Notes for implementing child elements
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 disconnectedCallback method that calls super.disconnectedCallback
to perform any necessary clean up. The leaflet-marker element is a good template.
License
See LICENSE file.
leaflet-map is based on leaflet. Small parts of leaflet, especially the api documentation, have been copied into leaflet-map files.