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