added support for leaflet-scale-control

CHANGES.md

@@ -1,6 +1,7 @@
 v0.2.0
 ======
 * changed dependency from leaflet_bower to leaflet (which is available on bower, too)
+* added support for leaflet-scale-control
 
 v0.1.1
 ======
@@ -12,14 +13,14 @@ v0.1.0
 
 r0.0.2
 ======
-* added support for nhnb-leaflet-geolocation
-* added support for nhnb-leaflet-tilelayer-wms
+* added support for leaflet-geolocation
+* added support for leaflet-tilelayer-wms
 * added demonstration of data binding in a custom component
 * chsanged property names to camelCase (attributes are case insensitive) 
 
 r0.0.1
 ======
-* added support for nhnb-leaflet-divicon
+* added support for leaflet-divicon
 * fixed events from markers
 * added documentation for events
 

README.md

@@ -24,6 +24,7 @@ At this time the following elements are defined:
 * leaflet-marker (L.marker)
 * leaflet-icon (L.icon)
 * leaflet-divicon (L.divicon) (since 0.0.1)
+* leaflet-scale-control (L.control.scale) (since 0.2.0)
 * leaflet-tilelayer (L.tileLayer)
 * leaflet-tilelayer-wms (L.tileLayer.wms)  (since 0.0.2)
 

demo-advanced.html

@@ -105,6 +105,7 @@ <h1>Advanced demo of Leaflet web-component</h1>
 <li> <a class="nav" href="demo.html#marker">leaflet-marker</a> (L.marker)
 <li> <a class="nav" href="demo.html#icon">leaflet-icon</a> (L.icon)
 <li> <a class="nav" href="demo.html#icon">leaflet-divicon</a> (L.divIcon)
+<li> <a class="nav" href="demo.html#scale">leaflet-scale-control</a> (L.control.scale)
 <li> <a class="nav" href="demo.html#tilelayer">leaflet-tilelayer</a> (L.tileLayer)
 <li> <a class="nav" href="demo.html#layerwms">leaflet-tilelayer-wms</a> (L.tileLayer.wms)
 </ul>

demo.html

@@ -103,6 +103,7 @@ <h1>Demo of Leaflet web-component</h1>
 <li> <a class="nav" href="demo.html#marker">leaflet-marker</a> (L.marker)
 <li> <a class="nav" href="demo.html#icon">leaflet-icon</a> (L.icon)
 <li> <a class="nav" href="demo.html#icon">leaflet-divicon</a> (L.divIcon)
+<li> <a class="nav" href="demo.html#scale">leaflet-scale-control</a> (L.control.scale)
 <li> <a class="nav" href="demo.html#tilelayer">leaflet-tilelayer</a> (L.tileLayer)
 <li> <a class="nav" href="demo.html#layerwms">leaflet-tilelayer-wms</a> (L.tileLayer.wms)
 </ul>
@@ -364,6 +365,38 @@ <h2 id="event">Events</h2>
 
 
 
+
+<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="13">
+	<leaflet-scale-control position="topright" metric="true">
+	</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-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="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. 

leaflet-map.html

@@ -660,6 +660,104 @@
 
 
 
+<!--
+Scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. (<a href="http://leafletjs.com/reference.html#control-scale">Leaflet Reference</a>).
+
+##### Example
+
+	<leaflet-scale-control> </leaflet-scale-control>
+	
+##### Example
+
+	<leaflet-scale-control imperial="false">
+	</leaflet-scale-control>
+
+@element leaflet-scale-control
+@blurb Scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. 
+@status beta
+@homepage https://nhnb.github.io/leaflet-map/
+-->
+
+<polymer-element name="leaflet-scale-control" attributes="position maxWidth metric imperial updateWhenIdle">
+	<template>
+		<style>
+			:host {
+				display: none;
+			}
+		</style>
+	</template>
+	<script>
+	"use strict";
+
+	Polymer('leaflet-scale-control', {
+		/**
+		 * The `position` attribute sets the position of the control (one of the map corners). See control positions.
+		 * 
+		 * @attribute position
+		 * @type string
+		 */
+		position: "bottomleft",
+
+		/**
+		 * The `maxWidth` attribute sets the maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500).
+		 * 
+		 * @attribute maxWidth
+		 * @type number
+		 */
+		maxWidth: 100,
+
+		/**
+		 * The `metric` attribute sets whether to show the metric scale line (m/km).
+		 * 
+		 * @attribute metric
+		 * @type boolean
+		 */
+		metric: true,
+
+		/**
+		 * The `imperial` attribute sets whether show the imperial scale line (mi/ft).
+		 * 
+		 * @attribute imperial 
+		 * @type boolean
+		 */
+		imperial: true,
+
+		/**
+		 * The `updateWhenIdle` attribute sets whether the control is updated on moveend, otherwise it's always up-to-date (updated on move).
+		 * 
+		 * @attribute updateWhenIdle
+		 * @type boolean
+		 */
+		updateWhenIdle: false,
+
+		mapChanged: function() {
+			if (this.map) {
+				var control = L.control.scale({
+					 position: this.position,
+					 maxWidth: this.maxWidth,
+					 metric: this.metric,
+					 imperial: this.imperial,
+					 updateWhenIdle: this.updateWhenIdle,
+				});
+				this.control = control;
+				this.control.addTo(this.map);
+			}
+		},
+
+		detached: function() {
+			if (this.map && this.control) {
+				this.map.removeControl(this.control);
+			}
+		}
+	});
+	</script>
+</polymer-element>
+
+
+
+
+
+
 <!--
 Abstract element representing ILayer (<a href="http://leafletjs.com/reference.html#ilayer">Leaflet Reference</a>).