leaflet-geolocation.html

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

<!--
element which controls geo location (<a href="http://leafletjs.com/reference.html#map">Leaflet Reference</a>).

##### Example

    <leaflet-geolocation watch enableHighAccuracy latitude="{{latitude}}" longitude="{{longitude}}"> </leaflet-geolocation>

@element leaflet-geolocation
@blurb element which controls geo location. 
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
@homepage https://leaflet-extras.github.io/leaflet-map/
-->
<dom-module id="leaflet-geolocation">
	<style>
		:host {
			display: none;
		}
	</style>
	<template>
	</template>

	<script>
		'use strict';

		class LeafletGeolocation extends Polymer.Element {
			static get is() { return 'leaflet-geolocation'; }

			static get properties() {

				return {
					/**
				 * Fired when geolocation (using the locate method) went successfully.
				 *
				 * @event locationfound
				 * @type LocationEvent
				 * @param {LatLng} latlng Detected geographical location of the user.
				 * @param {LatLngBounds} bounds Geographical bounds of the area user is located in (with respect to the accuracy of location).
				 * @param {Number} accuracy Accuracy of location in meters.
				 * @param {Number} altitude Height of the position above the WGS84 ellipsoid in meters.
				 * @param {Number} altitudeAccuracy Accuracy of altitude in meters.
				 * @param {Number} heading The direction of travel in degrees counting clockwise from true North.
				 * @param {Number} speed Current velocity in meters per second.
				 * @param {Number} timestamp The time when the position was acquired.
				 */

					/**
					 * Fired when geolocation (using the locate method) failed.
					 *
					 * @event locationerror
					 * @type ErrorEvent
					 * @param {string} message Error message.
					 * @param {number} code Error code (if applicable).
					 */

					/**
					 * The `watch` attribute sets wether location changes should be continous watching (instead of detecting it once) using W3C watchPosition method. You can later stop watching using map.stopLocate() method.
					 *
					 * @attribute watch
					 * @type bool
					 */
					watch: {
						type: Boolean,
						value: false
					},

					/**
					 * The `set-view` attribute sets whether the map view to the user location with respect to detection accuracy, or to world view if geolocation failed.
					 *
					 * @attribute set-view
					 * @type bool
					 */
					setView: {
						type: Boolean,
						value: false
					},

					/**
					 * The `max-zoom` attribute sets the maximum zoom for automatic view setting when using `setView` option.
					 *
					 * @attribute max-zoom
					 * @type number
					 */
					maxZoom: {
						type: Number,
						value: Infinity
					},

					/**
					 * The `timeout` attribute sets the number of milliseconds to wait for a response from geolocation before firing a locationerror event.
					 *
					 * @attribute timeout
					 * @type number
					 */
					timeout: {
						type: Number,
						value: 10000
					},

					/**
					 * The `maximum-age` attribute sets maximum age of detected location. If less than this amount of milliseconds passed since last geolocation response, locate will return a cached location.
					 *
					 * @attribute maximum-age
					 * @type number
					 */
					maximumAge: {
						type: Number,
						value: 0
					},

					/**
					 * The `enable-high-accuracy` attribute sets whether high accuracy is enabled, see description in the W3C spec.
					 *
					 * @attribute enable-high-accuracy
					 * @type bool
					 */
					enableHighAccuracy: {
						type: Boolean,
						value: false
					},

					/**
					 * The `latitude` attribute returns the detected geographical location of the user.
					 *
					 * @attribute latitude
					 * @type number
					 */
					latitude: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `longitude` attribute returns the detected geographical location of the user.
					 *
					 * @attribute longitude
					 * @type number
					 */
					longitude: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `bounds` attribute returns the geographical bounds of the area user is located in (with respect to the accuracy of location).
					 *
					 * @attribute bounds
					 * @type number
					 */
					bounds: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `accuracy` attribute returns the accuracy of location in meters.
					 *
					 * @attribute accuracy
					 * @type number
					 */
					accuracy: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `altitude` attribute returns the height of the position above the WGS84 ellipsoid in meters.
					 *
					 * @attribute altitude
					 * @type number
					 */
					altitude: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `altitude-accuracy` attribute returns the accuracy of altitude in meters.
					 *
					 * @attribute altitude-accuracy
					 * @type number
					 */
					altitudeAccuracy: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `heading` attribute returns the direction of travel in degrees counting clockwise from true North.
					 *
					 * @attribute heading
					 * @type number
					 */
					heading: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `speed` attribute returns the current velocity in meters per second.
					 *
					 * @attribute speed
					 * @type number
					 */
					speed: {
						type: Number,
						value: null,
						notify: true
					},

					/**
					 * The `timestamp` attribute returns the time when the position was acquired.
					 *
					 * @attribute timestamp
					 * @type number
					 */
					timestamp: {
						type: Number,
						value: null,
						notify: true
					},

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

			_containerChanged() {
				if (this.container) {
					this.container.on('locationfound locationerror', function(e) {
						this.dispatchEvent(new CustomEvent(e.type, e));
					}, this);

					this.container.on('locationfound', function(e) {
						this.latitude = e.latlng.lat;
						this.longitude = e.latlng.lng;
						this.bounds = e.bounds;
						this.accuracy = e.accuracy;
						this.altitude = e.altitude;
						this.altitudeAccuracy = e.altitudeAccuracy;
						this.heading = e.heading;
						this.speed = e.speed;
						this.timestamp = e.timestamp;
					}, this);

					this.container.locate({
						watch: this.watch,
						setView: this.setView,
						maxZoom: this.maxZoom,
						timeout: this.timeout,
						maximumAge: this.maximumAge,
						enableHighAccuracy: this.enableHighAccuracy
					});
				}
			}
		}
		window.customElements.define(LeafletGeolocation.is, LeafletGeolocation);

	</script>

</dom-module>