leaflet-core.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="leaflet-import.html">

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

##### Example
 
    <leaflet-map> </leaflet-map>

This simple example will show a map of the world. It is pan and zoomable.

##### Example

    <leaflet-map latitude="78.8" longitude="-96" zoom="5">

        <leaflet-marker latitude="51.5" longitude="-0.10" title="Some title">
            <b>Popup text</b>
        </leaflet-marker>

    </leaflet-map>

This code will zoom in on the specified latitude and longitude coordinates. Further, it will
add a marker with a popup text.

##### Example: Add markers & circles
    <leaflet-map longitude="77.2" latitude="28.4" zoom="12">
        <leaflet-marker longitude="77.2" latitude="28.4">
            Marker
        </leaflet-marker>
        <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
            Circle
        </leaflet-circle>
    </leaflet-map>



@element leaflet-map
@blurb element which defines a leaflet map. Most options are supported as attributes.
@homepage https://leaflet-extras.github.io/leaflet-map/
@demo https://leaflet-extras.github.io/leaflet-map/demo.html
-->
<link rel="import" href="styles/leaflet-styles.html">
<dom-module id="leaflet-map">
	<template>

		<style include="leaflet-styles">
			:host {
				display: block;
			}
			:host #map {
				height: 100%;
				width: 100%
			}
		</style>
		<div id="map"></div>
		<slot name="markers" id="markers"></slot>
	</template>
	<script>
		'use strict';

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


		/**
		 * Fired when the user clicks (or taps) the marker.
		 *
		 * @event click
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the user double-clicks (or double-taps) the marker.
		 *
		 * @event dblclick
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the user pushes the mouse button on the marker.
		 *
		 * @event mousedown
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the mouse enters the marker.
		 *
		 * @event mouseover
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the mouse leaves the marker.
		 *
		 * @event mouseout
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the user right-clicks on the marker.
		 *
		 * @event contextmenu
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the user focuses the map either by tabbing to it or clicking/panning.
		 *
		 * @event focus
		 */

		/**
		 * Fired when the map looses focus.
		 *
		 * @event blur
		 */

		/**
		 * Fired before mouse click on the map (sometimes useful when you want something to happen on click before any existing click handlers start running).
		 *
		 * @event preclick
		 * @type MouseEvent
		 * @param {LatLng} latlng The geographical point where the mouse event occured.
		 * @param {Point} layerPoint Pixel coordinates of the point where the mouse event occured relative to the map layer.
		 * @param {Point} containerPoint Pixel coordinates of the point where the mouse event occured relative to the map сontainer.
		 * @param {DOMMouseEvent} originalEvent The original DOM mouse event fired by the browser.
		 */

		/**
		 * Fired when the map is initialized (when its center and zoom are set for the first time).
		 *
		 * @event load
		 */

		/**
		 * Fired when the map is destroyed with remove method.
		 *
		 * @event unload
		 */

		/**
		 * Fired when the map needs to redraw its content (this usually happens on map zoom or load). Very useful for creating custom overlays.
		 *
		 * @event viewreset
		 */

		/**
		 * Fired when the view of the map starts changing (e.g. user starts dragging the map).
		 *
		 * @event movestart
		 */

		/**
		 * Fired on any movement of the map view.
		 *
		 * @event move
		 */

		/**
		 * Fired when the view of the map ends changed (e.g. user stopped dragging the map).
		 *
		 * @event moveend
		 */

		/**
		 * Fired when the user starts dragging the marker.
		 *
		 * @event dragstart
		 */

		/**
		 * Fired repeatedly while the user drags the marker.
		 *
		 * @event drag
		 */

		/**
		 * Fired when the user stops dragging the marker.
		 *
		 * @event dragend
		 * @type DragEndEvent
		 * @param {number} distance The distance in pixels the draggable element was moved by.
		 */

		/**
		 * Fired when the map zoom is about to change (e.g. before zoom animation).
		 *
		 * @event zoomstart
		 */

		/**
		 * Fired when the map zoom changes.
		 *
		 * @event zoomend
		 */

		/**
		 * Fired when the number of zoomlevels on the map is changed due to adding or removing a layer.
		 *
		 * @event zoomlevelschange
		 */

		/**
		 * Fired when the map is resized.
		 *
		 * @event resize
		 * @type ResizeEvent
		 * @param {Point}	oldSize	The old size before resize event.
		 * @param {Point}	newSize	The new size after the resize event.
		 */

		/**
		 * Fired when the map starts autopanning when opening a popup.
		 *
		 * @event autopanstart
		 */

		/**
		 * Fired when a new layer is added to the map.
		 *
		 * @event layeradd
		 * @type LayerEvent
		 * @param {ILayer}	layer	The layer that was added or removed.
		 */

		/**
		 * Fired when some layer is removed from the map.
		 *
		 * @event layerremove
		 * @type LayerEvent
		 * @param {ILayer}	layer	The layer that was added or removed.
		 */

		/**
		 * Fired when the base layer is changed through the layer control.
		 *
		 * @event baselayerchange
		 * @type LayerEvent
		 * @param {ILayer}	layer	The layer that was added or removed.
		 */

		/**
		 * Fired when an overlay is selected through the layer control.
		 *
		 * @event overlayadd
		 * @type LayerEvent
		 * @param {ILayer}	layer	The layer that was added or removed.
		 */

		/**
		 * Fired when an overlay is deselected through the layer control.
		 *
		 * @event overlayremove
		 * @type LayerEvent
		 * @param {ILayer}	layer	The layer that was added or removed.
		 */

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

		/**
		 * Fired when a popup bound to the marker is open.
		 *
		 * @event popupopen
		 * @type PopupEvent
		 * @param {Popup} popup The popup that was opened or closed.
		 */

		 /**
		 * Fired when a popup bound to the marker is closed.
		 *
		 * @event popupclose
		 * @type PopupEvent
		 * @param {Popup} popup The popup that was opened or closed.
		 */


		static get properties() {

			return {
				/**
			 * The `latitude` attribute sets the map center.
			 *
			 * @attribute latitude
			 * @type number
			 */
				latitude: {
					type: Number,
					value: 51,
					reflectToAttribute: true,
					notify: true,
					observer: '_viewChanged'
				},

				/**
				 * The `longitude` attribute sets the map center.
				 *
				 * @attribute longitude
				 * @type number
				 */
				longitude: {
					type: Number,
					value: 0,
					reflectToAttribute: true,
					notify: true,
					observer: '_viewChanged'
				},

				/**
				 * The `zoom` attribute sets the map zoom.
				 *
				 * @attribute zoom
				 * @type number
				 */
				zoom: {
					type: Number,
					value: -1,
					reflectToAttribute: true,
					notify: true,
					observer: '_viewChanged'
				},


				/**
				 * The `min-zoom` attribute sets the minimum zoom level of the map. Overrides any minZoom set on map layers.
				 *
				 * @attribute min-zoom
				 * @type number
				 */
				minZoom: {
					type: Number,
					value: 0
				},

				/**
				 * The `maxZoom` attribute sets the maximum zoom level of the map. This overrides any maxZoom set on map layers.
				 *
				 * @attribute max-zoom
				 * @type number
				 */
				maxZoom: {
					type: Number,
					value: 9007199254740992
				},

				/**
				 * The `no-dragging` attribute disables whether the map is draggable with mouse/touch or not.
				 *
				 * @attribute no-dragging
				 * @type bool
				 */
				noDragging: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-touch-zoom` attribute disables whether the map can be zoomed by touch-dragging with two fingers.
				 *
				 * @attribute no-touch-zoom
				 * @type bool
				 */
				noTouchZoom: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-scroll-wheel-zoom` attribute disables whether the map can be zoomed by using the mouse wheel. If passed 'center', it will zoom to the center of the view regardless of where the mouse was.
				 *
				 * @attribute no-scroll-wheel-zoom
				 * @type bool
				 */
				noScrollWheelZoom: {
					type: Boolean,
					value: true
				},

				/**
				 * The `no-double-click-zoom` attribute disables the whether the map can be zoomed in by double clicking on it and zoomed out by double clicking while holding shift. If passed 'center', double-click zoom will zoom to the center of the view regardless of where the mouse was.
				 *
				 * @attribute no-double-click-zoom
				 * @type bool
				 */
				noDoubleClickZoom: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-box-zoom` attribute disable the whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing shift.
				 *
				 * @attribute no-box-zoom
				 * @type bool
				 */
				noBoxZoom: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-tap` attribute disables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events).
				 *
				 * @attribute no-tap
				 * @type bool
				 */
				noTap: {
					type: Boolean,
					value: false
				},

				/**
				 * The `tap-tolerance` attribute sets the max number of pixels a user can shift his finger during touch for it to be considered a valid tap.
				 *
				 * @attribute tap-tolerance
				 * @type number
				 */
				tapTolerance: {
					type: Number,
					value: 15
				},

				/**
				 * The `no-track-resize` attribute disables whether the map automatically handles browser window resize to update itself.
				 *
				 * @attribute no-track-resize
				 * @type bool
				 */
				noTrackResize: {
					type: Boolean,
					value: false
				},

				/**
				 * The `world-copy-jump` attribute sets whether the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.
				 *
				 * @attribute world-copy-jump
				 * @type bool
				 */
				worldCopyJump: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-close-popup-on-click` attribute disables whether popups are closed when user clicks the map.
				 *
				 * @attribute no-close-popup-on-click
				 * @type bool
				 */
				noClosePopupOnClick: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-bounce-at-zoom-limits` attribute disables whether the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.
				 *
				 * @attribute no-bounce-at-zoom-limits
				 * @type bool
				 */
				noBounceAtZoomLimits: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-keyboard` attribute disables whether the map is focusable and allows users to navigate the map with keyboard arrows and +/- keys.
				 *
				 * @attribute no-keyboard
				 * @type bool
				 */
				noKeyboard: {
					type: Boolean,
					value: false
				},

				/**
				 * The `keyboard-pan-offset` attribute sets the amount of pixels to pan when pressing an arrow key.
				 *
				 * @attribute keyboard-pan-offset
				 * @type number
				 */
				keyboardPanOffset: {
					type: Number,
					value: 80
				},

				/**
				 * The `keyboard-zoom-offset` attribute sets the number of zoom levels to change when pressing + or - key.
				 *
				 * @attribute keyboard-zoom-offset
				 * @type number
				 */
				keyboardZoomOffset: {
					type: Number,
					value: 1
				},

				/**
				 * The `no-inertia` attribute disables panning of the map will have an inertia effect where the map builds momentum while dragging and continues moving in the same direction for some time. Feels especially nice on touch devices.
				 *
				 * @attribute no-inertia
				 * @type
				 */
				noInertia: {
					type: Boolean,
					value: false
				},

				/**
				 * The `inertia-deceleration` attribute sets the rate with which the inertial movement slows down, in pixels/second2.
				 *
				 * @attribute inertia-deceleration
				 * @type number
				 */
				inertiaDeceleration: {
					type: Number,
					value: 3000
				},

				/**
				 * The `inertia-max-speed` attribute sets the max speed of the inertial movement, in pixels/second.
				 *
				 * @attribute inertia-max-speed
				 * @type number
				 */
				inertiaMaxSpeed: {
					type: Number,
					value: 1500
				},

				/**
				 * The `no-zoom-control` attribute disables the zoom control is added to the map by default.
				 *
				 * @attribute no-zoom-control
				 * @type bool
				 */
				noZoomControl: {
					type: Boolean,
					value: false
				},

				/**
				 * The `no-attribution-control` attribute disable the attribution control is added to the map by default.
				 *
				 * @attribute no-attribution-control
				 * @type bool
				 */
				noAttributionControl: {
					type: Boolean,
					value: false
				},

				/**
				 * The `zoom-animation-threshold` attribute sets the maximum number of zoom level differences that still use animation
				 *
				 * @attribute zoom-animation-threshold
				 * @type number
				 */
				zoomAnimationThreshold: {
					type: Number,
					value: 4
				},

				/**
						* If set, the map is zoomed such that all elements in it are visible
						*
						* @attribute fit-to-markers
						* @type boolean
						* @default false
						*/
				fitToMarkers: {
					type: Boolean,
					value: false,
					observer: '_fitToMarkers'
				},
				/**
			 * reference to the leaflet map
			 *
			 * @property map
			 * @type L.map
			 */
				map: {
					type: Object
				}
			};
		}


		ready() {
			super.ready();
			// TODO09: Workaround for removed domReady event
			var me = this;
			setTimeout(function() {me.domReady();}, 1);
		}


		guessLeafletImagePath() {
			if (L.Icon.Default.imagePath) {
				return;
			}

			L.Icon.Default.imagePath = this.resolveUrl('../leaflet/dist/images');
		}

		domReady() {
			this.guessLeafletImagePath();
			var map = L.map(this.$.map, {
				minZoom: this.minZoom,
				maxZoom: this.maxZoom,
				dragging: !this.noDragging,
				touchZoom: !this.noTouchZoom,
				scrollWheelZoom: !this.noScrollWheelZoom,
				doubleClickZoom: !this.noDoubleClickZoom,
				boxZoom: !this.noBoxZoom,
				tap: !this.noTap,
				tapTolerance: this.tapTolerance,
				trackResize: !this.noTrackResize,
				worldCopyJump: this.worldCopyJump,
				closePopupOnClick: !this.noClosePopupOnClick,
				bounceAtZoomLimits: !this.noBounceAtZoomLimits,
				keyboard: !this.noKeyboard,
				keyboardPanOffset: this.keyboardPanOffset,
				keyboardZoomOffset: this.keyboardZoomOffset,
				inertia: !this.noInertia,
				inertiaDeceleration: this.inertiaDeceleration,
				inertiaMaxSpeed: this.inertiaMaxSpeed,
				zoomControl: !this.noZoomControl,
				attributionControl: !this.noAttributionControl,
				zoomAnimationThreshold: this.zoomAnimationThreshold
			});
			this.map = map;

			// fire an event for when this.map is defined and ready.
			// (needed for components that talk to this.map directly)
			this.dispatchEvent(new CustomEvent('map-ready'));

			// forward events
			map.on('click dblclick mousedown mouseup mouseover mouseout mousemove contextmenu focus blur preclick load unload viewreset movestart move moveend dragstart drag dragend zoomstart zoomend zoomlevelschange resize autopanstart layeradd layerremove baselayerchange overlayadd overlayremove locationfound locationerror popupopen popupclose', function(e) {
				this.dispatchEvent(new CustomEvent(e.type, e));
			}, this);
			// set map view after registering events so viewreset and load events can be caught
			map.setView([this.latitude, this.longitude], this.zoom);
			// update attributes
			map.on('moveend', function(e) {
				this._ignoreViewChange = true;
				this.longitude = map.getCenter().lng;
				this.latitude = map.getCenter().lat;
				this._ignoreViewChange = false;
			}, this);
			map.on('zoomend', function(e) {
				this.zoom = map.getZoom();
			}, this);

			if (this.zoom == -1) {
				this.map.fitWorld();
			}

			// add a default layer if there are no layers defined
			var defaultLayerRequired = true;
			for (var i = 0; i < this.children.length; i++) {
				var e = this.children[i];
				if (e.isLayer && e.isLayer()) {
					defaultLayerRequired = false;
				}
			}
			if (defaultLayerRequired) {
				L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
					attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>',
					maxZoom: 18
				}).addTo(this.map);
			}

			this.registerMapOnChildren();
			this._mutationObserver = new MutationObserver(this.registerMapOnChildren.bind(this));
			this._mutationObserver.observe(this, { childList: true });
		}

		disconnectedCallback() {
			this._mutationObserver.disconnect();
		}

		_viewChanged(newValue, oldValue) {
			if (this.map && !this._ignoreViewChange) {
				setTimeout(function() {
					this.map.setView(L.latLng(this.latitude, this.longitude), this.zoom);
				}.bind(this), 1);
			}
		}

		registerMapOnChildren() {
			for (var i = 0; i < this.children.length; i++) {
				this.children[i].container = this.map;
			}
			this._fitToMarkers();
		}

		_fitToMarkers() {
			if ( this.map && this.fitToMarkers) {
				var bounds = [];
				for( var i = 0, f; f = this.children[i]; i++ ) {
					if ( f.latitude && f.longitude ) {
						bounds.push( [f.latitude, f.longitude] );
					}
				}
				if ( bounds.length > 0 ) {
					this.map.fitBounds( bounds );
					this.map.invalidateSize();
				}
			}
		}

		/**
		 * Returns a GeoJSON including all the features of the map
		 *
		 * @method toGeoJSON
		 */
		toGeoJSON() {
			var geoJSON = {
				'type': 'FeatureCollection',
				'features': []
			};

			for( var i = 0, f; f = this.features[i]; i++ ) {
				geoJSON.features.push( f.feature.toGeoJSON() );
			}
			return geoJSON;
		}
	}
	window.customElements.define(LeafletMap.is, LeafletMap);

</script>
</dom-module>