demo.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>leaflet-map web-component demo</title>
		<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
		<link rel="import" href="demo-header.html">
		<link rel="import" href="leaflet-map.html">
		<link rel="import" href="demo-advanced.html">
		<link rel="import" href="../iron-ajax/iron-ajax.html">

		<style type="text/css">
			body {
				height: 100%;
				margin: 0;
				font-family: sans-serif;
				background-color: #DDD;
			}
			
			#content, .announcement {
				max-width: 790px;
				background-color: #FFF;
				padding: 1em;
				margin: 0 auto;
				box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
			}
			
			.announcement {
				margin: 1em auto;
				border: 2px solid #0A0;
			}
			
			h2 {
				font-size: 1.8em;
				margin: 1.5em 0 0.5em -2px;
				font-weight: bold;
				padding: .2em .5em;
				background: #edeeef;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				color: #fff;
				background-color: #b0de5c;
				background-image: -moz-linear-gradient(top, #b0de5c, #82cb00);
				background-image: -o-linear-gradient(top, #b0de5c, #82cb00);
				background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00));
				background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00);
				background-image: linear-gradient(top, #b0de5c, #82cb00);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00');
				border-radius: 5px;
				text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
				box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
			}
			.nav {
				color: #000;
				text-decoration: none;
				border-bottom: 1px dashed #000;
				display: inline-block;
				padding: 3px;
			}
			.nav:hover {
				background-color: #DDF;
			}
			
			leaflet-map,
			geolocation-sample {
				max-width: 20em;
				height: 20em;
				border: 1px solid #aaa;
			}
			geolocation-sample {
				height: 21em;
			}
			pre {
				font-size: large;
				padding: 0.5em 1em;
				background-color: #DDD;
				clear: all;
			}
			.i {
				color: #00D
			}
			.a {
				color: #008;
			}
			.v {
				color: #800;
			}
			.c {
				color: #080;
			}
		</style>
	</head>
	<body>
	

<demo-header></demo-header>

<div class="announcement">

&lt;leaflet-map&gt; 1.0.0 was released on 2015-05-28. Please check out the <a href="https://github.com/leaflet-extras/leaflet-map/releases/tag/v1.0.0">change notes</a> for breaking changes.

</div>


<div id="content">

<p>Most of the options documented in the <a href="http://leafletjs.com/reference.html">Leaflet reference</a> are exported as html attributes. All events are mapped into html events of the same name.</p>


<h2 id="simple">Simple</h2>

<p>Creating a leaflet based map is as simple as adding a &lt;leaflet-map&gt; tag after two lines of boilerplate code to load the web component platform and import the leaflet-map component.</p>

<leaflet-map> </leaflet-map>

<pre class="html"><code>
&lt;<span class="i">script</span> <span class="a">src</span>="<span class="v">../webcomponentsjs/webcomponents-lite.min.js</span>"&gt;&lt;/<span class="i">script</span>&gt;
&lt;<span class="i">link</span> <span class="a">rel</span>="<span class="v">import</span>" <span class="a">href</span>="<span class="v">leaflet-map.html</span>"&gt;

&lt;<span class="i">leaflet-map</span>&gt; &lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="view">Initial View</h2>

<p>Like normal html elements, the map is configurable with attributes. Those attributes correspond to the option parameter of L.map as defined in the <a href="http://leafletjs.com/reference.html">leaflet documentation</a>. For example the initial view is defined as follows:</p>

<leaflet-map latitude="51.505" longitude="-0.09" zoom="13"> </leaflet-map>


<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">51.505</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">zoom</span>="<span class="v">13</span>"&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="marker">Marker</h2>

<p>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.</p>

<leaflet-map fit-to-markers>
	<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>

<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">fit-to-markers</span>&gt;

    &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.10</span>" <span class="a">title</span>="<span class="v">Transparent</span>"
        <span class="a">opacity</span>="<span class="v">0.6</span>"&gt;  &lt;/<span class="i">leaflet-marker</span>&gt;

    &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">title</span>="<span class="v">Popup Demo</span>"&gt; 
        &lt;<span class="i">b</span>&gt;Bold&lt;/<span class="i">b</span>&gt;
        &lt;<span class="i">p</span>&gt;Text&lt;/<span class="i">p</span>&gt;
    &lt;/<span class="i">leaflet-marker</span>&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="icon">Marker with custom icons</h2>

