leaflet-control.html

<link rel="import" href="leaflet-core.html">

<!--
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 metric>
    </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. 
@homepage https://leaflet-extras.github.io/leaflet-map/
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
-->

<dom-module id="leaflet-scale-control">
	<style>
		:host {display: none;}
	</style>
	<template>
	</template>
	<script>
	"use strict";

	Polymer({
		is: 'leaflet-scale-control',

		properties: {

			/**
			 * The `position` attribute sets the position of the control (one of the map corners). See control positions.
			 * 
			 * @attribute position
			 * @type string
			 */
			position: {
				type: String,
				value: "bottomleft"
			},
	
			/**
			 * The `max-width` 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 max-width
			 * @type number
			 */
			maxWidth: {
				type: Number,
				value: 100
			},
	
			/**
			 * The `metric` attribute sets whether to show the metric scale line (m/km).
			 * 
			 * @attribute metric
			 * @type boolean
			 */
			metric: {
				type: Boolean,
				value: false
			},
	
			/**
			 * The `imperial` attribute sets whether to show the imperial scale line (mi/ft).
			 * 
			 * @attribute imperial 
			 * @type boolean
			 */
			imperial: {
				type: Boolean,
				value: false
			},
	
			/**
			 * The `update-when-idle` attribute sets whether the control is updated on moveend, otherwise it's always up-to-date (updated on move).
			 * 
			 * @attribute update-when-idle
			 * @type boolean
			 */
			updateWhenIdle: {
				type: Boolean,
				value: false
			},

			container: {
				type: Object,
				observer: '_containerChanged'
			}
		},

		_containerChanged: function() {
			if (this.container) {
				var control = L.control.scale({
					 position: this.position,
					 maxWidth: this.maxWidth,
					 metric: this.metric || !this.imperial,
					 imperial: this.imperial || !this.metric,
					 updateWhenIdle: this.updateWhenIdle,
				});
				this.control = control;
				this.control.addTo(this.container);
			}
		},

		detached: function() {
			if (this.container && this.control) {
				this.container.removeControl(this.control);
			}
		}
	});
	</script>
</dom-module>