This is a demo page for the web-component wrapper of leaflet.
At this time the following elements are defined:
Most of the options documented in the Leaflet reference for those objects are exported as html attributes. For example use <leaflet-map latitude="51.505" longitude="-0.09" zoom="13"> </leaflet-map> to define the view and zoom level.
All events are mapped into html events of the same name.
Creating a leaflet based map is as simple as adding a <leaflet-map> tag after two lines of boilerplate code to load the web component platform and import the leaflet-map component.
<script src="../platform/platform.js"></script>
<link rel="import" href="leaflet-map.html">
<leaflet-map> </leaflet-map>
Like normal html elements, the map is configurable with attributes. Those attributes correspond to the option parameter of L.map as defined in the leaflet documentation. For example the initial view is defined as follows:
<leaflet-map latitude="51.505" longitude="-0.09" zoom="13">
</leaflet-map>
Markers can be defined using html tags as well. The following examples creates a semi transparent marker on the left hand side. And a second marker with a popup on click.
Text
<leaflet-map latitude="51.505" longitude="-0.09" zoom="13">
<leaflet-marker latitude="51.5" longitude="-0.10" title="Transparent" opacity="0.6">
</leaflet-marker>
<leaflet-marker latitude="51.5" longitude="-0.09" title="Popup Demo">
<b>Bold</b>
<p>Text</p>
</leaflet-marker>
</leaflet-map>
Markers are based on formating templates called "icons". There are three ways to reference such an icon definition:
The template icon may be defined using <leaflet-icon> elements. This is the prefered way. Please note that iconSize is mapped to the attributes iconWidth and iconHeight. iconAnchor is mapped to iconAnchorX and iconAnchorY and so on:
<leaflet-icon id="myicon" iconurl="https://stendhalgame.org/images/mapmarker/me.png"> </leaflet-icon>
<leaflet-marker latitude="51.5" longitude="-0.10" title="Icon element reference" icon="myicon">
</leaflet-marker>
Alternatively plain json is understood, too:
<leaflet-marker latitude="51.5" longitude="-0.09" title="Icon json"
icon='{"iconUrl": "https://stendhalgame.org/images/mapmarker/dungeon.png"}'>
</leaflet-marker>
Last but not least, an instance of L.icon may be assigned:
<leaflet-marker id="icon-reference" latitude="51.5" longitude="-0.8" title="Icon L.icon()">
</leaflet-marker>
<script>
document.addEventListener("load", function() {
var marker = document.getElementById("icon-reference");
marker.icon = L.icon({
"iconUrl": "https://stendhalgame.org/images/mapmarker/npc.png",
"iconSize": L.point(26, 25),
"iconAnchor": L.point(0, 0)
});
});
</script>
Custom tile layers, for example from online games can be defined using the leaflet-tilelayer element. If there is no explicit tilelayer defined, a default one will be used as shown in previous examples.
<leaflet-map latitude="78.8" longitude="-96" zoom="5" maxZoom="6">
<leaflet-tilelayer
url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
minZoom="2" maxZoom="6" noWrap>
Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>
</leaflet-tilelayer>
</leaflet-map>
It is possible to display data from external WMS services as tile layers on the map.
<leaflet-map latitude="40" longitude="-85" zoom="4">
<leaflet-tilelayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" maxZoom="19">
Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
Imagery © <a href="http://mapbox.com">Mapbox</a>
</leaflet-tilelayer>
<leaflet-tilelayer-wms
url="https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi"
layers="nexrad-n0r-900913" format="image/png" transparent opacity="0.5">
Weather data © 2012 IEM Nexrad
</leaflet-tilelayer-wms>
</leaflet-map>
Leaflet events are converted into html events which originate from the component.
<div id="eventout">Center: 51.505, -0.091</div>
<leaflet-map latitude="51.505" longitude="-0.091" zoom="13"> </leaflet-map>
<script>
var map = document.getElementById("eventmap");
map.addEventListener("moveend", function(e) {
var text = "Center: " + this.latitude.toFixed(3) + ", " + this.longitude.toFixed(3);
document.getElementById("eventout").textContent = text;
});
</script>
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.
<-- define geolocation-sample component -->
<polymer-element name="geolocation-sample" noscript>
<template>
<-- 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>
</template>
</leaflet-map>
</template>
</polymer-element>
<-- use our component -->
<geolocation-sample> </geolocation-sample>