<p>Markers are based on formating templates called "icons". There are three ways to reference such an icon definition:</p> 


<leaflet-map latitude="51.505" longitude="-0.09" zoom="13">

	<leaflet-icon id="myicon" icon-url="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>
	<leaflet-marker latitude="51.5" longitude="-0.09" title="Icon json" icon='{"iconUrl": "https://stendhalgame.org/images/mapmarker/dungeon.png"}'> 
	</leaflet-marker>

	<leaflet-marker id="icon-reference" latitude="51.5" longitude="-0.08" title="Icon L.icon()">

	</leaflet-marker>
</leaflet-map>

<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>

<p>The template icon may be defined using &lt;leaflet-icon&gt; 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:</p>

<pre class="html"><code>
&lt;<span class="i">leaflet-icon</span> <span class="a">id</span>="<span class="v">myicon</span>" 
    <span class="a">icon-url</span>="<span class="v">https://stendhalgame.org/images/mapmarker/me.png</span>"&gt; &lt;<span class="i">/leaflet-icon</span>&gt;

&lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.10</span>" <span class="a">title</span>="<span class="v">Element</span>" <span class="a">icon</span>="<span class="v">myicon</span>"&gt;
&lt;/<span class="i">leaflet-marker</span>&gt;
	
</code></pre>

<p>Alternatively plain json is understood, too:</p>

<pre class="html"><code>
&lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">title</span>="<span class="v">Icon json</span>" 
    <span class="a">icon</span>='<span class="v">{"iconUrl": "https://stendhalgame.org/images/mapmarker/dungeon.png"}</span>'&gt; 
&lt;/<span class="i">leaflet-marker</span>&gt;

</code></pre>

<p>Last but not least, an instance of L.icon may be assigned:</p>

<pre class="html"><code>

&lt;<span class="i">leaflet-marker</span> <span class="a">id</span>="<span class="v">icon-ref</span>" <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.8</span>" <span class="a">title</span>="<span class="v">L.icon()</span>"&gt;
&lt;/<span class="i">leaflet-marker</span>&gt;

&lt;<span class="i">script</span>&gt;
    document.addEventListener("load", function() {
        var marker = document.getElementById("icon-ref");
        marker.icon = L.icon({
            "iconUrl": "https://stendhalgame.org/images/mapmarker/npc.png",
            "iconSize": L.point(26, 25),
            "iconAnchor": L.point(0, 0)
        });
    });
&lt;/<span class="i">script</span>&gt;

</code></pre>

<h2 id="vector">Circles, polyline and polygons</h2>

<p>Circles, polylines and polygons can be drawn on the map.</p>

<leaflet-map longitude="77.6" latitude="12.95" zoom="12">

	<leaflet-polygon color="#f00">
		<leaflet-point longitude="77.5700" latitude="12.9700"></leaflet-point>
		<leaflet-point longitude="77.6034" latitude="13.0001"></leaflet-point>
		<leaflet-point longitude="77.6006" latitude="12.9547"></leaflet-point>
		Hi, I am a <b>polygon</b>.
	</leaflet-polygon>

	<leaflet-circle longitude="77.58" latitude="12.9300"
		radius="2000" color="#0a0" fillColor="#aa0" fillopacity="0.5" fill="true">
		Hi, I am a <b>circle</b>.
	</leaflet-circle>

	<leaflet-polyline>
		<leaflet-point longitude="77.6400" latitude="12.9100"></leaflet-point>
		<leaflet-point longitude="77.6229" latitude="12.9259"></leaflet-point>
		<leaflet-point longitude="77.6499" latitude="12.9699"></leaflet-point>
		<leaflet-point longitude="77.6119" latitude="12.9738"></leaflet-point>
	</leaflet-polyline>

	<leaflet-circle longitude="77.64" latitude="12.9300"
		radius="500" color="#077">
	</leaflet-circle>

</leaflet-map>


