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>
</dom-module>

<script>
"use strict";
  
Polymer({
	is: 'leaflet-geolocation',
	
	properties: {

		/**
		 * 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: function() {
		if (this.container) {
			this.container.on('locationfound locationerror', function(e) {
				this.fire(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,
			});
		}
	}
});
</script>