Leaflet map as web component
HTML
Latest commit 3e38a25 Jan 19, 2017 @prtksxna prtksxna committed on GitHub Merge pull request #85 from tonimc/fixDocumentationDivIcon
Typo in leaflet-divicon component documentation
Permalink
Failed to load latest commit information.
.settings created new project using eclipse and bower Jun 29, 2014
.gitignore Merge branch 'master' of github.com:prtksxna/leaflet-map-component into Jul 15, 2014
.project dropped nhnb-prefix Jul 9, 2014
CHANGES.md prepared release of 1.2.0 Dec 29, 2015
README.md license: update year Mar 3, 2016
bower.json fixed jsdoc comment formating Jul 18, 2015
demo-advanced.html moved geolocation demo to main demo page May 23, 2015
demo-geojson.json example for geojson in combination with iron-ajax May 28, 2015
demo-header.html prepared release of 1.2.0 Dec 29, 2015
demo.html fixed icon-url spelling mistake (#45) Sep 29, 2015
leaflet-control.html fixed jsdoc comment formating Jul 18, 2015
leaflet-core.html Merge pull request #54 from stephen-marshall-moore/demo_urls_typos Dec 29, 2015
leaflet-draw.html Add leaflet-point dom-module Aug 1, 2015
leaflet-geojson.html fixed jsdoc comment formating Jul 18, 2015
leaflet-geolocation.html fixed jsdoc comment formating Jul 18, 2015
leaflet-import.html Merge branch 'master' of github.com:prtksxna/leaflet-map-component into Jul 15, 2014
leaflet-layer-group.html FIX: layer group typo bug Jan 5, 2016
leaflet-layer.html typo: remove extra character after script tag Mar 3, 2016
leaflet-map.html fixed jsdoc comment formating Jul 18, 2015
leaflet-marker.html Typo in leaflet-divicon component docymentation Jan 19, 2017
leaflet-popup.html support popups on all draw elements May 23, 2015
metadata.html added simple metadata for designer Aug 2, 2014
preview.png added preview image Jul 10, 2014

README.md

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.

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.

Quickstart Guide

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>

Status

Although leaflet-map is still under heavy development, it is already fully usable.

List of demos:

Please have a look at the change log, for recent developments.

Dependencies

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.

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 detached method to support removal of elements. The leaflet-marker element is a good template.

License

leaflet-map is based on polymer and leaflet. Small parts of leaflet, especially the api documentation, have been copied into leaflet-map files.

Copyright (c) 2014-2016 Hendrik Brummermann, Prateek Saxena

All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.