<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">longitude</span>="<span class="v">77.6</span>" <span class="a">latitude</span>="<span class="v">12.95</span>" <span class="a">zoom</span>="<span class="v">12</span>"&gt;

  &lt;<span class="i">leaflet-polygon</span> <span class="a">color</span>="<span class="v">#f00</span>"&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.5700</span>" <span class="a">latitude</span>="<span class="v">12.9700</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6034</span>" <span class="a">latitude</span>="<span class="v">13.0001</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6006</span>" <span class="a">latitude</span>="<span class="v">12.9547</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;

     Hi, I am a &lt;<span class="i">b</span>&gt;polygon&lt;/<span class="i">b</span>&gt;.
  &lt;/<span class="i">leaflet-polygon</span>&gt;

  &lt;<span class="i">leaflet-circle</span> <span class="a">longitude</span>="<span class="v">77.58</span>" <span class="a">latitude</span>="<span class="v">12.93</span>"
     <span class="a">radius</span>="<span class="v">2000</span>" <span class="a">color</span>="<span class="v">#0a0</span>" <span class="a">fillColor</span>="<span class="v">#aa0</span>" <span class="a">fillOpacity</span>="<span class="v">0.5</span>" <span class="a">fill</span>="<span class="v">true</span>"
     
     Hi, I am a &lt;<span class="i">b</span>&gt;circle&lt;/<span class="i">b</span>&gt;.
  &lt;/<span class="i">leaflet-circle</span>&gt;

  &lt;<span class="i">leaflet-polyline</span>&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6400</span>" <span class="a">latitude</span>="<span class="v">12.9100</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6229</span>" <span class="a">latitude</span>="<span class="v">12.9259</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6499</span>" <span class="a">latitude</span>="<span class="v">12.9699</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
    &lt;<span class="i">leaflet-point</span> <span class="a">longitude</span>="<span class="v">77.6119</span>" <span class="a">latitude</span>="<span class="v">12.9738</span>"&gt; &lt;/<span class="i">leaflet-point</span>&gt;
  &lt;/<span class="i">leaflet-polyline</span>&gt;

  &lt;<span class="i">leaflet-circle</span> <span class="a">longitude</span>="<span class="v">77.64</span>" <span class="a">latitude</span>="<span class="v">12.93</span>"
     <span class="a">radius</span>="<span class="v">500</span>" <span class="a">color</span>="<span class="v">#0a0</span>" <span class="a">fillColor</span>="<span class="v">#077</span>"&gt;
  &lt;/<span class="i">leaflet-circle</span>&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="tilelayer">Tile layer</h2>

<p>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.</p>


<leaflet-map latitude="78.8" longitude="-96" zoom="5" min-zoom="2" max-zoom="6">
	<leaflet-tilelayer 
		url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
		min-zoom="2" max-zoom="6" no-wrap>

			Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>

	</leaflet-tilelayer>

</leaflet-map>


<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">78.8</span>" <span class="a">longitude</span>="<span class="v">-96</span>" <span class="a">zoom</span>="<span class="v">5</span>" <span class="a">max-zoom</span>="<span class="v">6</span>"&gt;

    &lt;<span class="i">leaflet-tilelayer</span> 
        <span class="a">url</span>="<span class="v">https://stendhalgame.org/map/3/{z}-{x}-{y}.png</span>"
        <span class="a">min-zoom</span>="<span class="v">2</span>" <span class="a">max-zoom</span>="<span class="v">6</span>" <span class="a">noWrap</span>&gt;

            Map source: &lt;<span class="i">a</span> <span class="a">href</span>="<span class="v">https://stendhalgame.org</span>"&gt;Stendhal MMORPG&lt;/<span class="i">a</span>&gt;

    &lt;/<span class="i">leaflet-tilelayer</span>&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="layerwms">Tile layer WMS</h2>

<p>It is possible to display data from external WMS services as tile layers on the map.</p>


<leaflet-map latitude="40" longitude="-85" zoom="4">

	<leaflet-tilelayer 
		url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" max-zoom="18">
			Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, 
			<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
			Imagery &copy; <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 &copy; 2012 IEM Nexrad

	</leaflet-tilelayer-wms>

</leaflet-map>


