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

	class LeafletScaleControl extends Polymer.Element {
		static get is() { return 'leaflet-scale-control'; }

		static get properties() {

			return {
				/**
			 * 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() {
			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);
			}
		}

		disconnectedCallback() {
			if (this.container && this.control) {
				this.container.removeControl(this.control);
			}
		}
	}

	window.customElements.define(LeafletScaleControl.is, LeafletScaleControl);
</script>
</dom-module>