<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">40</span>" <span class="a">longitude</span>="<span class="v">-85</span>" <span class="a">zoom</span>="<span class="v">4</span>"&gt;

    &lt;<span class="i">leaflet-tilelayer</span> 
        <span class="a">url</span>="<span class="v">https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</span>" <span class="a">max-zoom</span>="<span class="v">19</span>"&gt;
          Map data &copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contr., 
          &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, 
          Imagery &copy; &lt;a href="http://mapbox.com">Mapbox&lt;/a&gt;
    &lt;/<span class="i">leaflet-tilelayer</span>&gt;

    &lt;<span class="i">leaflet-tilelayer-wms</span> 
        <span class="a">url</span>="<span class="v">https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi</span>"
        <span class="a">layers</span>="<span class="v">nexrad-n0r-900913</span>" <span class="a">format</span>="<span class="v">image/png</span>" <span class="a">transparent</span> <span class="a">opacity</span>="<span class="v">0.5</span>"&gt;

            Weather data &copy; 2012 IEM Nexrad

    &lt;/<span class="i">leaflet-tilelayer-wms</span>&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="event">Events</h2>

<p>Leaflet events are converted into html events which originate from the component.</p> 

 
<div id="eventout">Center: 51.505, -0.091</div>
<leaflet-map id="eventmap" latitude="51.505" longitude="-0.091" zoom="8"> </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>


<pre class="html"><code>
&lt;<span class="i">div</span> <span class="a">id</span>="<span class="v">eventout</span>"&gt;Center: 51.505, -0.091&lt;/<span class="i">div</span>&gt;
&lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">51.505</span>" <span class="a">longitude</span>="<span class="v">-0.091</span>" <span class="a">zoom</span>="<span class="v">8</span>"&gt; &lt;/<span class="i">leaflet-map</span>&gt;

&lt;<span class="i">script</span>&gt;
    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; 
    });
&lt;/<span class="i">script</span>&gt;

</code></pre>


<h2 id="scale">Scale control</h2>

<p>A scale control can be added and configured using &lt;leaflet-scale-control&gt;. By default it displays both metric and imperial units.</p>

<leaflet-map latitude="51.505" longitude="-0.09" zoom="6">
	<leaflet-scale-control position="topright" metric imperial>
	</leaflet-scale-control>
</leaflet-map>

<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">51.505</span>" <span class="a">longitude</span>="<span class="v">-0.09</span>" <span class="a">zoom</span>="<span class="v">13</span>"&gt;

    &lt;<span class="i">leaflet-scale-control</span> <span class="a">position</span>="<span class="v">topright</span>" <span class="a">metric</span> <span class="a">imperial</span>&gt;
    &lt;/<span class="i">leaflet-scale-control</span>&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="geojson">GeoJSON</h2>

<p>Example of a GeoJSON layer, which is filled by an ajax request.</p>

<leaflet-map longitude="102.304" latitude="0.3516" zoom="6">
	<leaflet-tilelayer 
		url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" maxZoom="18">
			Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, 
			<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
			Imagery &copy; <a href="http://mapbox.com">Mapbox</a>
	</leaflet-tilelayer>

	<template is="dom-bind">
		<iron-ajax url="demo-geojson.json" handle-as="json" auto last-response="{{data}}"></iron-ajax>
		<leaflet-geojson id="leafletgeojson" color="#FF0000" data="[[data]]"></leaflet-geojson>
	</template>
</leaflet-map>


<pre class="html"><code>
&lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">0.3516</span>" <span class="a">longitude</span>="<span class="v">102.304</span>" <span class="a">zoom</span>="<span class="v">6</span>"&gt;

    &lt;<span class="i">leaflet-tilelayer</span> 
        <span class="a">url</span>="<span class="v">https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</span>" <span class="a">max-zoom</span>="<span class="v">19</span>"&gt;
          Map data &copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contr., 
          &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, 
          Imagery &copy; &lt;a href="http://mapbox.com">Mapbox&lt;/a&gt;
    &lt;/<span class="i">leaflet-tilelayer</span>&gt;

    &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-bind</span>"&gt;
      &lt;<span class="i">iron-ajax</span> <span class="a">url</span>="<span class="v">demo-geojson.json</span>" <span class="a">last-response</span>="<span class="v">{{data}}</span>" <span class="a">auto</span>&gt;
      &lt;/<span class="i">iron-ajax</span>&gt;
      &lt;<span class="i">leaflet-geojson</span> <span class="a">color</span>="<span class="v">#FF0000</span>" <span class="a">data</span>="<span class="v">[[data]]</span>"&gt;&lt;/<span class="i">leaflet-geojson</span>&gt;
    &lt;/<span class="i">template</span>&gt;

&lt;/<span class="i">leaflet-map</span>&gt;

</code></pre>


<h2 id="databinding">Data binding and custom components</h2>

<p>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.</p>


<button id="advanceddemo-button">Show advanced demo</button>
<div id="advanceddemo-target"></div>

<template id=advanceddemo-template>
<geolocation-sample> </geolocation-sample>


<pre class="html"><code>
<span class="c">&lt;-- define geolocation-sample component --&gt;</span>
&lt;<span class="i">dom-module</span> <span class="a">id</span>="<span class="v">geolocation-sample</span>"&gt;
  &lt;<span class="i">template</span>&gt;
    &lt;<span class="i">style</span>&gt;
       :host { display: block; overflow: hidden} 
       :host leaflet-map {height:18em; width:99%; border: none}
    &lt;/<span class="i">style</span>&gt;

    <span class="c">&lt;-- information text above the map --&gt;</span>
    &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-if</span>" <span class="a">if</span>="<span class="v">{{!latitude}}</span>"&gt;
        Location Unknown.
    &lt;/<span class="i">template</span>&gt;

    &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-if</span>" <span class="a">if</span>="<span class="v">{{latitude}}</span>"&gt;
        lat: &lt;<span class="i">span</span>&gt;{{latitude}}&lt;/<span class="i">span</span>&gt;, 
        lng: &lt;<span class="i">span</span>&gt;{{longitude}}&lt;/<span class="i">span</span>&gt;, 
        accuracy: &lt;<span class="i">span</span>&gt;{{accuracy}}&lt;/<span class="i">span</span>&gt; meter
    &lt;/<span class="i">template</span>&gt;


    &lt;<span class="i">leaflet-map</span>&gt;

      <span class="c">&lt;-- request geo-location information --&gt;</span>
      &lt;<span class="i">leaflet-geolocation</span> <span class="a">enable-high-accuracy</span>
        <span class="a">latitude</span>="<span class="v">{{latitude}}</span>" <span class="a">longitude</span>="<span class="v">{{longitude}}</span>" <span class="a">accuracy</span>="<span class="v">{{accuracy}}</span>"
      &lt;/<span class="i">leaflet-geolocation</span>&gt;


      <span class="c">&lt;-- add marker, if location information is available --&gt;</span>
      &lt;<span class="i">template</span> <span class="a">is</span>="<span class="v">dom-if</span>" <span class="a">if</span>="<span class="v">{{latitude}}</span>"&gt;
        &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">{{latitude}}</span>" <span class="a">longitude</span>="<span class="v">{{longitude}}</span>"&gt;
            I am within &lt;<span class="i">span</span>&gt;{{accuracy}}&lt;/<span class="i">span</span>&gt; meters of this location.
        &lt;/<span class="i">leaflet-marker</span>&gt;

        &lt;<span class="i">leaflet-circle</span> <span class="a">latitude</span>="<span class="v">{{latitude}}</span>" <span class="a">longitude</span>="<span class="v">{{longitude}}</span>"
          <span class="a">radius</span>="<span class="v">{{accuracy}}</span>"<span class="a">color</span>="<span class="v">#d00</span>"&gt;
        &lt;/<span class="i">leaflet-circle</span>&gt;

      &lt;/<span class="i">template</span>&gt;

    &lt;/<span class="i">leaflet-map</span>&gt;

  &lt;/<span class="i">template</span>&gt;
&lt;/<span class="i">dom-module</span>&gt;

&lt;<span class="i">script</span>&gt;
  Polymer({
    is: "geolocation-sample"
  });
&lt;/<span class="i">script</span>&gt;

<span class="c">&lt;-- use our component --&gt;</span>
&lt;<span class="i">geolocation-sample</span>&gt; &lt;/<span class="i">geolocation-sample</span>&gt;

</code></pre>
</template>

<script>
document.getElementById("advanceddemo-button").addEventListener("click", function() {
	document.getElementById("advanceddemo-button").style.display = "none";
	var clone = document.importNode(document.getElementById("advanceddemo-template").content, true);
	document.getElementById("advanceddemo-target").appendChild(clone);
});
</script>

</div>
	</body>
</html>