diff --git a/src/c3nav/settings.py b/src/c3nav/settings.py index d9f33cfa..63573e73 100644 --- a/src/c3nav/settings.py +++ b/src/c3nav/settings.py @@ -146,6 +146,7 @@ INSTALLED_APPS = [ 'rest_framework', 'c3nav.mapdata', 'c3nav.routing', + 'c3nav.site', 'c3nav.editor', 'c3nav.control', ] diff --git a/src/c3nav/site/__init__.py b/src/c3nav/site/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/src/c3nav/site/templates/site/base.html b/src/c3nav/site/templates/site/base.html new file mode 100644 index 00000000..3d68dba8 --- /dev/null +++ b/src/c3nav/site/templates/site/base.html @@ -0,0 +1,35 @@ +{% load static %} +{% load compress %} + + + + + + + c3nav + {% compress css %} + + {% endcompress %} + + + + + + +
+ {% block content %} + {% endblock %} +
+ + {% compress js %} + + + {% endcompress %} + + diff --git a/src/c3nav/site/templates/site/index.html b/src/c3nav/site/templates/site/index.html new file mode 100644 index 00000000..2184303e --- /dev/null +++ b/src/c3nav/site/templates/site/index.html @@ -0,0 +1,5 @@ +{% extends 'site/base.html' %} +{% load static %} +{% block content %} +Hi! +{% endblock %} diff --git a/src/c3nav/site/urls.py b/src/c3nav/site/urls.py new file mode 100644 index 00000000..7f21c0c8 --- /dev/null +++ b/src/c3nav/site/urls.py @@ -0,0 +1,6 @@ +from django.conf.urls import url +from django.views.generic import TemplateView + +urlpatterns = [ + url(r'^$', TemplateView.as_view(template_name='site/index.html'), name='site.index') +] diff --git a/src/c3nav/urls.py b/src/c3nav/urls.py index 32e52222..ae06fd3a 100644 --- a/src/c3nav/urls.py +++ b/src/c3nav/urls.py @@ -4,10 +4,12 @@ from django.contrib import admin import c3nav.api.urls import c3nav.control.urls import c3nav.editor.urls +import c3nav.site.urls urlpatterns = [ url(r'^control/', include(c3nav.control.urls)), url(r'^editor/', include(c3nav.editor.urls)), url(r'^api/', include(c3nav.api.urls, namespace='api')), url(r'^admin/', admin.site.urls), + url(r'^', include(c3nav.site.urls)), ] diff --git a/src/static/leaflet/leaflet.js b/src/static/leaflet/leaflet.js index 83017523..e319e613 100644 --- a/src/static/leaflet/leaflet.js +++ b/src/static/leaflet/leaflet.js @@ -1,7 +1,7 @@ -/* - Leaflet 1.0.1+ffcfcc1, a JS library for interactive maps. http://leafletjs.com - (c) 2010-2016 Vladimir Agafonkin, (c) 2010-2011 CloudMade -*/ +/* + Leaflet 1.0.1+ffcfcc1, a JS library for interactive maps. http://leafletjs.com + (c) 2010-2016 Vladimir Agafonkin, (c) 2010-2011 CloudMade +*/ (function (window, document, undefined) { var L = { version: "1.0.1+ffcfcc1" @@ -31,9 +31,9 @@ if (typeof module === 'object' && typeof module.exports === 'object') { if (typeof window !== 'undefined') { expose(); } - - - + + + /* * @namespace Util * @@ -284,9 +284,9 @@ L.extend = L.Util.extend; L.bind = L.Util.bind; L.stamp = L.Util.stamp; L.setOptions = L.Util.setOptions; - - - + + + // @class Class // @aka L.Class @@ -397,9 +397,9 @@ L.Class.addInitHook = function (fn) { // (Function) || (String, args...) this.prototype._initHooks.push(init); return this; }; - - - + + + /* * @class Evented * @aka L.Evented @@ -690,9 +690,9 @@ proto.fireEvent = proto.fire; proto.hasEventListeners = proto.listens; L.Mixin = {Events: proto}; - - - + + + /* * @namespace Browser * @aka L.Browser @@ -747,7 +747,7 @@ L.Mixin = {Events: proto}; ielt9: ie && !document.addEventListener, // @property edge: Boolean - // `true` for the Edge web browser. + // `true` for the Edge site browser. edge: 'msLaunchUri' in navigator && !('documentMode' in document), // @property webkit: Boolean @@ -841,9 +841,9 @@ L.Mixin = {Events: proto}; }; }()); - - - + + + /* * @class Point * @aka L.Point @@ -1042,9 +1042,9 @@ L.point = function (x, y, round) { } return new L.Point(x, y, round); }; - - - + + + /* * @class Bounds * @aka L.Bounds @@ -1200,9 +1200,9 @@ L.bounds = function (a, b) { } return new L.Bounds(a, b); }; - - - + + + /* * @class Transformation * @aka L.Transformation @@ -1257,9 +1257,9 @@ L.Transformation.prototype = { (point.y / scale - this._d) / this._c); } }; - - - + + + /* * @namespace DomUtil * @@ -1580,9 +1580,9 @@ L.DomUtil = { L.DomEvent.off(window, 'keydown', L.DomUtil.restoreOutline, this); }; })(); - - - + + + /* @class LatLng * @aka L.LatLng * @@ -1712,9 +1712,9 @@ L.latLng = function (a, b, c) { } return new L.LatLng(a, b, c); }; - - - + + + /* * @class LatLngBounds * @aka L.LatLngBounds @@ -1919,7 +1919,7 @@ L.LatLngBounds.prototype = { }, // @method toBBoxString(): String - // Returns a string with bounding box coordinates in a 'southwest_lng,southwest_lat,northeast_lng,northeast_lat' format. Useful for sending requests to web services that return geo data. + // Returns a string with bounding box coordinates in a 'southwest_lng,southwest_lat,northeast_lng,northeast_lat' format. Useful for sending requests to site services that return geo data. toBBoxString: function () { return [this.getWest(), this.getSouth(), this.getEast(), this.getNorth()].join(','); }, @@ -1956,9 +1956,9 @@ L.latLngBounds = function (a, b) { } return new L.LatLngBounds(a, b); }; - - - + + + /* * @namespace Projection * @section @@ -1985,9 +1985,9 @@ L.Projection.LonLat = { bounds: L.bounds([-180, -90], [180, 90]) }; - - - + + + /* * @namespace Projection * @projection L.Projection.SphericalMercator @@ -2026,9 +2026,9 @@ L.Projection.SphericalMercator = { return L.bounds([-d, -d], [d, d]); })() }; - - - + + + /* * @class CRS * @aka L.CRS @@ -2136,75 +2136,75 @@ L.CRS = { return L.latLng(lat, lng, alt); } }; - - - -/* - * @namespace CRS - * @crs L.CRS.Simple - * - * A simple CRS that maps longitude and latitude into `x` and `y` directly. - * May be used for maps of flat surfaces (e.g. game maps). Note that the `y` - * axis should still be inverted (going from bottom to top). `distance()` returns - * simple euclidean distance. - */ - -L.CRS.Simple = L.extend({}, L.CRS, { - projection: L.Projection.LonLat, - transformation: new L.Transformation(1, 0, -1, 0), - - scale: function (zoom) { - return Math.pow(2, zoom); - }, - - zoom: function (scale) { - return Math.log(scale) / Math.LN2; - }, - - distance: function (latlng1, latlng2) { - var dx = latlng2.lng - latlng1.lng, - dy = latlng2.lat - latlng1.lat; - - return Math.sqrt(dx * dx + dy * dy); - }, - - infinite: true -}); - - - -/* - * @namespace CRS - * @crs L.CRS.Earth - * - * Serves as the base for CRS that are global such that they cover the earth. - * Can only be used as the base for other CRS and cannot be used directly, - * since it does not have a `code`, `projection` or `transformation`. `distance()` returns - * meters. - */ - -L.CRS.Earth = L.extend({}, L.CRS, { - wrapLng: [-180, 180], - - // Mean Earth Radius, as recommended for use by - // the International Union of Geodesy and Geophysics, - // see http://rosettacode.org/wiki/Haversine_formula - R: 6371000, - - // distance between two geographical points using spherical law of cosines approximation - distance: function (latlng1, latlng2) { - var rad = Math.PI / 180, - lat1 = latlng1.lat * rad, - lat2 = latlng2.lat * rad, - a = Math.sin(lat1) * Math.sin(lat2) + - Math.cos(lat1) * Math.cos(lat2) * Math.cos((latlng2.lng - latlng1.lng) * rad); - - return this.R * Math.acos(Math.min(a, 1)); - } -}); - - - + + + +/* + * @namespace CRS + * @crs L.CRS.Simple + * + * A simple CRS that maps longitude and latitude into `x` and `y` directly. + * May be used for maps of flat surfaces (e.g. game maps). Note that the `y` + * axis should still be inverted (going from bottom to top). `distance()` returns + * simple euclidean distance. + */ + +L.CRS.Simple = L.extend({}, L.CRS, { + projection: L.Projection.LonLat, + transformation: new L.Transformation(1, 0, -1, 0), + + scale: function (zoom) { + return Math.pow(2, zoom); + }, + + zoom: function (scale) { + return Math.log(scale) / Math.LN2; + }, + + distance: function (latlng1, latlng2) { + var dx = latlng2.lng - latlng1.lng, + dy = latlng2.lat - latlng1.lat; + + return Math.sqrt(dx * dx + dy * dy); + }, + + infinite: true +}); + + + +/* + * @namespace CRS + * @crs L.CRS.Earth + * + * Serves as the base for CRS that are global such that they cover the earth. + * Can only be used as the base for other CRS and cannot be used directly, + * since it does not have a `code`, `projection` or `transformation`. `distance()` returns + * meters. + */ + +L.CRS.Earth = L.extend({}, L.CRS, { + wrapLng: [-180, 180], + + // Mean Earth Radius, as recommended for use by + // the International Union of Geodesy and Geophysics, + // see http://rosettacode.org/wiki/Haversine_formula + R: 6371000, + + // distance between two geographical points using spherical law of cosines approximation + distance: function (latlng1, latlng2) { + var rad = Math.PI / 180, + lat1 = latlng1.lat * rad, + lat2 = latlng2.lat * rad, + a = Math.sin(lat1) * Math.sin(lat2) + + Math.cos(lat1) * Math.cos(lat2) * Math.cos((latlng2.lng - latlng1.lng) * rad); + + return this.R * Math.acos(Math.min(a, 1)); + } +}); + + + /* * @namespace CRS * @crs L.CRS.EPSG3857 @@ -2227,9 +2227,9 @@ L.CRS.EPSG3857 = L.extend({}, L.CRS.Earth, { L.CRS.EPSG900913 = L.extend({}, L.CRS.EPSG3857, { code: 'EPSG:900913' }); - - - + + + /* * @namespace CRS * @crs L.CRS.EPSG4326 @@ -2242,9 +2242,9 @@ L.CRS.EPSG4326 = L.extend({}, L.CRS.Earth, { projection: L.Projection.LonLat, transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5) }); - - - + + + /* * @class Map * @aka L.Map @@ -2320,7 +2320,7 @@ L.Map = L.Evented.extend({ // @option transform3DLimit: Number = 2^23 // Defines the maximum size of a CSS translation transform. The default - // value should not be changed unless a web browser positions layers in + // value should not be changed unless a site browser positions layers in // the wrong place after doing a large `panBy`. transform3DLimit: 8388608, // Precision limit of a 32-bit float @@ -3441,266 +3441,266 @@ L.Map = L.Evented.extend({ L.map = function (id, options) { return new L.Map(id, options); }; - - - - -/* - * @class Layer - * @inherits Evented - * @aka L.Layer - * @aka ILayer - * - * A set of methods from the Layer base class that all Leaflet layers use. - * Inherits all methods, options and events from `L.Evented`. - * - * @example - * - * ```js - * var layer = L.Marker(latlng).addTo(map); - * layer.addTo(map); - * layer.remove(); - * ``` - * - * @event add: Event - * Fired after the layer is added to a map - * - * @event remove: Event - * Fired after the layer is removed from a map - */ - - -L.Layer = L.Evented.extend({ - - // Classes extending `L.Layer` will inherit the following options: - options: { - // @option pane: String = 'overlayPane' - // By default the layer will be added to the map's [overlay pane](#map-overlaypane). Overriding this option will cause the layer to be placed on another pane by default. - pane: 'overlayPane', - nonBubblingEvents: [] // Array of events that should not be bubbled to DOM parents (like the map) - }, - - /* @section - * Classes extending `L.Layer` will inherit the following methods: - * - * @method addTo(map: Map): this - * Adds the layer to the given map - */ - addTo: function (map) { - map.addLayer(this); - return this; - }, - - // @method remove: this - // Removes the layer from the map it is currently active on. - remove: function () { - return this.removeFrom(this._map || this._mapToAdd); - }, - - // @method removeFrom(map: Map): this - // Removes the layer from the given map - removeFrom: function (obj) { - if (obj) { - obj.removeLayer(this); - } - return this; - }, - - // @method getPane(name? : String): HTMLElement - // Returns the `HTMLElement` representing the named pane on the map. If `name` is omitted, returns the pane for this layer. - getPane: function (name) { - return this._map.getPane(name ? (this.options[name] || name) : this.options.pane); - }, - - addInteractiveTarget: function (targetEl) { - this._map._targets[L.stamp(targetEl)] = this; - return this; - }, - - removeInteractiveTarget: function (targetEl) { - delete this._map._targets[L.stamp(targetEl)]; - return this; - }, - - _layerAdd: function (e) { - var map = e.target; - - // check in case layer gets added and then removed before the map is ready - if (!map.hasLayer(this)) { return; } - - this._map = map; - this._zoomAnimated = map._zoomAnimated; - - if (this.getEvents) { - var events = this.getEvents(); - map.on(events, this); - this.once('remove', function () { - map.off(events, this); - }, this); - } - - this.onAdd(map); - - if (this.getAttribution && this._map.attributionControl) { - this._map.attributionControl.addAttribution(this.getAttribution()); - } - - this.fire('add'); - map.fire('layeradd', {layer: this}); - } -}); - -/* @section Extension methods - * @uninheritable - * - * Every layer should extend from `L.Layer` and (re-)implement the following methods. - * - * @method onAdd(map: Map): this - * Should contain code that creates DOM elements for the layer, adds them to `map panes` where they should belong and puts listeners on relevant map events. Called on [`map.addLayer(layer)`](#map-addlayer). - * - * @method onRemove(map: Map): this - * Should contain all clean up code that removes the layer's elements from the DOM and removes listeners previously added in [`onAdd`](#layer-onadd). Called on [`map.removeLayer(layer)`](#map-removelayer). - * - * @method getEvents(): Object - * This optional method should return an object like `{ viewreset: this._reset }` for [`addEventListener`](#evented-addeventlistener). The event handlers in this object will be automatically added and removed from the map with your layer. - * - * @method getAttribution(): String - * This optional method should return a string containing HTML to be shown on the `Attribution control` whenever the layer is visible. - * - * @method beforeAdd(map: Map): this - * Optional method. Called on [`map.addLayer(layer)`](#map-addlayer), before the layer is added to the map, before events are initialized, without waiting until the map is in a usable state. Use for early initialization only. - */ - - -/* @namespace Map - * @section Layer events - * - * @event layeradd: LayerEvent - * Fired when a new layer is added to the map. - * - * @event layerremove: LayerEvent - * Fired when some layer is removed from the map - * - * @section Methods for Layers and Controls - */ -L.Map.include({ - // @method addLayer(layer: Layer): this - // Adds the given layer to the map - addLayer: function (layer) { - var id = L.stamp(layer); - if (this._layers[id]) { return this; } - this._layers[id] = layer; - - layer._mapToAdd = this; - - if (layer.beforeAdd) { - layer.beforeAdd(this); - } - - this.whenReady(layer._layerAdd, layer); - - return this; - }, - - // @method removeLayer(layer: Layer): this - // Removes the given layer from the map. - removeLayer: function (layer) { - var id = L.stamp(layer); - - if (!this._layers[id]) { return this; } - - if (this._loaded) { - layer.onRemove(this); - } - - if (layer.getAttribution && this.attributionControl) { - this.attributionControl.removeAttribution(layer.getAttribution()); - } - - delete this._layers[id]; - - if (this._loaded) { - this.fire('layerremove', {layer: layer}); - layer.fire('remove'); - } - - layer._map = layer._mapToAdd = null; - - return this; - }, - - // @method hasLayer(layer: Layer): Boolean - // Returns `true` if the given layer is currently added to the map - hasLayer: function (layer) { - return !!layer && (L.stamp(layer) in this._layers); - }, - - /* @method eachLayer(fn: Function, context?: Object): this - * Iterates over the layers of the map, optionally specifying context of the iterator function. - * ``` - * map.eachLayer(function(layer){ - * layer.bindPopup('Hello'); - * }); - * ``` - */ - eachLayer: function (method, context) { - for (var i in this._layers) { - method.call(context, this._layers[i]); - } - return this; - }, - - _addLayers: function (layers) { - layers = layers ? (L.Util.isArray(layers) ? layers : [layers]) : []; - - for (var i = 0, len = layers.length; i < len; i++) { - this.addLayer(layers[i]); - } - }, - - _addZoomLimit: function (layer) { - if (isNaN(layer.options.maxZoom) || !isNaN(layer.options.minZoom)) { - this._zoomBoundLayers[L.stamp(layer)] = layer; - this._updateZoomLevels(); - } - }, - - _removeZoomLimit: function (layer) { - var id = L.stamp(layer); - - if (this._zoomBoundLayers[id]) { - delete this._zoomBoundLayers[id]; - this._updateZoomLevels(); - } - }, - - _updateZoomLevels: function () { - var minZoom = Infinity, - maxZoom = -Infinity, - oldZoomSpan = this._getZoomSpan(); - - for (var i in this._zoomBoundLayers) { - var options = this._zoomBoundLayers[i].options; - - minZoom = options.minZoom === undefined ? minZoom : Math.min(minZoom, options.minZoom); - maxZoom = options.maxZoom === undefined ? maxZoom : Math.max(maxZoom, options.maxZoom); - } - - this._layersMaxZoom = maxZoom === -Infinity ? undefined : maxZoom; - this._layersMinZoom = minZoom === Infinity ? undefined : minZoom; - - // @section Map state change events - // @event zoomlevelschange: Event - // Fired when the number of zoomlevels on the map is changed due - // to adding or removing a layer. - if (oldZoomSpan !== this._getZoomSpan()) { - this.fire('zoomlevelschange'); - } - } -}); - - - + + + + +/* + * @class Layer + * @inherits Evented + * @aka L.Layer + * @aka ILayer + * + * A set of methods from the Layer base class that all Leaflet layers use. + * Inherits all methods, options and events from `L.Evented`. + * + * @example + * + * ```js + * var layer = L.Marker(latlng).addTo(map); + * layer.addTo(map); + * layer.remove(); + * ``` + * + * @event add: Event + * Fired after the layer is added to a map + * + * @event remove: Event + * Fired after the layer is removed from a map + */ + + +L.Layer = L.Evented.extend({ + + // Classes extending `L.Layer` will inherit the following options: + options: { + // @option pane: String = 'overlayPane' + // By default the layer will be added to the map's [overlay pane](#map-overlaypane). Overriding this option will cause the layer to be placed on another pane by default. + pane: 'overlayPane', + nonBubblingEvents: [] // Array of events that should not be bubbled to DOM parents (like the map) + }, + + /* @section + * Classes extending `L.Layer` will inherit the following methods: + * + * @method addTo(map: Map): this + * Adds the layer to the given map + */ + addTo: function (map) { + map.addLayer(this); + return this; + }, + + // @method remove: this + // Removes the layer from the map it is currently active on. + remove: function () { + return this.removeFrom(this._map || this._mapToAdd); + }, + + // @method removeFrom(map: Map): this + // Removes the layer from the given map + removeFrom: function (obj) { + if (obj) { + obj.removeLayer(this); + } + return this; + }, + + // @method getPane(name? : String): HTMLElement + // Returns the `HTMLElement` representing the named pane on the map. If `name` is omitted, returns the pane for this layer. + getPane: function (name) { + return this._map.getPane(name ? (this.options[name] || name) : this.options.pane); + }, + + addInteractiveTarget: function (targetEl) { + this._map._targets[L.stamp(targetEl)] = this; + return this; + }, + + removeInteractiveTarget: function (targetEl) { + delete this._map._targets[L.stamp(targetEl)]; + return this; + }, + + _layerAdd: function (e) { + var map = e.target; + + // check in case layer gets added and then removed before the map is ready + if (!map.hasLayer(this)) { return; } + + this._map = map; + this._zoomAnimated = map._zoomAnimated; + + if (this.getEvents) { + var events = this.getEvents(); + map.on(events, this); + this.once('remove', function () { + map.off(events, this); + }, this); + } + + this.onAdd(map); + + if (this.getAttribution && this._map.attributionControl) { + this._map.attributionControl.addAttribution(this.getAttribution()); + } + + this.fire('add'); + map.fire('layeradd', {layer: this}); + } +}); + +/* @section Extension methods + * @uninheritable + * + * Every layer should extend from `L.Layer` and (re-)implement the following methods. + * + * @method onAdd(map: Map): this + * Should contain code that creates DOM elements for the layer, adds them to `map panes` where they should belong and puts listeners on relevant map events. Called on [`map.addLayer(layer)`](#map-addlayer). + * + * @method onRemove(map: Map): this + * Should contain all clean up code that removes the layer's elements from the DOM and removes listeners previously added in [`onAdd`](#layer-onadd). Called on [`map.removeLayer(layer)`](#map-removelayer). + * + * @method getEvents(): Object + * This optional method should return an object like `{ viewreset: this._reset }` for [`addEventListener`](#evented-addeventlistener). The event handlers in this object will be automatically added and removed from the map with your layer. + * + * @method getAttribution(): String + * This optional method should return a string containing HTML to be shown on the `Attribution control` whenever the layer is visible. + * + * @method beforeAdd(map: Map): this + * Optional method. Called on [`map.addLayer(layer)`](#map-addlayer), before the layer is added to the map, before events are initialized, without waiting until the map is in a usable state. Use for early initialization only. + */ + + +/* @namespace Map + * @section Layer events + * + * @event layeradd: LayerEvent + * Fired when a new layer is added to the map. + * + * @event layerremove: LayerEvent + * Fired when some layer is removed from the map + * + * @section Methods for Layers and Controls + */ +L.Map.include({ + // @method addLayer(layer: Layer): this + // Adds the given layer to the map + addLayer: function (layer) { + var id = L.stamp(layer); + if (this._layers[id]) { return this; } + this._layers[id] = layer; + + layer._mapToAdd = this; + + if (layer.beforeAdd) { + layer.beforeAdd(this); + } + + this.whenReady(layer._layerAdd, layer); + + return this; + }, + + // @method removeLayer(layer: Layer): this + // Removes the given layer from the map. + removeLayer: function (layer) { + var id = L.stamp(layer); + + if (!this._layers[id]) { return this; } + + if (this._loaded) { + layer.onRemove(this); + } + + if (layer.getAttribution && this.attributionControl) { + this.attributionControl.removeAttribution(layer.getAttribution()); + } + + delete this._layers[id]; + + if (this._loaded) { + this.fire('layerremove', {layer: layer}); + layer.fire('remove'); + } + + layer._map = layer._mapToAdd = null; + + return this; + }, + + // @method hasLayer(layer: Layer): Boolean + // Returns `true` if the given layer is currently added to the map + hasLayer: function (layer) { + return !!layer && (L.stamp(layer) in this._layers); + }, + + /* @method eachLayer(fn: Function, context?: Object): this + * Iterates over the layers of the map, optionally specifying context of the iterator function. + * ``` + * map.eachLayer(function(layer){ + * layer.bindPopup('Hello'); + * }); + * ``` + */ + eachLayer: function (method, context) { + for (var i in this._layers) { + method.call(context, this._layers[i]); + } + return this; + }, + + _addLayers: function (layers) { + layers = layers ? (L.Util.isArray(layers) ? layers : [layers]) : []; + + for (var i = 0, len = layers.length; i < len; i++) { + this.addLayer(layers[i]); + } + }, + + _addZoomLimit: function (layer) { + if (isNaN(layer.options.maxZoom) || !isNaN(layer.options.minZoom)) { + this._zoomBoundLayers[L.stamp(layer)] = layer; + this._updateZoomLevels(); + } + }, + + _removeZoomLimit: function (layer) { + var id = L.stamp(layer); + + if (this._zoomBoundLayers[id]) { + delete this._zoomBoundLayers[id]; + this._updateZoomLevels(); + } + }, + + _updateZoomLevels: function () { + var minZoom = Infinity, + maxZoom = -Infinity, + oldZoomSpan = this._getZoomSpan(); + + for (var i in this._zoomBoundLayers) { + var options = this._zoomBoundLayers[i].options; + + minZoom = options.minZoom === undefined ? minZoom : Math.min(minZoom, options.minZoom); + maxZoom = options.maxZoom === undefined ? maxZoom : Math.max(maxZoom, options.maxZoom); + } + + this._layersMaxZoom = maxZoom === -Infinity ? undefined : maxZoom; + this._layersMinZoom = minZoom === Infinity ? undefined : minZoom; + + // @section Map state change events + // @event zoomlevelschange: Event + // Fired when the number of zoomlevels on the map is changed due + // to adding or removing a layer. + if (oldZoomSpan !== this._getZoomSpan()) { + this.fire('zoomlevelschange'); + } + } +}); + + + /* * @namespace Projection * @projection L.Projection.Mercator @@ -3746,9 +3746,9 @@ L.Projection.Mercator = { return new L.LatLng(phi * d, point.x * d / r); } }; - - - + + + /* * @namespace CRS * @crs L.CRS.EPSG3395 @@ -3765,884 +3765,884 @@ L.CRS.EPSG3395 = L.extend({}, L.CRS.Earth, { return new L.Transformation(scale, 0.5, -scale, 0.5); }()) }); - - - -/* - * @class GridLayer - * @inherits Layer - * @aka L.GridLayer - * - * Generic class for handling a tiled grid of HTML elements. This is the base class for all tile layers and replaces `TileLayer.Canvas`. - * GridLayer can be extended to create a tiled grid of HTML elements like ``, `` or `
`. GridLayer will handle creating and animating these DOM elements for you. - * - * - * @section Synchronous usage - * @example - * - * To create a custom layer, extend GridLayer and implement the `createTile()` method, which will be passed a `Point` object with the `x`, `y`, and `z` (zoom level) coordinates to draw your tile. - * - * ```js - * var CanvasLayer = L.GridLayer.extend({ - * createTile: function(coords){ - * // create a element for drawing - * var tile = L.DomUtil.create('canvas', 'leaflet-tile'); - * - * // setup tile width and height according to the options - * var size = this.getTileSize(); - * tile.width = size.x; - * tile.height = size.y; - * - * // get a canvas context and draw something on it using coords.x, coords.y and coords.z - * var ctx = tile.getContext('2d'); - * - * // return the tile so it can be rendered on screen - * return tile; - * } - * }); - * ``` - * - * @section Asynchronous usage - * @example - * - * Tile creation can also be asynchronous, this is useful when using a third-party drawing library. Once the tile is finished drawing it can be passed to the `done()` callback. - * - * ```js - * var CanvasLayer = L.GridLayer.extend({ - * createTile: function(coords, done){ - * var error; - * - * // create a element for drawing - * var tile = L.DomUtil.create('canvas', 'leaflet-tile'); - * - * // setup tile width and height according to the options - * var size = this.getTileSize(); - * tile.width = size.x; - * tile.height = size.y; - * - * // draw something asynchronously and pass the tile to the done() callback - * setTimeout(function() { - * done(error, tile); - * }, 1000); - * - * return tile; - * } - * }); - * ``` - * - * @section - */ - - -L.GridLayer = L.Layer.extend({ - - // @section - // @aka GridLayer options - options: { - // @option tileSize: Number|Point = 256 - // Width and height of tiles in the grid. Use a number if width and height are equal, or `L.point(width, height)` otherwise. - tileSize: 256, - - // @option opacity: Number = 1.0 - // Opacity of the tiles. Can be used in the `createTile()` function. - opacity: 1, - - // @option updateWhenIdle: Boolean = depends - // If `false`, new tiles are loaded during panning, otherwise only after it (for better performance). `true` by default on mobile browsers, otherwise `false`. - updateWhenIdle: L.Browser.mobile, - - // @option updateWhenZooming: Boolean = true - // By default, a smooth zoom animation (during a [touch zoom](#map-touchzoom) or a [`flyTo()`](#map-flyto)) will update grid layers every integer zoom level. Setting this option to `false` will update the grid layer only when the smooth animation ends. - updateWhenZooming: true, - - // @option updateInterval: Number = 200 - // Tiles will not update more than once every `updateInterval` milliseconds when panning. - updateInterval: 200, - - // @option attribution: String = null - // String to be shown in the attribution control, describes the layer data, e.g. "© Mapbox". - attribution: null, - - // @option zIndex: Number = 1 - // The explicit zIndex of the tile layer. - zIndex: 1, - - // @option bounds: LatLngBounds = undefined - // If set, tiles will only be loaded inside the set `LatLngBounds`. - bounds: null, - - // @option minZoom: Number = 0 - // The minimum zoom level that tiles will be loaded at. By default the entire map. - minZoom: 0, - - // @option maxZoom: Number = undefined - // The maximum zoom level that tiles will be loaded at. - maxZoom: undefined, - - // @option noWrap: Boolean = false - // Whether the layer is wrapped around the antimeridian. If `true`, the - // GridLayer will only be displayed once at low zoom levels. Has no - // effect when the [map CRS](#map-crs) doesn't wrap around. - noWrap: false, - - // @option pane: String = 'tilePane' - // `Map pane` where the grid layer will be added. - pane: 'tilePane', - - // @option className: String = '' - // A custom class name to assign to the tile layer. Empty by default. - className: '', - - // @option keepBuffer: Number = 2 - // When panning the map, keep this many rows and columns of tiles before unloading them. - keepBuffer: 2 - }, - - initialize: function (options) { - L.setOptions(this, options); - }, - - onAdd: function () { - this._initContainer(); - - this._levels = {}; - this._tiles = {}; - - this._resetView(); - this._update(); - }, - - beforeAdd: function (map) { - map._addZoomLimit(this); - }, - - onRemove: function (map) { - this._removeAllTiles(); - L.DomUtil.remove(this._container); - map._removeZoomLimit(this); - this._container = null; - this._tileZoom = null; - }, - - // @method bringToFront: this - // Brings the tile layer to the top of all tile layers. - bringToFront: function () { - if (this._map) { - L.DomUtil.toFront(this._container); - this._setAutoZIndex(Math.max); - } - return this; - }, - - // @method bringToBack: this - // Brings the tile layer to the bottom of all tile layers. - bringToBack: function () { - if (this._map) { - L.DomUtil.toBack(this._container); - this._setAutoZIndex(Math.min); - } - return this; - }, - - // @method getAttribution: String - // Used by the `attribution control`, returns the [attribution option](#gridlayer-attribution). - getAttribution: function () { - return this.options.attribution; - }, - - // @method getContainer: HTMLElement - // Returns the HTML element that contains the tiles for this layer. - getContainer: function () { - return this._container; - }, - - // @method setOpacity(opacity: Number): this - // Changes the [opacity](#gridlayer-opacity) of the grid layer. - setOpacity: function (opacity) { - this.options.opacity = opacity; - this._updateOpacity(); - return this; - }, - - // @method setZIndex(zIndex: Number): this - // Changes the [zIndex](#gridlayer-zindex) of the grid layer. - setZIndex: function (zIndex) { - this.options.zIndex = zIndex; - this._updateZIndex(); - - return this; - }, - - // @method isLoading: Boolean - // Returns `true` if any tile in the grid layer has not finished loading. - isLoading: function () { - return this._loading; - }, - - // @method redraw: this - // Causes the layer to clear all the tiles and request them again. - redraw: function () { - if (this._map) { - this._removeAllTiles(); - this._update(); - } - return this; - }, - - getEvents: function () { - var events = { - viewprereset: this._invalidateAll, - viewreset: this._resetView, - zoom: this._resetView, - moveend: this._onMoveEnd - }; - - if (!this.options.updateWhenIdle) { - // update tiles on move, but not more often than once per given interval - if (!this._onMove) { - this._onMove = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this); - } - - events.move = this._onMove; - } - - if (this._zoomAnimated) { - events.zoomanim = this._animateZoom; - } - - return events; - }, - - // @section Extension methods - // Layers extending `GridLayer` shall reimplement the following method. - // @method createTile(coords: Object, done?: Function): HTMLElement - // Called only internally, must be overriden by classes extending `GridLayer`. - // Returns the `HTMLElement` corresponding to the given `coords`. If the `done` callback - // is specified, it must be called when the tile has finished loading and drawing. - createTile: function () { - return document.createElement('div'); - }, - - // @section - // @method getTileSize: Point - // Normalizes the [tileSize option](#gridlayer-tilesize) into a point. Used by the `createTile()` method. - getTileSize: function () { - var s = this.options.tileSize; - return s instanceof L.Point ? s : new L.Point(s, s); - }, - - _updateZIndex: function () { - if (this._container && this.options.zIndex !== undefined && this.options.zIndex !== null) { - this._container.style.zIndex = this.options.zIndex; - } - }, - - _setAutoZIndex: function (compare) { - // go through all other layers of the same pane, set zIndex to max + 1 (front) or min - 1 (back) - - var layers = this.getPane().children, - edgeZIndex = -compare(-Infinity, Infinity); // -Infinity for max, Infinity for min - - for (var i = 0, len = layers.length, zIndex; i < len; i++) { - - zIndex = layers[i].style.zIndex; - - if (layers[i] !== this._container && zIndex) { - edgeZIndex = compare(edgeZIndex, +zIndex); - } - } - - if (isFinite(edgeZIndex)) { - this.options.zIndex = edgeZIndex + compare(-1, 1); - this._updateZIndex(); - } - }, - - _updateOpacity: function () { - if (!this._map) { return; } - - // IE doesn't inherit filter opacity properly, so we're forced to set it on tiles - if (L.Browser.ielt9) { return; } - - L.DomUtil.setOpacity(this._container, this.options.opacity); - - var now = +new Date(), - nextFrame = false, - willPrune = false; - - for (var key in this._tiles) { - var tile = this._tiles[key]; - if (!tile.current || !tile.loaded) { continue; } - - var fade = Math.min(1, (now - tile.loaded) / 200); - - L.DomUtil.setOpacity(tile.el, fade); - if (fade < 1) { - nextFrame = true; - } else { - if (tile.active) { willPrune = true; } - tile.active = true; - } - } - - if (willPrune && !this._noPrune) { this._pruneTiles(); } - - if (nextFrame) { - L.Util.cancelAnimFrame(this._fadeFrame); - this._fadeFrame = L.Util.requestAnimFrame(this._updateOpacity, this); - } - }, - - _initContainer: function () { - if (this._container) { return; } - - this._container = L.DomUtil.create('div', 'leaflet-layer ' + (this.options.className || '')); - this._updateZIndex(); - - if (this.options.opacity < 1) { - this._updateOpacity(); - } - - this.getPane().appendChild(this._container); - }, - - _updateLevels: function () { - - var zoom = this._tileZoom, - maxZoom = this.options.maxZoom; - - if (zoom === undefined) { return undefined; } - - for (var z in this._levels) { - if (this._levels[z].el.children.length || z === zoom) { - this._levels[z].el.style.zIndex = maxZoom - Math.abs(zoom - z); - } else { - L.DomUtil.remove(this._levels[z].el); - this._removeTilesAtZoom(z); - delete this._levels[z]; - } - } - - var level = this._levels[zoom], - map = this._map; - - if (!level) { - level = this._levels[zoom] = {}; - - level.el = L.DomUtil.create('div', 'leaflet-tile-container leaflet-zoom-animated', this._container); - level.el.style.zIndex = maxZoom; - - level.origin = map.project(map.unproject(map.getPixelOrigin()), zoom).round(); - level.zoom = zoom; - - this._setZoomTransform(level, map.getCenter(), map.getZoom()); - - // force the browser to consider the newly added element for transition - L.Util.falseFn(level.el.offsetWidth); - } - - this._level = level; - - return level; - }, - - _pruneTiles: function () { - if (!this._map) { - return; - } - - var key, tile; - - var zoom = this._map.getZoom(); - if (zoom > this.options.maxZoom || - zoom < this.options.minZoom) { - this._removeAllTiles(); - return; - } - - for (key in this._tiles) { - tile = this._tiles[key]; - tile.retain = tile.current; - } - - for (key in this._tiles) { - tile = this._tiles[key]; - if (tile.current && !tile.active) { - var coords = tile.coords; - if (!this._retainParent(coords.x, coords.y, coords.z, coords.z - 5)) { - this._retainChildren(coords.x, coords.y, coords.z, coords.z + 2); - } - } - } - - for (key in this._tiles) { - if (!this._tiles[key].retain) { - this._removeTile(key); - } - } - }, - - _removeTilesAtZoom: function (zoom) { - for (var key in this._tiles) { - if (this._tiles[key].coords.z !== zoom) { - continue; - } - this._removeTile(key); - } - }, - - _removeAllTiles: function () { - for (var key in this._tiles) { - this._removeTile(key); - } - }, - - _invalidateAll: function () { - for (var z in this._levels) { - L.DomUtil.remove(this._levels[z].el); - delete this._levels[z]; - } - this._removeAllTiles(); - - this._tileZoom = null; - }, - - _retainParent: function (x, y, z, minZoom) { - var x2 = Math.floor(x / 2), - y2 = Math.floor(y / 2), - z2 = z - 1, - coords2 = new L.Point(+x2, +y2); - coords2.z = +z2; - - var key = this._tileCoordsToKey(coords2), - tile = this._tiles[key]; - - if (tile && tile.active) { - tile.retain = true; - return true; - - } else if (tile && tile.loaded) { - tile.retain = true; - } - - if (z2 > minZoom) { - return this._retainParent(x2, y2, z2, minZoom); - } - - return false; - }, - - _retainChildren: function (x, y, z, maxZoom) { - - for (var i = 2 * x; i < 2 * x + 2; i++) { - for (var j = 2 * y; j < 2 * y + 2; j++) { - - var coords = new L.Point(i, j); - coords.z = z + 1; - - var key = this._tileCoordsToKey(coords), - tile = this._tiles[key]; - - if (tile && tile.active) { - tile.retain = true; - continue; - - } else if (tile && tile.loaded) { - tile.retain = true; - } - - if (z + 1 < maxZoom) { - this._retainChildren(i, j, z + 1, maxZoom); - } - } - } - }, - - _resetView: function (e) { - var animating = e && (e.pinch || e.flyTo); - this._setView(this._map.getCenter(), this._map.getZoom(), animating, animating); - }, - - _animateZoom: function (e) { - this._setView(e.center, e.zoom, true, e.noUpdate); - }, - - _setView: function (center, zoom, noPrune, noUpdate) { - var tileZoom = Math.round(zoom); - if ((this.options.maxZoom !== undefined && tileZoom > this.options.maxZoom) || - (this.options.minZoom !== undefined && tileZoom < this.options.minZoom)) { - tileZoom = undefined; - } - - var tileZoomChanged = this.options.updateWhenZooming && (tileZoom !== this._tileZoom); - - if (!noUpdate || tileZoomChanged) { - - this._tileZoom = tileZoom; - - if (this._abortLoading) { - this._abortLoading(); - } - - this._updateLevels(); - this._resetGrid(); - - if (tileZoom !== undefined) { - this._update(center); - } - - if (!noPrune) { - this._pruneTiles(); - } - - // Flag to prevent _updateOpacity from pruning tiles during - // a zoom anim or a pinch gesture - this._noPrune = !!noPrune; - } - - this._setZoomTransforms(center, zoom); - }, - - _setZoomTransforms: function (center, zoom) { - for (var i in this._levels) { - this._setZoomTransform(this._levels[i], center, zoom); - } - }, - - _setZoomTransform: function (level, center, zoom) { - var scale = this._map.getZoomScale(zoom, level.zoom), - translate = level.origin.multiplyBy(scale) - .subtract(this._map._getNewPixelOrigin(center, zoom)).round(); - - if (L.Browser.any3d) { - L.DomUtil.setTransform(level.el, translate, scale); - } else { - L.DomUtil.setPosition(level.el, translate); - } - }, - - _resetGrid: function () { - var map = this._map, - crs = map.options.crs, - tileSize = this._tileSize = this.getTileSize(), - tileZoom = this._tileZoom; - - var bounds = this._map.getPixelWorldBounds(this._tileZoom); - if (bounds) { - this._globalTileRange = this._pxBoundsToTileRange(bounds); - } - - this._wrapX = crs.wrapLng && !this.options.noWrap && [ - Math.floor(map.project([0, crs.wrapLng[0]], tileZoom).x / tileSize.x), - Math.ceil(map.project([0, crs.wrapLng[1]], tileZoom).x / tileSize.y) - ]; - this._wrapY = crs.wrapLat && !this.options.noWrap && [ - Math.floor(map.project([crs.wrapLat[0], 0], tileZoom).y / tileSize.x), - Math.ceil(map.project([crs.wrapLat[1], 0], tileZoom).y / tileSize.y) - ]; - }, - - _onMoveEnd: function () { - if (!this._map || this._map._animatingZoom) { return; } - - this._update(); - }, - - _getTiledPixelBounds: function (center) { - var map = this._map, - mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(), - scale = map.getZoomScale(mapZoom, this._tileZoom), - pixelCenter = map.project(center, this._tileZoom).floor(), - halfSize = map.getSize().divideBy(scale * 2); - - return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize)); - }, - - // Private method to load tiles in the grid's active zoom level according to map bounds - _update: function (center) { - var map = this._map; - if (!map) { return; } - var zoom = map.getZoom(); - - if (center === undefined) { center = map.getCenter(); } - if (this._tileZoom === undefined) { return; } // if out of minzoom/maxzoom - - var pixelBounds = this._getTiledPixelBounds(center), - tileRange = this._pxBoundsToTileRange(pixelBounds), - tileCenter = tileRange.getCenter(), - queue = [], - margin = this.options.keepBuffer, - noPruneRange = new L.Bounds(tileRange.getBottomLeft().subtract([margin, -margin]), - tileRange.getTopRight().add([margin, -margin])); - - for (var key in this._tiles) { - var c = this._tiles[key].coords; - if (c.z !== this._tileZoom || !noPruneRange.contains(L.point(c.x, c.y))) { - this._tiles[key].current = false; - } - } - - // _update just loads more tiles. If the tile zoom level differs too much - // from the map's, let _setView reset levels and prune old tiles. - if (Math.abs(zoom - this._tileZoom) > 1) { this._setView(center, zoom); return; } - - // create a queue of coordinates to load tiles from - for (var j = tileRange.min.y; j <= tileRange.max.y; j++) { - for (var i = tileRange.min.x; i <= tileRange.max.x; i++) { - var coords = new L.Point(i, j); - coords.z = this._tileZoom; - - if (!this._isValidTile(coords)) { continue; } - - var tile = this._tiles[this._tileCoordsToKey(coords)]; - if (tile) { - tile.current = true; - } else { - queue.push(coords); - } - } - } - - // sort tile queue to load tiles in order of their distance to center - queue.sort(function (a, b) { - return a.distanceTo(tileCenter) - b.distanceTo(tileCenter); - }); - - if (queue.length !== 0) { - // if it's the first batch of tiles to load - if (!this._loading) { - this._loading = true; - // @event loading: Event - // Fired when the grid layer starts loading tiles. - this.fire('loading'); - } - - // create DOM fragment to append tiles in one batch - var fragment = document.createDocumentFragment(); - - for (i = 0; i < queue.length; i++) { - this._addTile(queue[i], fragment); - } - - this._level.el.appendChild(fragment); - } - }, - - _isValidTile: function (coords) { - var crs = this._map.options.crs; - - if (!crs.infinite) { - // don't load tile if it's out of bounds and not wrapped - var bounds = this._globalTileRange; - if ((!crs.wrapLng && (coords.x < bounds.min.x || coords.x > bounds.max.x)) || - (!crs.wrapLat && (coords.y < bounds.min.y || coords.y > bounds.max.y))) { return false; } - } - - if (!this.options.bounds) { return true; } - - // don't load tile if it doesn't intersect the bounds in options - var tileBounds = this._tileCoordsToBounds(coords); - return L.latLngBounds(this.options.bounds).overlaps(tileBounds); - }, - - _keyToBounds: function (key) { - return this._tileCoordsToBounds(this._keyToTileCoords(key)); - }, - - // converts tile coordinates to its geographical bounds - _tileCoordsToBounds: function (coords) { - - var map = this._map, - tileSize = this.getTileSize(), - - nwPoint = coords.scaleBy(tileSize), - sePoint = nwPoint.add(tileSize), - - nw = map.unproject(nwPoint, coords.z), - se = map.unproject(sePoint, coords.z); - - if (!this.options.noWrap) { - nw = map.wrapLatLng(nw); - se = map.wrapLatLng(se); - } - - return new L.LatLngBounds(nw, se); - }, - - // converts tile coordinates to key for the tile cache - _tileCoordsToKey: function (coords) { - return coords.x + ':' + coords.y + ':' + coords.z; - }, - - // converts tile cache key to coordinates - _keyToTileCoords: function (key) { - var k = key.split(':'), - coords = new L.Point(+k[0], +k[1]); - coords.z = +k[2]; - return coords; - }, - - _removeTile: function (key) { - var tile = this._tiles[key]; - if (!tile) { return; } - - L.DomUtil.remove(tile.el); - - delete this._tiles[key]; - - // @event tileunload: TileEvent - // Fired when a tile is removed (e.g. when a tile goes off the screen). - this.fire('tileunload', { - tile: tile.el, - coords: this._keyToTileCoords(key) - }); - }, - - _initTile: function (tile) { - L.DomUtil.addClass(tile, 'leaflet-tile'); - - var tileSize = this.getTileSize(); - tile.style.width = tileSize.x + 'px'; - tile.style.height = tileSize.y + 'px'; - - tile.onselectstart = L.Util.falseFn; - tile.onmousemove = L.Util.falseFn; - - // update opacity on tiles in IE7-8 because of filter inheritance problems - if (L.Browser.ielt9 && this.options.opacity < 1) { - L.DomUtil.setOpacity(tile, this.options.opacity); - } - - // without this hack, tiles disappear after zoom on Chrome for Android - // https://github.com/Leaflet/Leaflet/issues/2078 - if (L.Browser.android && !L.Browser.android23) { - tile.style.WebkitBackfaceVisibility = 'hidden'; - } - }, - - _addTile: function (coords, container) { - var tilePos = this._getTilePos(coords), - key = this._tileCoordsToKey(coords); - - var tile = this.createTile(this._wrapCoords(coords), L.bind(this._tileReady, this, coords)); - - this._initTile(tile); - - // if createTile is defined with a second argument ("done" callback), - // we know that tile is async and will be ready later; otherwise - if (this.createTile.length < 2) { - // mark tile as ready, but delay one frame for opacity animation to happen - L.Util.requestAnimFrame(L.bind(this._tileReady, this, coords, null, tile)); - } - - L.DomUtil.setPosition(tile, tilePos); - - // save tile in cache - this._tiles[key] = { - el: tile, - coords: coords, - current: true - }; - - container.appendChild(tile); - // @event tileloadstart: TileEvent - // Fired when a tile is requested and starts loading. - this.fire('tileloadstart', { - tile: tile, - coords: coords - }); - }, - - _tileReady: function (coords, err, tile) { - if (!this._map) { return; } - - if (err) { - // @event tileerror: TileErrorEvent - // Fired when there is an error loading a tile. - this.fire('tileerror', { - error: err, - tile: tile, - coords: coords - }); - } - - var key = this._tileCoordsToKey(coords); - - tile = this._tiles[key]; - if (!tile) { return; } - - tile.loaded = +new Date(); - if (this._map._fadeAnimated) { - L.DomUtil.setOpacity(tile.el, 0); - L.Util.cancelAnimFrame(this._fadeFrame); - this._fadeFrame = L.Util.requestAnimFrame(this._updateOpacity, this); - } else { - tile.active = true; - this._pruneTiles(); - } - - if (!err) { - L.DomUtil.addClass(tile.el, 'leaflet-tile-loaded'); - - // @event tileload: TileEvent - // Fired when a tile loads. - this.fire('tileload', { - tile: tile.el, - coords: coords - }); - } - - if (this._noTilesToLoad()) { - this._loading = false; - // @event load: Event - // Fired when the grid layer loaded all visible tiles. - this.fire('load'); - - if (L.Browser.ielt9 || !this._map._fadeAnimated) { - L.Util.requestAnimFrame(this._pruneTiles, this); - } else { - // Wait a bit more than 0.2 secs (the duration of the tile fade-in) - // to trigger a pruning. - setTimeout(L.bind(this._pruneTiles, this), 250); - } - } - }, - - _getTilePos: function (coords) { - return coords.scaleBy(this.getTileSize()).subtract(this._level.origin); - }, - - _wrapCoords: function (coords) { - var newCoords = new L.Point( - this._wrapX ? L.Util.wrapNum(coords.x, this._wrapX) : coords.x, - this._wrapY ? L.Util.wrapNum(coords.y, this._wrapY) : coords.y); - newCoords.z = coords.z; - return newCoords; - }, - - _pxBoundsToTileRange: function (bounds) { - var tileSize = this.getTileSize(); - return new L.Bounds( - bounds.min.unscaleBy(tileSize).floor(), - bounds.max.unscaleBy(tileSize).ceil().subtract([1, 1])); - }, - - _noTilesToLoad: function () { - for (var key in this._tiles) { - if (!this._tiles[key].loaded) { return false; } - } - return true; - } -}); - -// @factory L.gridLayer(options?: GridLayer options) -// Creates a new instance of GridLayer with the supplied options. -L.gridLayer = function (options) { - return new L.GridLayer(options); -}; - - - + + + +/* + * @class GridLayer + * @inherits Layer + * @aka L.GridLayer + * + * Generic class for handling a tiled grid of HTML elements. This is the base class for all tile layers and replaces `TileLayer.Canvas`. + * GridLayer can be extended to create a tiled grid of HTML elements like ``, `` or `
`. GridLayer will handle creating and animating these DOM elements for you. + * + * + * @section Synchronous usage + * @example + * + * To create a custom layer, extend GridLayer and implement the `createTile()` method, which will be passed a `Point` object with the `x`, `y`, and `z` (zoom level) coordinates to draw your tile. + * + * ```js + * var CanvasLayer = L.GridLayer.extend({ + * createTile: function(coords){ + * // create a element for drawing + * var tile = L.DomUtil.create('canvas', 'leaflet-tile'); + * + * // setup tile width and height according to the options + * var size = this.getTileSize(); + * tile.width = size.x; + * tile.height = size.y; + * + * // get a canvas context and draw something on it using coords.x, coords.y and coords.z + * var ctx = tile.getContext('2d'); + * + * // return the tile so it can be rendered on screen + * return tile; + * } + * }); + * ``` + * + * @section Asynchronous usage + * @example + * + * Tile creation can also be asynchronous, this is useful when using a third-party drawing library. Once the tile is finished drawing it can be passed to the `done()` callback. + * + * ```js + * var CanvasLayer = L.GridLayer.extend({ + * createTile: function(coords, done){ + * var error; + * + * // create a element for drawing + * var tile = L.DomUtil.create('canvas', 'leaflet-tile'); + * + * // setup tile width and height according to the options + * var size = this.getTileSize(); + * tile.width = size.x; + * tile.height = size.y; + * + * // draw something asynchronously and pass the tile to the done() callback + * setTimeout(function() { + * done(error, tile); + * }, 1000); + * + * return tile; + * } + * }); + * ``` + * + * @section + */ + + +L.GridLayer = L.Layer.extend({ + + // @section + // @aka GridLayer options + options: { + // @option tileSize: Number|Point = 256 + // Width and height of tiles in the grid. Use a number if width and height are equal, or `L.point(width, height)` otherwise. + tileSize: 256, + + // @option opacity: Number = 1.0 + // Opacity of the tiles. Can be used in the `createTile()` function. + opacity: 1, + + // @option updateWhenIdle: Boolean = depends + // If `false`, new tiles are loaded during panning, otherwise only after it (for better performance). `true` by default on mobile browsers, otherwise `false`. + updateWhenIdle: L.Browser.mobile, + + // @option updateWhenZooming: Boolean = true + // By default, a smooth zoom animation (during a [touch zoom](#map-touchzoom) or a [`flyTo()`](#map-flyto)) will update grid layers every integer zoom level. Setting this option to `false` will update the grid layer only when the smooth animation ends. + updateWhenZooming: true, + + // @option updateInterval: Number = 200 + // Tiles will not update more than once every `updateInterval` milliseconds when panning. + updateInterval: 200, + + // @option attribution: String = null + // String to be shown in the attribution control, describes the layer data, e.g. "© Mapbox". + attribution: null, + + // @option zIndex: Number = 1 + // The explicit zIndex of the tile layer. + zIndex: 1, + + // @option bounds: LatLngBounds = undefined + // If set, tiles will only be loaded inside the set `LatLngBounds`. + bounds: null, + + // @option minZoom: Number = 0 + // The minimum zoom level that tiles will be loaded at. By default the entire map. + minZoom: 0, + + // @option maxZoom: Number = undefined + // The maximum zoom level that tiles will be loaded at. + maxZoom: undefined, + + // @option noWrap: Boolean = false + // Whether the layer is wrapped around the antimeridian. If `true`, the + // GridLayer will only be displayed once at low zoom levels. Has no + // effect when the [map CRS](#map-crs) doesn't wrap around. + noWrap: false, + + // @option pane: String = 'tilePane' + // `Map pane` where the grid layer will be added. + pane: 'tilePane', + + // @option className: String = '' + // A custom class name to assign to the tile layer. Empty by default. + className: '', + + // @option keepBuffer: Number = 2 + // When panning the map, keep this many rows and columns of tiles before unloading them. + keepBuffer: 2 + }, + + initialize: function (options) { + L.setOptions(this, options); + }, + + onAdd: function () { + this._initContainer(); + + this._levels = {}; + this._tiles = {}; + + this._resetView(); + this._update(); + }, + + beforeAdd: function (map) { + map._addZoomLimit(this); + }, + + onRemove: function (map) { + this._removeAllTiles(); + L.DomUtil.remove(this._container); + map._removeZoomLimit(this); + this._container = null; + this._tileZoom = null; + }, + + // @method bringToFront: this + // Brings the tile layer to the top of all tile layers. + bringToFront: function () { + if (this._map) { + L.DomUtil.toFront(this._container); + this._setAutoZIndex(Math.max); + } + return this; + }, + + // @method bringToBack: this + // Brings the tile layer to the bottom of all tile layers. + bringToBack: function () { + if (this._map) { + L.DomUtil.toBack(this._container); + this._setAutoZIndex(Math.min); + } + return this; + }, + + // @method getAttribution: String + // Used by the `attribution control`, returns the [attribution option](#gridlayer-attribution). + getAttribution: function () { + return this.options.attribution; + }, + + // @method getContainer: HTMLElement + // Returns the HTML element that contains the tiles for this layer. + getContainer: function () { + return this._container; + }, + + // @method setOpacity(opacity: Number): this + // Changes the [opacity](#gridlayer-opacity) of the grid layer. + setOpacity: function (opacity) { + this.options.opacity = opacity; + this._updateOpacity(); + return this; + }, + + // @method setZIndex(zIndex: Number): this + // Changes the [zIndex](#gridlayer-zindex) of the grid layer. + setZIndex: function (zIndex) { + this.options.zIndex = zIndex; + this._updateZIndex(); + + return this; + }, + + // @method isLoading: Boolean + // Returns `true` if any tile in the grid layer has not finished loading. + isLoading: function () { + return this._loading; + }, + + // @method redraw: this + // Causes the layer to clear all the tiles and request them again. + redraw: function () { + if (this._map) { + this._removeAllTiles(); + this._update(); + } + return this; + }, + + getEvents: function () { + var events = { + viewprereset: this._invalidateAll, + viewreset: this._resetView, + zoom: this._resetView, + moveend: this._onMoveEnd + }; + + if (!this.options.updateWhenIdle) { + // update tiles on move, but not more often than once per given interval + if (!this._onMove) { + this._onMove = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this); + } + + events.move = this._onMove; + } + + if (this._zoomAnimated) { + events.zoomanim = this._animateZoom; + } + + return events; + }, + + // @section Extension methods + // Layers extending `GridLayer` shall reimplement the following method. + // @method createTile(coords: Object, done?: Function): HTMLElement + // Called only internally, must be overriden by classes extending `GridLayer`. + // Returns the `HTMLElement` corresponding to the given `coords`. If the `done` callback + // is specified, it must be called when the tile has finished loading and drawing. + createTile: function () { + return document.createElement('div'); + }, + + // @section + // @method getTileSize: Point + // Normalizes the [tileSize option](#gridlayer-tilesize) into a point. Used by the `createTile()` method. + getTileSize: function () { + var s = this.options.tileSize; + return s instanceof L.Point ? s : new L.Point(s, s); + }, + + _updateZIndex: function () { + if (this._container && this.options.zIndex !== undefined && this.options.zIndex !== null) { + this._container.style.zIndex = this.options.zIndex; + } + }, + + _setAutoZIndex: function (compare) { + // go through all other layers of the same pane, set zIndex to max + 1 (front) or min - 1 (back) + + var layers = this.getPane().children, + edgeZIndex = -compare(-Infinity, Infinity); // -Infinity for max, Infinity for min + + for (var i = 0, len = layers.length, zIndex; i < len; i++) { + + zIndex = layers[i].style.zIndex; + + if (layers[i] !== this._container && zIndex) { + edgeZIndex = compare(edgeZIndex, +zIndex); + } + } + + if (isFinite(edgeZIndex)) { + this.options.zIndex = edgeZIndex + compare(-1, 1); + this._updateZIndex(); + } + }, + + _updateOpacity: function () { + if (!this._map) { return; } + + // IE doesn't inherit filter opacity properly, so we're forced to set it on tiles + if (L.Browser.ielt9) { return; } + + L.DomUtil.setOpacity(this._container, this.options.opacity); + + var now = +new Date(), + nextFrame = false, + willPrune = false; + + for (var key in this._tiles) { + var tile = this._tiles[key]; + if (!tile.current || !tile.loaded) { continue; } + + var fade = Math.min(1, (now - tile.loaded) / 200); + + L.DomUtil.setOpacity(tile.el, fade); + if (fade < 1) { + nextFrame = true; + } else { + if (tile.active) { willPrune = true; } + tile.active = true; + } + } + + if (willPrune && !this._noPrune) { this._pruneTiles(); } + + if (nextFrame) { + L.Util.cancelAnimFrame(this._fadeFrame); + this._fadeFrame = L.Util.requestAnimFrame(this._updateOpacity, this); + } + }, + + _initContainer: function () { + if (this._container) { return; } + + this._container = L.DomUtil.create('div', 'leaflet-layer ' + (this.options.className || '')); + this._updateZIndex(); + + if (this.options.opacity < 1) { + this._updateOpacity(); + } + + this.getPane().appendChild(this._container); + }, + + _updateLevels: function () { + + var zoom = this._tileZoom, + maxZoom = this.options.maxZoom; + + if (zoom === undefined) { return undefined; } + + for (var z in this._levels) { + if (this._levels[z].el.children.length || z === zoom) { + this._levels[z].el.style.zIndex = maxZoom - Math.abs(zoom - z); + } else { + L.DomUtil.remove(this._levels[z].el); + this._removeTilesAtZoom(z); + delete this._levels[z]; + } + } + + var level = this._levels[zoom], + map = this._map; + + if (!level) { + level = this._levels[zoom] = {}; + + level.el = L.DomUtil.create('div', 'leaflet-tile-container leaflet-zoom-animated', this._container); + level.el.style.zIndex = maxZoom; + + level.origin = map.project(map.unproject(map.getPixelOrigin()), zoom).round(); + level.zoom = zoom; + + this._setZoomTransform(level, map.getCenter(), map.getZoom()); + + // force the browser to consider the newly added element for transition + L.Util.falseFn(level.el.offsetWidth); + } + + this._level = level; + + return level; + }, + + _pruneTiles: function () { + if (!this._map) { + return; + } + + var key, tile; + + var zoom = this._map.getZoom(); + if (zoom > this.options.maxZoom || + zoom < this.options.minZoom) { + this._removeAllTiles(); + return; + } + + for (key in this._tiles) { + tile = this._tiles[key]; + tile.retain = tile.current; + } + + for (key in this._tiles) { + tile = this._tiles[key]; + if (tile.current && !tile.active) { + var coords = tile.coords; + if (!this._retainParent(coords.x, coords.y, coords.z, coords.z - 5)) { + this._retainChildren(coords.x, coords.y, coords.z, coords.z + 2); + } + } + } + + for (key in this._tiles) { + if (!this._tiles[key].retain) { + this._removeTile(key); + } + } + }, + + _removeTilesAtZoom: function (zoom) { + for (var key in this._tiles) { + if (this._tiles[key].coords.z !== zoom) { + continue; + } + this._removeTile(key); + } + }, + + _removeAllTiles: function () { + for (var key in this._tiles) { + this._removeTile(key); + } + }, + + _invalidateAll: function () { + for (var z in this._levels) { + L.DomUtil.remove(this._levels[z].el); + delete this._levels[z]; + } + this._removeAllTiles(); + + this._tileZoom = null; + }, + + _retainParent: function (x, y, z, minZoom) { + var x2 = Math.floor(x / 2), + y2 = Math.floor(y / 2), + z2 = z - 1, + coords2 = new L.Point(+x2, +y2); + coords2.z = +z2; + + var key = this._tileCoordsToKey(coords2), + tile = this._tiles[key]; + + if (tile && tile.active) { + tile.retain = true; + return true; + + } else if (tile && tile.loaded) { + tile.retain = true; + } + + if (z2 > minZoom) { + return this._retainParent(x2, y2, z2, minZoom); + } + + return false; + }, + + _retainChildren: function (x, y, z, maxZoom) { + + for (var i = 2 * x; i < 2 * x + 2; i++) { + for (var j = 2 * y; j < 2 * y + 2; j++) { + + var coords = new L.Point(i, j); + coords.z = z + 1; + + var key = this._tileCoordsToKey(coords), + tile = this._tiles[key]; + + if (tile && tile.active) { + tile.retain = true; + continue; + + } else if (tile && tile.loaded) { + tile.retain = true; + } + + if (z + 1 < maxZoom) { + this._retainChildren(i, j, z + 1, maxZoom); + } + } + } + }, + + _resetView: function (e) { + var animating = e && (e.pinch || e.flyTo); + this._setView(this._map.getCenter(), this._map.getZoom(), animating, animating); + }, + + _animateZoom: function (e) { + this._setView(e.center, e.zoom, true, e.noUpdate); + }, + + _setView: function (center, zoom, noPrune, noUpdate) { + var tileZoom = Math.round(zoom); + if ((this.options.maxZoom !== undefined && tileZoom > this.options.maxZoom) || + (this.options.minZoom !== undefined && tileZoom < this.options.minZoom)) { + tileZoom = undefined; + } + + var tileZoomChanged = this.options.updateWhenZooming && (tileZoom !== this._tileZoom); + + if (!noUpdate || tileZoomChanged) { + + this._tileZoom = tileZoom; + + if (this._abortLoading) { + this._abortLoading(); + } + + this._updateLevels(); + this._resetGrid(); + + if (tileZoom !== undefined) { + this._update(center); + } + + if (!noPrune) { + this._pruneTiles(); + } + + // Flag to prevent _updateOpacity from pruning tiles during + // a zoom anim or a pinch gesture + this._noPrune = !!noPrune; + } + + this._setZoomTransforms(center, zoom); + }, + + _setZoomTransforms: function (center, zoom) { + for (var i in this._levels) { + this._setZoomTransform(this._levels[i], center, zoom); + } + }, + + _setZoomTransform: function (level, center, zoom) { + var scale = this._map.getZoomScale(zoom, level.zoom), + translate = level.origin.multiplyBy(scale) + .subtract(this._map._getNewPixelOrigin(center, zoom)).round(); + + if (L.Browser.any3d) { + L.DomUtil.setTransform(level.el, translate, scale); + } else { + L.DomUtil.setPosition(level.el, translate); + } + }, + + _resetGrid: function () { + var map = this._map, + crs = map.options.crs, + tileSize = this._tileSize = this.getTileSize(), + tileZoom = this._tileZoom; + + var bounds = this._map.getPixelWorldBounds(this._tileZoom); + if (bounds) { + this._globalTileRange = this._pxBoundsToTileRange(bounds); + } + + this._wrapX = crs.wrapLng && !this.options.noWrap && [ + Math.floor(map.project([0, crs.wrapLng[0]], tileZoom).x / tileSize.x), + Math.ceil(map.project([0, crs.wrapLng[1]], tileZoom).x / tileSize.y) + ]; + this._wrapY = crs.wrapLat && !this.options.noWrap && [ + Math.floor(map.project([crs.wrapLat[0], 0], tileZoom).y / tileSize.x), + Math.ceil(map.project([crs.wrapLat[1], 0], tileZoom).y / tileSize.y) + ]; + }, + + _onMoveEnd: function () { + if (!this._map || this._map._animatingZoom) { return; } + + this._update(); + }, + + _getTiledPixelBounds: function (center) { + var map = this._map, + mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(), + scale = map.getZoomScale(mapZoom, this._tileZoom), + pixelCenter = map.project(center, this._tileZoom).floor(), + halfSize = map.getSize().divideBy(scale * 2); + + return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize)); + }, + + // Private method to load tiles in the grid's active zoom level according to map bounds + _update: function (center) { + var map = this._map; + if (!map) { return; } + var zoom = map.getZoom(); + + if (center === undefined) { center = map.getCenter(); } + if (this._tileZoom === undefined) { return; } // if out of minzoom/maxzoom + + var pixelBounds = this._getTiledPixelBounds(center), + tileRange = this._pxBoundsToTileRange(pixelBounds), + tileCenter = tileRange.getCenter(), + queue = [], + margin = this.options.keepBuffer, + noPruneRange = new L.Bounds(tileRange.getBottomLeft().subtract([margin, -margin]), + tileRange.getTopRight().add([margin, -margin])); + + for (var key in this._tiles) { + var c = this._tiles[key].coords; + if (c.z !== this._tileZoom || !noPruneRange.contains(L.point(c.x, c.y))) { + this._tiles[key].current = false; + } + } + + // _update just loads more tiles. If the tile zoom level differs too much + // from the map's, let _setView reset levels and prune old tiles. + if (Math.abs(zoom - this._tileZoom) > 1) { this._setView(center, zoom); return; } + + // create a queue of coordinates to load tiles from + for (var j = tileRange.min.y; j <= tileRange.max.y; j++) { + for (var i = tileRange.min.x; i <= tileRange.max.x; i++) { + var coords = new L.Point(i, j); + coords.z = this._tileZoom; + + if (!this._isValidTile(coords)) { continue; } + + var tile = this._tiles[this._tileCoordsToKey(coords)]; + if (tile) { + tile.current = true; + } else { + queue.push(coords); + } + } + } + + // sort tile queue to load tiles in order of their distance to center + queue.sort(function (a, b) { + return a.distanceTo(tileCenter) - b.distanceTo(tileCenter); + }); + + if (queue.length !== 0) { + // if it's the first batch of tiles to load + if (!this._loading) { + this._loading = true; + // @event loading: Event + // Fired when the grid layer starts loading tiles. + this.fire('loading'); + } + + // create DOM fragment to append tiles in one batch + var fragment = document.createDocumentFragment(); + + for (i = 0; i < queue.length; i++) { + this._addTile(queue[i], fragment); + } + + this._level.el.appendChild(fragment); + } + }, + + _isValidTile: function (coords) { + var crs = this._map.options.crs; + + if (!crs.infinite) { + // don't load tile if it's out of bounds and not wrapped + var bounds = this._globalTileRange; + if ((!crs.wrapLng && (coords.x < bounds.min.x || coords.x > bounds.max.x)) || + (!crs.wrapLat && (coords.y < bounds.min.y || coords.y > bounds.max.y))) { return false; } + } + + if (!this.options.bounds) { return true; } + + // don't load tile if it doesn't intersect the bounds in options + var tileBounds = this._tileCoordsToBounds(coords); + return L.latLngBounds(this.options.bounds).overlaps(tileBounds); + }, + + _keyToBounds: function (key) { + return this._tileCoordsToBounds(this._keyToTileCoords(key)); + }, + + // converts tile coordinates to its geographical bounds + _tileCoordsToBounds: function (coords) { + + var map = this._map, + tileSize = this.getTileSize(), + + nwPoint = coords.scaleBy(tileSize), + sePoint = nwPoint.add(tileSize), + + nw = map.unproject(nwPoint, coords.z), + se = map.unproject(sePoint, coords.z); + + if (!this.options.noWrap) { + nw = map.wrapLatLng(nw); + se = map.wrapLatLng(se); + } + + return new L.LatLngBounds(nw, se); + }, + + // converts tile coordinates to key for the tile cache + _tileCoordsToKey: function (coords) { + return coords.x + ':' + coords.y + ':' + coords.z; + }, + + // converts tile cache key to coordinates + _keyToTileCoords: function (key) { + var k = key.split(':'), + coords = new L.Point(+k[0], +k[1]); + coords.z = +k[2]; + return coords; + }, + + _removeTile: function (key) { + var tile = this._tiles[key]; + if (!tile) { return; } + + L.DomUtil.remove(tile.el); + + delete this._tiles[key]; + + // @event tileunload: TileEvent + // Fired when a tile is removed (e.g. when a tile goes off the screen). + this.fire('tileunload', { + tile: tile.el, + coords: this._keyToTileCoords(key) + }); + }, + + _initTile: function (tile) { + L.DomUtil.addClass(tile, 'leaflet-tile'); + + var tileSize = this.getTileSize(); + tile.style.width = tileSize.x + 'px'; + tile.style.height = tileSize.y + 'px'; + + tile.onselectstart = L.Util.falseFn; + tile.onmousemove = L.Util.falseFn; + + // update opacity on tiles in IE7-8 because of filter inheritance problems + if (L.Browser.ielt9 && this.options.opacity < 1) { + L.DomUtil.setOpacity(tile, this.options.opacity); + } + + // without this hack, tiles disappear after zoom on Chrome for Android + // https://github.com/Leaflet/Leaflet/issues/2078 + if (L.Browser.android && !L.Browser.android23) { + tile.style.WebkitBackfaceVisibility = 'hidden'; + } + }, + + _addTile: function (coords, container) { + var tilePos = this._getTilePos(coords), + key = this._tileCoordsToKey(coords); + + var tile = this.createTile(this._wrapCoords(coords), L.bind(this._tileReady, this, coords)); + + this._initTile(tile); + + // if createTile is defined with a second argument ("done" callback), + // we know that tile is async and will be ready later; otherwise + if (this.createTile.length < 2) { + // mark tile as ready, but delay one frame for opacity animation to happen + L.Util.requestAnimFrame(L.bind(this._tileReady, this, coords, null, tile)); + } + + L.DomUtil.setPosition(tile, tilePos); + + // save tile in cache + this._tiles[key] = { + el: tile, + coords: coords, + current: true + }; + + container.appendChild(tile); + // @event tileloadstart: TileEvent + // Fired when a tile is requested and starts loading. + this.fire('tileloadstart', { + tile: tile, + coords: coords + }); + }, + + _tileReady: function (coords, err, tile) { + if (!this._map) { return; } + + if (err) { + // @event tileerror: TileErrorEvent + // Fired when there is an error loading a tile. + this.fire('tileerror', { + error: err, + tile: tile, + coords: coords + }); + } + + var key = this._tileCoordsToKey(coords); + + tile = this._tiles[key]; + if (!tile) { return; } + + tile.loaded = +new Date(); + if (this._map._fadeAnimated) { + L.DomUtil.setOpacity(tile.el, 0); + L.Util.cancelAnimFrame(this._fadeFrame); + this._fadeFrame = L.Util.requestAnimFrame(this._updateOpacity, this); + } else { + tile.active = true; + this._pruneTiles(); + } + + if (!err) { + L.DomUtil.addClass(tile.el, 'leaflet-tile-loaded'); + + // @event tileload: TileEvent + // Fired when a tile loads. + this.fire('tileload', { + tile: tile.el, + coords: coords + }); + } + + if (this._noTilesToLoad()) { + this._loading = false; + // @event load: Event + // Fired when the grid layer loaded all visible tiles. + this.fire('load'); + + if (L.Browser.ielt9 || !this._map._fadeAnimated) { + L.Util.requestAnimFrame(this._pruneTiles, this); + } else { + // Wait a bit more than 0.2 secs (the duration of the tile fade-in) + // to trigger a pruning. + setTimeout(L.bind(this._pruneTiles, this), 250); + } + } + }, + + _getTilePos: function (coords) { + return coords.scaleBy(this.getTileSize()).subtract(this._level.origin); + }, + + _wrapCoords: function (coords) { + var newCoords = new L.Point( + this._wrapX ? L.Util.wrapNum(coords.x, this._wrapX) : coords.x, + this._wrapY ? L.Util.wrapNum(coords.y, this._wrapY) : coords.y); + newCoords.z = coords.z; + return newCoords; + }, + + _pxBoundsToTileRange: function (bounds) { + var tileSize = this.getTileSize(); + return new L.Bounds( + bounds.min.unscaleBy(tileSize).floor(), + bounds.max.unscaleBy(tileSize).ceil().subtract([1, 1])); + }, + + _noTilesToLoad: function () { + for (var key in this._tiles) { + if (!this._tiles[key].loaded) { return false; } + } + return true; + } +}); + +// @factory L.gridLayer(options?: GridLayer options) +// Creates a new instance of GridLayer with the supplied options. +L.gridLayer = function (options) { + return new L.GridLayer(options); +}; + + + /* * @class TileLayer * @inherits GridLayer @@ -4893,9 +4893,9 @@ L.TileLayer = L.GridLayer.extend({ L.tileLayer = function (url, options) { return new L.TileLayer(url, options); }; - - - + + + /* * @class TileLayer.WMS * @inherits TileLayer @@ -5025,9 +5025,9 @@ L.TileLayer.WMS = L.TileLayer.extend({ L.tileLayer.wms = function (url, options) { return new L.TileLayer.WMS(url, options); }; - - - + + + /* * @class ImageOverlay * @aka L.ImageOverlay @@ -5231,9 +5231,9 @@ L.ImageOverlay = L.Layer.extend({ L.imageOverlay = function (url, bounds, options) { return new L.ImageOverlay(url, bounds, options); }; - - - + + + /* * @class Icon * @aka L.Icon @@ -5377,61 +5377,61 @@ L.Icon = L.Class.extend({ L.icon = function (options) { return new L.Icon(options); }; - - - -/* - * @miniclass Icon.Default (Icon) - * @aka L.Icon.Default - * @section - * - * A trivial subclass of `Icon`, represents the icon to use in `Marker`s when - * no icon is specified. Points to the blue marker image distributed with Leaflet - * releases. - * - * In order to change the default icon, just change the properties of `L.Icon.Default.prototype.options` - * (which is a set of `Icon options`). - */ - -L.Icon.Default = L.Icon.extend({ - - options: { - iconUrl: 'marker-icon.png', - iconRetinaUrl: 'marker-icon-2x.png', - shadowUrl: 'marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] - }, - - _getIconUrl: function (name) { - if (!L.Icon.Default.imagePath) { // Deprecated, backwards-compatibility only - L.Icon.Default.imagePath = this._detectIconPath(); - } - - // @option imagePath: String - // `L.Icon.Default` will try to auto-detect the absolute location of the - // blue icon images. If you are placing these images in a non-standard - // way, set this option to point to the right absolute path. - return (this.options.imagePath || L.Icon.Default.imagePath) + L.Icon.prototype._getIconUrl.call(this, name); - }, - - _detectIconPath: function () { - var el = L.DomUtil.create('div', 'leaflet-default-icon-path', document.body); - var path = L.DomUtil.getStyle(el, 'background-image') || - L.DomUtil.getStyle(el, 'backgroundImage'); // IE8 - - document.body.removeChild(el); - - return path.indexOf('url') === 0 ? - path.replace(/^url\([\"\']?/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : ''; - } -}); - - - + + + +/* + * @miniclass Icon.Default (Icon) + * @aka L.Icon.Default + * @section + * + * A trivial subclass of `Icon`, represents the icon to use in `Marker`s when + * no icon is specified. Points to the blue marker image distributed with Leaflet + * releases. + * + * In order to change the default icon, just change the properties of `L.Icon.Default.prototype.options` + * (which is a set of `Icon options`). + */ + +L.Icon.Default = L.Icon.extend({ + + options: { + iconUrl: 'marker-icon.png', + iconRetinaUrl: 'marker-icon-2x.png', + shadowUrl: 'marker-shadow.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + tooltipAnchor: [16, -28], + shadowSize: [41, 41] + }, + + _getIconUrl: function (name) { + if (!L.Icon.Default.imagePath) { // Deprecated, backwards-compatibility only + L.Icon.Default.imagePath = this._detectIconPath(); + } + + // @option imagePath: String + // `L.Icon.Default` will try to auto-detect the absolute location of the + // blue icon images. If you are placing these images in a non-standard + // way, set this option to point to the right absolute path. + return (this.options.imagePath || L.Icon.Default.imagePath) + L.Icon.prototype._getIconUrl.call(this, name); + }, + + _detectIconPath: function () { + var el = L.DomUtil.create('div', 'leaflet-default-icon-path', document.body); + var path = L.DomUtil.getStyle(el, 'background-image') || + L.DomUtil.getStyle(el, 'backgroundImage'); // IE8 + + document.body.removeChild(el); + + return path.indexOf('url') === 0 ? + path.replace(/^url\([\"\']?/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : ''; + } +}); + + + /* * @class Marker * @inherits Interactive layer @@ -5765,76 +5765,76 @@ L.Marker = L.Layer.extend({ L.marker = function (latlng, options) { return new L.Marker(latlng, options); }; - - - -/* - * @class DivIcon - * @aka L.DivIcon - * @inherits Icon - * - * Represents a lightweight icon for markers that uses a simple `
` - * element instead of an image. Inherits from `Icon` but ignores the `iconUrl` and shadow options. - * - * @example - * ```js - * var myIcon = L.divIcon({className: 'my-div-icon'}); - * // you can set .my-div-icon styles in CSS - * - * L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); - * ``` - * - * By default, it has a 'leaflet-div-icon' CSS class and is styled as a little white square with a shadow. - */ - -L.DivIcon = L.Icon.extend({ - options: { - // @section - // @aka DivIcon options - iconSize: [12, 12], // also can be set through CSS - - // iconAnchor: (Point), - // popupAnchor: (Point), - - // @option html: String = '' - // Custom HTML code to put inside the div element, empty by default. - html: false, - - // @option bgPos: Point = [0, 0] - // Optional relative position of the background, in pixels - bgPos: null, - - className: 'leaflet-div-icon' - }, - - createIcon: function (oldIcon) { - var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'), - options = this.options; - - div.innerHTML = options.html !== false ? options.html : ''; - - if (options.bgPos) { - var bgPos = L.point(options.bgPos); - div.style.backgroundPosition = (-bgPos.x) + 'px ' + (-bgPos.y) + 'px'; - } - this._setIconStyles(div, 'icon'); - - return div; - }, - - createShadow: function () { - return null; - } -}); - -// @factory L.divIcon(options: DivIcon options) -// Creates a `DivIcon` instance with the given options. -L.divIcon = function (options) { - return new L.DivIcon(options); -}; - - - + + + +/* + * @class DivIcon + * @aka L.DivIcon + * @inherits Icon + * + * Represents a lightweight icon for markers that uses a simple `
` + * element instead of an image. Inherits from `Icon` but ignores the `iconUrl` and shadow options. + * + * @example + * ```js + * var myIcon = L.divIcon({className: 'my-div-icon'}); + * // you can set .my-div-icon styles in CSS + * + * L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); + * ``` + * + * By default, it has a 'leaflet-div-icon' CSS class and is styled as a little white square with a shadow. + */ + +L.DivIcon = L.Icon.extend({ + options: { + // @section + // @aka DivIcon options + iconSize: [12, 12], // also can be set through CSS + + // iconAnchor: (Point), + // popupAnchor: (Point), + + // @option html: String = '' + // Custom HTML code to put inside the div element, empty by default. + html: false, + + // @option bgPos: Point = [0, 0] + // Optional relative position of the background, in pixels + bgPos: null, + + className: 'leaflet-div-icon' + }, + + createIcon: function (oldIcon) { + var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'), + options = this.options; + + div.innerHTML = options.html !== false ? options.html : ''; + + if (options.bgPos) { + var bgPos = L.point(options.bgPos); + div.style.backgroundPosition = (-bgPos.x) + 'px ' + (-bgPos.y) + 'px'; + } + this._setIconStyles(div, 'icon'); + + return div; + }, + + createShadow: function () { + return null; + } +}); + +// @factory L.divIcon(options: DivIcon options) +// Creates a `DivIcon` instance with the given options. +L.divIcon = function (options) { + return new L.DivIcon(options); +}; + + + /* * @class DivOverlay * @inherits Layer @@ -6032,9 +6032,9 @@ L.DivOverlay = L.Layer.extend({ } }); - - - + + + /* * @class Popup * @inherits DivOverlay @@ -6369,184 +6369,184 @@ L.Map.include({ return this; } }); - - - -/* - * @namespace Layer - * @section Popup methods example - * - * All layers share a set of methods convenient for binding popups to it. - * - * ```js - * var layer = L.Polygon(latlngs).bindPopup('Hi There!').addTo(map); - * layer.openPopup(); - * layer.closePopup(); - * ``` - * - * Popups will also be automatically opened when the layer is clicked on and closed when the layer is removed from the map or another popup is opened. - */ - -// @section Popup methods -L.Layer.include({ - - // @method bindPopup(content: String|HTMLElement|Function|Popup, options?: Popup options): this - // Binds a popup to the layer with the passed `content` and sets up the - // neccessary event listeners. If a `Function` is passed it will receive - // the layer as the first argument and should return a `String` or `HTMLElement`. - bindPopup: function (content, options) { - - if (content instanceof L.Popup) { - L.setOptions(content, options); - this._popup = content; - content._source = this; - } else { - if (!this._popup || options) { - this._popup = new L.Popup(options, this); - } - this._popup.setContent(content); - } - - if (!this._popupHandlersAdded) { - this.on({ - click: this._openPopup, - remove: this.closePopup, - move: this._movePopup - }); - this._popupHandlersAdded = true; - } - - return this; - }, - - // @method unbindPopup(): this - // Removes the popup previously bound with `bindPopup`. - unbindPopup: function () { - if (this._popup) { - this.off({ - click: this._openPopup, - remove: this.closePopup, - move: this._movePopup - }); - this._popupHandlersAdded = false; - this._popup = null; - } - return this; - }, - - // @method openPopup(latlng?: LatLng): this - // Opens the bound popup at the specificed `latlng` or at the default popup anchor if no `latlng` is passed. - openPopup: function (layer, latlng) { - if (!(layer instanceof L.Layer)) { - latlng = layer; - layer = this; - } - - if (layer instanceof L.FeatureGroup) { - for (var id in this._layers) { - layer = this._layers[id]; - break; - } - } - - if (!latlng) { - latlng = layer.getCenter ? layer.getCenter() : layer.getLatLng(); - } - - if (this._popup && this._map) { - // set popup source to this layer - this._popup._source = layer; - - // update the popup (content, layout, ect...) - this._popup.update(); - - // open the popup on the map - this._map.openPopup(this._popup, latlng); - } - - return this; - }, - - // @method closePopup(): this - // Closes the popup bound to this layer if it is open. - closePopup: function () { - if (this._popup) { - this._popup._close(); - } - return this; - }, - - // @method togglePopup(): this - // Opens or closes the popup bound to this layer depending on its current state. - togglePopup: function (target) { - if (this._popup) { - if (this._popup._map) { - this.closePopup(); - } else { - this.openPopup(target); - } - } - return this; - }, - - // @method isPopupOpen(): boolean - // Returns `true` if the popup bound to this layer is currently open. - isPopupOpen: function () { - return this._popup.isOpen(); - }, - - // @method setPopupContent(content: String|HTMLElement|Popup): this - // Sets the content of the popup bound to this layer. - setPopupContent: function (content) { - if (this._popup) { - this._popup.setContent(content); - } - return this; - }, - - // @method getPopup(): Popup - // Returns the popup bound to this layer. - getPopup: function () { - return this._popup; - }, - - _openPopup: function (e) { - var layer = e.layer || e.target; - - if (!this._popup) { - return; - } - - if (!this._map) { - return; - } - - // prevent map click - L.DomEvent.stop(e); - - // if this inherits from Path its a vector and we can just - // open the popup at the new location - if (layer instanceof L.Path) { - this.openPopup(e.layer || e.target, e.latlng); - return; - } - - // otherwise treat it like a marker and figure out - // if we should toggle it open/closed - if (this._map.hasLayer(this._popup) && this._popup._source === layer) { - this.closePopup(); - } else { - this.openPopup(layer, e.latlng); - } - }, - - _movePopup: function (e) { - this._popup.setLatLng(e.latlng); - } -}); - - - + + + +/* + * @namespace Layer + * @section Popup methods example + * + * All layers share a set of methods convenient for binding popups to it. + * + * ```js + * var layer = L.Polygon(latlngs).bindPopup('Hi There!').addTo(map); + * layer.openPopup(); + * layer.closePopup(); + * ``` + * + * Popups will also be automatically opened when the layer is clicked on and closed when the layer is removed from the map or another popup is opened. + */ + +// @section Popup methods +L.Layer.include({ + + // @method bindPopup(content: String|HTMLElement|Function|Popup, options?: Popup options): this + // Binds a popup to the layer with the passed `content` and sets up the + // neccessary event listeners. If a `Function` is passed it will receive + // the layer as the first argument and should return a `String` or `HTMLElement`. + bindPopup: function (content, options) { + + if (content instanceof L.Popup) { + L.setOptions(content, options); + this._popup = content; + content._source = this; + } else { + if (!this._popup || options) { + this._popup = new L.Popup(options, this); + } + this._popup.setContent(content); + } + + if (!this._popupHandlersAdded) { + this.on({ + click: this._openPopup, + remove: this.closePopup, + move: this._movePopup + }); + this._popupHandlersAdded = true; + } + + return this; + }, + + // @method unbindPopup(): this + // Removes the popup previously bound with `bindPopup`. + unbindPopup: function () { + if (this._popup) { + this.off({ + click: this._openPopup, + remove: this.closePopup, + move: this._movePopup + }); + this._popupHandlersAdded = false; + this._popup = null; + } + return this; + }, + + // @method openPopup(latlng?: LatLng): this + // Opens the bound popup at the specificed `latlng` or at the default popup anchor if no `latlng` is passed. + openPopup: function (layer, latlng) { + if (!(layer instanceof L.Layer)) { + latlng = layer; + layer = this; + } + + if (layer instanceof L.FeatureGroup) { + for (var id in this._layers) { + layer = this._layers[id]; + break; + } + } + + if (!latlng) { + latlng = layer.getCenter ? layer.getCenter() : layer.getLatLng(); + } + + if (this._popup && this._map) { + // set popup source to this layer + this._popup._source = layer; + + // update the popup (content, layout, ect...) + this._popup.update(); + + // open the popup on the map + this._map.openPopup(this._popup, latlng); + } + + return this; + }, + + // @method closePopup(): this + // Closes the popup bound to this layer if it is open. + closePopup: function () { + if (this._popup) { + this._popup._close(); + } + return this; + }, + + // @method togglePopup(): this + // Opens or closes the popup bound to this layer depending on its current state. + togglePopup: function (target) { + if (this._popup) { + if (this._popup._map) { + this.closePopup(); + } else { + this.openPopup(target); + } + } + return this; + }, + + // @method isPopupOpen(): boolean + // Returns `true` if the popup bound to this layer is currently open. + isPopupOpen: function () { + return this._popup.isOpen(); + }, + + // @method setPopupContent(content: String|HTMLElement|Popup): this + // Sets the content of the popup bound to this layer. + setPopupContent: function (content) { + if (this._popup) { + this._popup.setContent(content); + } + return this; + }, + + // @method getPopup(): Popup + // Returns the popup bound to this layer. + getPopup: function () { + return this._popup; + }, + + _openPopup: function (e) { + var layer = e.layer || e.target; + + if (!this._popup) { + return; + } + + if (!this._map) { + return; + } + + // prevent map click + L.DomEvent.stop(e); + + // if this inherits from Path its a vector and we can just + // open the popup at the new location + if (layer instanceof L.Path) { + this.openPopup(e.layer || e.target, e.latlng); + return; + } + + // otherwise treat it like a marker and figure out + // if we should toggle it open/closed + if (this._map.hasLayer(this._popup) && this._popup._source === layer) { + this.closePopup(); + } else { + this.openPopup(layer, e.latlng); + } + }, + + _movePopup: function (e) { + this._popup.setLatLng(e.latlng); + } +}); + + + /* * Popup extension to L.Marker, adding popup-related methods. */ @@ -6556,422 +6556,422 @@ L.Marker.include({ return this.options.icon.options.popupAnchor || [0, 0]; } }); - - - -/* - * @class Tooltip - * @inherits DivOverlay - * @aka L.Tooltip - * Used to display small texts on top of map layers. - * - * @example - * - * ```js - * marker.bindTooltip("my tooltip text").openTooltip(); - * ``` - * Note about tooltip offset. Leaflet takes two options in consideration - * for computing tooltip offseting: - * - the `offset` Tooltip option: it defaults to [0, 0], and it's specific to one tooltip. - * Add a positive x offset to move the tooltip to the right, and a positive y offset to - * move it to the bottom. Negatives will move to the left and top. - * - the `tooltipAnchor` Icon option: this will only be considered for Marker. You - * should adapt this value if you use a custom icon. - */ - - -// @namespace Tooltip -L.Tooltip = L.DivOverlay.extend({ - - // @section - // @aka Tooltip options - options: { - // @option pane: String = 'tooltipPane' - // `Map pane` where the tooltip will be added. - pane: 'tooltipPane', - - // @option offset: Point = Point(0, 0) - // Optional offset of the tooltip position. - offset: [0, 0], - - // @option direction: String = 'auto' - // Direction where to open the tooltip. Possible values are: `right`, `left`, - // `top`, `bottom`, `center`, `auto`. - // `auto` will dynamicaly switch between `right` and `left` according to the tooltip - // position on the map. - direction: 'auto', - - // @option permanent: Boolean = false - // Whether to open the tooltip permanently or only on mouseover. - permanent: false, - - // @option sticky: Boolean = false - // If true, the tooltip will follow the mouse instead of being fixed at the feature center. - sticky: false, - - // @option interactive: Boolean = false - // If true, the tooltip will listen to the feature events. - interactive: false, - - // @option opacity: Number = 0.9 - // Tooltip container opacity. - opacity: 0.9 - }, - - onAdd: function (map) { - L.DivOverlay.prototype.onAdd.call(this, map); - this.setOpacity(this.options.opacity); - - // @namespace Map - // @section Tooltip events - // @event tooltipopen: TooltipEvent - // Fired when a tooltip is opened in the map. - map.fire('tooltipopen', {tooltip: this}); - - if (this._source) { - // @namespace Layer - // @section Tooltip events - // @event tooltipopen: TooltipEvent - // Fired when a tooltip bound to this layer is opened. - this._source.fire('tooltipopen', {tooltip: this}, true); - } - }, - - onRemove: function (map) { - L.DivOverlay.prototype.onRemove.call(this, map); - - // @namespace Map - // @section Tooltip events - // @event tooltipclose: TooltipEvent - // Fired when a tooltip in the map is closed. - map.fire('tooltipclose', {tooltip: this}); - - if (this._source) { - // @namespace Layer - // @section Tooltip events - // @event tooltipclose: TooltipEvent - // Fired when a tooltip bound to this layer is closed. - this._source.fire('tooltipclose', {tooltip: this}, true); - } - }, - - getEvents: function () { - var events = L.DivOverlay.prototype.getEvents.call(this); - - if (L.Browser.touch && !this.options.permanent) { - events.preclick = this._close; - } - - return events; - }, - - _close: function () { - if (this._map) { - this._map.closeTooltip(this); - } - }, - - _initLayout: function () { - var prefix = 'leaflet-tooltip', - className = prefix + ' ' + (this.options.className || '') + ' leaflet-zoom-' + (this._zoomAnimated ? 'animated' : 'hide'); - - this._contentNode = this._container = L.DomUtil.create('div', className); - }, - - _updateLayout: function () {}, - - _adjustPan: function () {}, - - _setPosition: function (pos) { - var map = this._map, - container = this._container, - centerPoint = map.latLngToContainerPoint(map.getCenter()), - tooltipPoint = map.layerPointToContainerPoint(pos), - direction = this.options.direction, - tooltipWidth = container.offsetWidth, - tooltipHeight = container.offsetHeight, - offset = L.point(this.options.offset), - anchor = this._getAnchor(); - - if (direction === 'top') { - pos = pos.add(L.point(-tooltipWidth / 2 + offset.x, -tooltipHeight + offset.y + anchor.y)); - } else if (direction === 'bottom') { - pos = pos.subtract(L.point(tooltipWidth / 2 - offset.x, -offset.y)); - } else if (direction === 'center') { - pos = pos.subtract(L.point(tooltipWidth / 2 + offset.x, tooltipHeight / 2 - anchor.y + offset.y)); - } else if (direction === 'right' || direction === 'auto' && tooltipPoint.x < centerPoint.x) { - direction = 'right'; - pos = pos.add([offset.x + anchor.x, anchor.y - tooltipHeight / 2 + offset.y]); - } else { - direction = 'left'; - pos = pos.subtract(L.point(tooltipWidth + anchor.x - offset.x, tooltipHeight / 2 - anchor.y - offset.y)); - } - - L.DomUtil.removeClass(container, 'leaflet-tooltip-right'); - L.DomUtil.removeClass(container, 'leaflet-tooltip-left'); - L.DomUtil.removeClass(container, 'leaflet-tooltip-top'); - L.DomUtil.removeClass(container, 'leaflet-tooltip-bottom'); - L.DomUtil.addClass(container, 'leaflet-tooltip-' + direction); - L.DomUtil.setPosition(container, pos); - }, - - _updatePosition: function () { - var pos = this._map.latLngToLayerPoint(this._latlng); - this._setPosition(pos); - }, - - setOpacity: function (opacity) { - this.options.opacity = opacity; - - if (this._container) { - L.DomUtil.setOpacity(this._container, opacity); - } - }, - - _animateZoom: function (e) { - var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center); - this._setPosition(pos); - }, - - _getAnchor: function () { - // Where should we anchor the tooltip on the source layer? - return L.point(this._source && this._source._getTooltipAnchor && !this.options.sticky ? this._source._getTooltipAnchor() : [0, 0]); - } - -}); - -// @namespace Tooltip -// @factory L.tooltip(options?: Tooltip options, source?: Layer) -// Instantiates a Tooltip object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the tooltip with a reference to the Layer to which it refers. -L.tooltip = function (options, source) { - return new L.Tooltip(options, source); -}; - -// @namespace Map -// @section Methods for Layers and Controls -L.Map.include({ - - // @method openTooltip(tooltip: Tooltip): this - // Opens the specified tooltip. - // @alternative - // @method openTooltip(content: String|HTMLElement, latlng: LatLng, options?: Tooltip options): this - // Creates a tooltip with the specified content and options and open it. - openTooltip: function (tooltip, latlng, options) { - if (!(tooltip instanceof L.Tooltip)) { - tooltip = new L.Tooltip(options).setContent(tooltip); - } - - if (latlng) { - tooltip.setLatLng(latlng); - } - - if (this.hasLayer(tooltip)) { - return this; - } - - return this.addLayer(tooltip); - }, - - // @method closeTooltip(tooltip?: Tooltip): this - // Closes the tooltip given as parameter. - closeTooltip: function (tooltip) { - if (tooltip) { - this.removeLayer(tooltip); - } - return this; - } - -}); - - - -/* - * @namespace Layer - * @section Tooltip methods example - * - * All layers share a set of methods convenient for binding tooltips to it. - * - * ```js - * var layer = L.Polygon(latlngs).bindTooltip('Hi There!').addTo(map); - * layer.openTooltip(); - * layer.closeTooltip(); - * ``` - */ - -// @section Tooltip methods -L.Layer.include({ - - // @method bindTooltip(content: String|HTMLElement|Function|Tooltip, options?: Tooltip options): this - // Binds a tooltip to the layer with the passed `content` and sets up the - // neccessary event listeners. If a `Function` is passed it will receive - // the layer as the first argument and should return a `String` or `HTMLElement`. - bindTooltip: function (content, options) { - - if (content instanceof L.Tooltip) { - L.setOptions(content, options); - this._tooltip = content; - content._source = this; - } else { - if (!this._tooltip || options) { - this._tooltip = L.tooltip(options, this); - } - this._tooltip.setContent(content); - - } - - this._initTooltipInteractions(); - - if (this._tooltip.options.permanent && this._map && this._map.hasLayer(this)) { - this.openTooltip(); - } - - return this; - }, - - // @method unbindTooltip(): this - // Removes the tooltip previously bound with `bindTooltip`. - unbindTooltip: function () { - if (this._tooltip) { - this._initTooltipInteractions(true); - this.closeTooltip(); - this._tooltip = null; - } - return this; - }, - - _initTooltipInteractions: function (remove) { - if (!remove && this._tooltipHandlersAdded) { return; } - var onOff = remove ? 'off' : 'on', - events = { - remove: this.closeTooltip, - move: this._moveTooltip - }; - if (!this._tooltip.options.permanent) { - events.mouseover = this._openTooltip; - events.mouseout = this.closeTooltip; - if (this._tooltip.options.sticky) { - events.mousemove = this._moveTooltip; - } - if (L.Browser.touch) { - events.click = this._openTooltip; - } - } else { - events.add = this._openTooltip; - } - this[onOff](events); - this._tooltipHandlersAdded = !remove; - }, - - // @method openTooltip(latlng?: LatLng): this - // Opens the bound tooltip at the specificed `latlng` or at the default tooltip anchor if no `latlng` is passed. - openTooltip: function (layer, latlng) { - if (!(layer instanceof L.Layer)) { - latlng = layer; - layer = this; - } - - if (layer instanceof L.FeatureGroup) { - for (var id in this._layers) { - layer = this._layers[id]; - break; - } - } - - if (!latlng) { - latlng = layer.getCenter ? layer.getCenter() : layer.getLatLng(); - } - - if (this._tooltip && this._map) { - - // set tooltip source to this layer - this._tooltip._source = layer; - - // update the tooltip (content, layout, ect...) - this._tooltip.update(); - - // open the tooltip on the map - this._map.openTooltip(this._tooltip, latlng); - - // Tooltip container may not be defined if not permanent and never - // opened. - if (this._tooltip.options.interactive && this._tooltip._container) { - L.DomUtil.addClass(this._tooltip._container, 'leaflet-clickable'); - this.addInteractiveTarget(this._tooltip._container); - } - } - - return this; - }, - - // @method closeTooltip(): this - // Closes the tooltip bound to this layer if it is open. - closeTooltip: function () { - if (this._tooltip) { - this._tooltip._close(); - if (this._tooltip.options.interactive && this._tooltip._container) { - L.DomUtil.removeClass(this._tooltip._container, 'leaflet-clickable'); - this.removeInteractiveTarget(this._tooltip._container); - } - } - return this; - }, - - // @method toggleTooltip(): this - // Opens or closes the tooltip bound to this layer depending on its current state. - toggleTooltip: function (target) { - if (this._tooltip) { - if (this._tooltip._map) { - this.closeTooltip(); - } else { - this.openTooltip(target); - } - } - return this; - }, - - // @method isTooltipOpen(): boolean - // Returns `true` if the tooltip bound to this layer is currently open. - isTooltipOpen: function () { - return this._tooltip.isOpen(); - }, - - // @method setTooltipContent(content: String|HTMLElement|Tooltip): this - // Sets the content of the tooltip bound to this layer. - setTooltipContent: function (content) { - if (this._tooltip) { - this._tooltip.setContent(content); - } - return this; - }, - - // @method getTooltip(): Tooltip - // Returns the tooltip bound to this layer. - getTooltip: function () { - return this._tooltip; - }, - - _openTooltip: function (e) { - var layer = e.layer || e.target; - - if (!this._tooltip || !this._map) { - return; - } - this.openTooltip(layer, this._tooltip.options.sticky ? e.latlng : undefined); - }, - - _moveTooltip: function (e) { - var latlng = e.latlng, containerPoint, layerPoint; - if (this._tooltip.options.sticky && e.originalEvent) { - containerPoint = this._map.mouseEventToContainerPoint(e.originalEvent); - layerPoint = this._map.containerPointToLayerPoint(containerPoint); - latlng = this._map.layerPointToLatLng(layerPoint); - } - this._tooltip.setLatLng(latlng); - } -}); - - - + + + +/* + * @class Tooltip + * @inherits DivOverlay + * @aka L.Tooltip + * Used to display small texts on top of map layers. + * + * @example + * + * ```js + * marker.bindTooltip("my tooltip text").openTooltip(); + * ``` + * Note about tooltip offset. Leaflet takes two options in consideration + * for computing tooltip offseting: + * - the `offset` Tooltip option: it defaults to [0, 0], and it's specific to one tooltip. + * Add a positive x offset to move the tooltip to the right, and a positive y offset to + * move it to the bottom. Negatives will move to the left and top. + * - the `tooltipAnchor` Icon option: this will only be considered for Marker. You + * should adapt this value if you use a custom icon. + */ + + +// @namespace Tooltip +L.Tooltip = L.DivOverlay.extend({ + + // @section + // @aka Tooltip options + options: { + // @option pane: String = 'tooltipPane' + // `Map pane` where the tooltip will be added. + pane: 'tooltipPane', + + // @option offset: Point = Point(0, 0) + // Optional offset of the tooltip position. + offset: [0, 0], + + // @option direction: String = 'auto' + // Direction where to open the tooltip. Possible values are: `right`, `left`, + // `top`, `bottom`, `center`, `auto`. + // `auto` will dynamicaly switch between `right` and `left` according to the tooltip + // position on the map. + direction: 'auto', + + // @option permanent: Boolean = false + // Whether to open the tooltip permanently or only on mouseover. + permanent: false, + + // @option sticky: Boolean = false + // If true, the tooltip will follow the mouse instead of being fixed at the feature center. + sticky: false, + + // @option interactive: Boolean = false + // If true, the tooltip will listen to the feature events. + interactive: false, + + // @option opacity: Number = 0.9 + // Tooltip container opacity. + opacity: 0.9 + }, + + onAdd: function (map) { + L.DivOverlay.prototype.onAdd.call(this, map); + this.setOpacity(this.options.opacity); + + // @namespace Map + // @section Tooltip events + // @event tooltipopen: TooltipEvent + // Fired when a tooltip is opened in the map. + map.fire('tooltipopen', {tooltip: this}); + + if (this._source) { + // @namespace Layer + // @section Tooltip events + // @event tooltipopen: TooltipEvent + // Fired when a tooltip bound to this layer is opened. + this._source.fire('tooltipopen', {tooltip: this}, true); + } + }, + + onRemove: function (map) { + L.DivOverlay.prototype.onRemove.call(this, map); + + // @namespace Map + // @section Tooltip events + // @event tooltipclose: TooltipEvent + // Fired when a tooltip in the map is closed. + map.fire('tooltipclose', {tooltip: this}); + + if (this._source) { + // @namespace Layer + // @section Tooltip events + // @event tooltipclose: TooltipEvent + // Fired when a tooltip bound to this layer is closed. + this._source.fire('tooltipclose', {tooltip: this}, true); + } + }, + + getEvents: function () { + var events = L.DivOverlay.prototype.getEvents.call(this); + + if (L.Browser.touch && !this.options.permanent) { + events.preclick = this._close; + } + + return events; + }, + + _close: function () { + if (this._map) { + this._map.closeTooltip(this); + } + }, + + _initLayout: function () { + var prefix = 'leaflet-tooltip', + className = prefix + ' ' + (this.options.className || '') + ' leaflet-zoom-' + (this._zoomAnimated ? 'animated' : 'hide'); + + this._contentNode = this._container = L.DomUtil.create('div', className); + }, + + _updateLayout: function () {}, + + _adjustPan: function () {}, + + _setPosition: function (pos) { + var map = this._map, + container = this._container, + centerPoint = map.latLngToContainerPoint(map.getCenter()), + tooltipPoint = map.layerPointToContainerPoint(pos), + direction = this.options.direction, + tooltipWidth = container.offsetWidth, + tooltipHeight = container.offsetHeight, + offset = L.point(this.options.offset), + anchor = this._getAnchor(); + + if (direction === 'top') { + pos = pos.add(L.point(-tooltipWidth / 2 + offset.x, -tooltipHeight + offset.y + anchor.y)); + } else if (direction === 'bottom') { + pos = pos.subtract(L.point(tooltipWidth / 2 - offset.x, -offset.y)); + } else if (direction === 'center') { + pos = pos.subtract(L.point(tooltipWidth / 2 + offset.x, tooltipHeight / 2 - anchor.y + offset.y)); + } else if (direction === 'right' || direction === 'auto' && tooltipPoint.x < centerPoint.x) { + direction = 'right'; + pos = pos.add([offset.x + anchor.x, anchor.y - tooltipHeight / 2 + offset.y]); + } else { + direction = 'left'; + pos = pos.subtract(L.point(tooltipWidth + anchor.x - offset.x, tooltipHeight / 2 - anchor.y - offset.y)); + } + + L.DomUtil.removeClass(container, 'leaflet-tooltip-right'); + L.DomUtil.removeClass(container, 'leaflet-tooltip-left'); + L.DomUtil.removeClass(container, 'leaflet-tooltip-top'); + L.DomUtil.removeClass(container, 'leaflet-tooltip-bottom'); + L.DomUtil.addClass(container, 'leaflet-tooltip-' + direction); + L.DomUtil.setPosition(container, pos); + }, + + _updatePosition: function () { + var pos = this._map.latLngToLayerPoint(this._latlng); + this._setPosition(pos); + }, + + setOpacity: function (opacity) { + this.options.opacity = opacity; + + if (this._container) { + L.DomUtil.setOpacity(this._container, opacity); + } + }, + + _animateZoom: function (e) { + var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center); + this._setPosition(pos); + }, + + _getAnchor: function () { + // Where should we anchor the tooltip on the source layer? + return L.point(this._source && this._source._getTooltipAnchor && !this.options.sticky ? this._source._getTooltipAnchor() : [0, 0]); + } + +}); + +// @namespace Tooltip +// @factory L.tooltip(options?: Tooltip options, source?: Layer) +// Instantiates a Tooltip object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the tooltip with a reference to the Layer to which it refers. +L.tooltip = function (options, source) { + return new L.Tooltip(options, source); +}; + +// @namespace Map +// @section Methods for Layers and Controls +L.Map.include({ + + // @method openTooltip(tooltip: Tooltip): this + // Opens the specified tooltip. + // @alternative + // @method openTooltip(content: String|HTMLElement, latlng: LatLng, options?: Tooltip options): this + // Creates a tooltip with the specified content and options and open it. + openTooltip: function (tooltip, latlng, options) { + if (!(tooltip instanceof L.Tooltip)) { + tooltip = new L.Tooltip(options).setContent(tooltip); + } + + if (latlng) { + tooltip.setLatLng(latlng); + } + + if (this.hasLayer(tooltip)) { + return this; + } + + return this.addLayer(tooltip); + }, + + // @method closeTooltip(tooltip?: Tooltip): this + // Closes the tooltip given as parameter. + closeTooltip: function (tooltip) { + if (tooltip) { + this.removeLayer(tooltip); + } + return this; + } + +}); + + + +/* + * @namespace Layer + * @section Tooltip methods example + * + * All layers share a set of methods convenient for binding tooltips to it. + * + * ```js + * var layer = L.Polygon(latlngs).bindTooltip('Hi There!').addTo(map); + * layer.openTooltip(); + * layer.closeTooltip(); + * ``` + */ + +// @section Tooltip methods +L.Layer.include({ + + // @method bindTooltip(content: String|HTMLElement|Function|Tooltip, options?: Tooltip options): this + // Binds a tooltip to the layer with the passed `content` and sets up the + // neccessary event listeners. If a `Function` is passed it will receive + // the layer as the first argument and should return a `String` or `HTMLElement`. + bindTooltip: function (content, options) { + + if (content instanceof L.Tooltip) { + L.setOptions(content, options); + this._tooltip = content; + content._source = this; + } else { + if (!this._tooltip || options) { + this._tooltip = L.tooltip(options, this); + } + this._tooltip.setContent(content); + + } + + this._initTooltipInteractions(); + + if (this._tooltip.options.permanent && this._map && this._map.hasLayer(this)) { + this.openTooltip(); + } + + return this; + }, + + // @method unbindTooltip(): this + // Removes the tooltip previously bound with `bindTooltip`. + unbindTooltip: function () { + if (this._tooltip) { + this._initTooltipInteractions(true); + this.closeTooltip(); + this._tooltip = null; + } + return this; + }, + + _initTooltipInteractions: function (remove) { + if (!remove && this._tooltipHandlersAdded) { return; } + var onOff = remove ? 'off' : 'on', + events = { + remove: this.closeTooltip, + move: this._moveTooltip + }; + if (!this._tooltip.options.permanent) { + events.mouseover = this._openTooltip; + events.mouseout = this.closeTooltip; + if (this._tooltip.options.sticky) { + events.mousemove = this._moveTooltip; + } + if (L.Browser.touch) { + events.click = this._openTooltip; + } + } else { + events.add = this._openTooltip; + } + this[onOff](events); + this._tooltipHandlersAdded = !remove; + }, + + // @method openTooltip(latlng?: LatLng): this + // Opens the bound tooltip at the specificed `latlng` or at the default tooltip anchor if no `latlng` is passed. + openTooltip: function (layer, latlng) { + if (!(layer instanceof L.Layer)) { + latlng = layer; + layer = this; + } + + if (layer instanceof L.FeatureGroup) { + for (var id in this._layers) { + layer = this._layers[id]; + break; + } + } + + if (!latlng) { + latlng = layer.getCenter ? layer.getCenter() : layer.getLatLng(); + } + + if (this._tooltip && this._map) { + + // set tooltip source to this layer + this._tooltip._source = layer; + + // update the tooltip (content, layout, ect...) + this._tooltip.update(); + + // open the tooltip on the map + this._map.openTooltip(this._tooltip, latlng); + + // Tooltip container may not be defined if not permanent and never + // opened. + if (this._tooltip.options.interactive && this._tooltip._container) { + L.DomUtil.addClass(this._tooltip._container, 'leaflet-clickable'); + this.addInteractiveTarget(this._tooltip._container); + } + } + + return this; + }, + + // @method closeTooltip(): this + // Closes the tooltip bound to this layer if it is open. + closeTooltip: function () { + if (this._tooltip) { + this._tooltip._close(); + if (this._tooltip.options.interactive && this._tooltip._container) { + L.DomUtil.removeClass(this._tooltip._container, 'leaflet-clickable'); + this.removeInteractiveTarget(this._tooltip._container); + } + } + return this; + }, + + // @method toggleTooltip(): this + // Opens or closes the tooltip bound to this layer depending on its current state. + toggleTooltip: function (target) { + if (this._tooltip) { + if (this._tooltip._map) { + this.closeTooltip(); + } else { + this.openTooltip(target); + } + } + return this; + }, + + // @method isTooltipOpen(): boolean + // Returns `true` if the tooltip bound to this layer is currently open. + isTooltipOpen: function () { + return this._tooltip.isOpen(); + }, + + // @method setTooltipContent(content: String|HTMLElement|Tooltip): this + // Sets the content of the tooltip bound to this layer. + setTooltipContent: function (content) { + if (this._tooltip) { + this._tooltip.setContent(content); + } + return this; + }, + + // @method getTooltip(): Tooltip + // Returns the tooltip bound to this layer. + getTooltip: function () { + return this._tooltip; + }, + + _openTooltip: function (e) { + var layer = e.layer || e.target; + + if (!this._tooltip || !this._map) { + return; + } + this.openTooltip(layer, this._tooltip.options.sticky ? e.latlng : undefined); + }, + + _moveTooltip: function (e) { + var latlng = e.latlng, containerPoint, layerPoint; + if (this._tooltip.options.sticky && e.originalEvent) { + containerPoint = this._map.mouseEventToContainerPoint(e.originalEvent); + layerPoint = this._map.containerPointToLayerPoint(containerPoint); + latlng = this._map.layerPointToLatLng(layerPoint); + } + this._tooltip.setLatLng(latlng); + } +}); + + + /* * Tooltip extension to L.Marker, adding tooltip-related methods. */ @@ -6981,9 +6981,9 @@ L.Marker.include({ return this.options.icon.options.tooltipAnchor || [0, 0]; } }); - - - + + + /* * @class LayerGroup * @aka L.LayerGroup @@ -7143,9 +7143,9 @@ L.LayerGroup = L.Layer.extend({ L.layerGroup = function (layers) { return new L.LayerGroup(layers); }; - - - + + + /* * @class FeatureGroup * @aka L.FeatureGroup @@ -7237,307 +7237,307 @@ L.FeatureGroup = L.LayerGroup.extend({ L.featureGroup = function (layers) { return new L.FeatureGroup(layers); }; - - - -/* - * @class Renderer - * @inherits Layer - * @aka L.Renderer - * - * Base class for vector renderer implementations (`SVG`, `Canvas`). Handles the - * DOM container of the renderer, its bounds, and its zoom animation. - * - * A `Renderer` works as an implicit layer group for all `Path`s - the renderer - * itself can be added or removed to the map. All paths use a renderer, which can - * be implicit (the map will decide the type of renderer and use it automatically) - * or explicit (using the [`renderer`](#path-renderer) option of the path). - * - * Do not use this class directly, use `SVG` and `Canvas` instead. - * - * @event update: Event - * Fired when the renderer updates its bounds, center and zoom, for example when - * its map has moved - */ - -L.Renderer = L.Layer.extend({ - - // @section - // @aka Renderer options - options: { - // @option padding: Number = 0.1 - // How much to extend the clip area around the map view (relative to its size) - // e.g. 0.1 would be 10% of map view in each direction - padding: 0.1 - }, - - initialize: function (options) { - L.setOptions(this, options); - L.stamp(this); - }, - - onAdd: function () { - if (!this._container) { - this._initContainer(); // defined by renderer implementations - - if (this._zoomAnimated) { - L.DomUtil.addClass(this._container, 'leaflet-zoom-animated'); - } - } - - this.getPane().appendChild(this._container); - this._update(); - }, - - onRemove: function () { - L.DomUtil.remove(this._container); - }, - - getEvents: function () { - var events = { - viewreset: this._reset, - zoom: this._onZoom, - moveend: this._update - }; - if (this._zoomAnimated) { - events.zoomanim = this._onAnimZoom; - } - return events; - }, - - _onAnimZoom: function (ev) { - this._updateTransform(ev.center, ev.zoom); - }, - - _onZoom: function () { - this._updateTransform(this._map.getCenter(), this._map.getZoom()); - }, - - _updateTransform: function (center, zoom) { - var scale = this._map.getZoomScale(zoom, this._zoom), - position = L.DomUtil.getPosition(this._container), - viewHalf = this._map.getSize().multiplyBy(0.5 + this.options.padding), - currentCenterPoint = this._map.project(this._center, zoom), - destCenterPoint = this._map.project(center, zoom), - centerOffset = destCenterPoint.subtract(currentCenterPoint), - - topLeftOffset = viewHalf.multiplyBy(-scale).add(position).add(viewHalf).subtract(centerOffset); - - if (L.Browser.any3d) { - L.DomUtil.setTransform(this._container, topLeftOffset, scale); - } else { - L.DomUtil.setPosition(this._container, topLeftOffset); - } - }, - - _reset: function () { - this._update(); - this._updateTransform(this._center, this._zoom); - }, - - _update: function () { - // Update pixel bounds of renderer container (for positioning/sizing/clipping later) - // Subclasses are responsible of firing the 'update' event. - var p = this.options.padding, - size = this._map.getSize(), - min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round(); - - this._bounds = new L.Bounds(min, min.add(size.multiplyBy(1 + p * 2)).round()); - - this._center = this._map.getCenter(); - this._zoom = this._map.getZoom(); - } -}); - - -L.Map.include({ - // @namespace Map; @method getRenderer(layer: Path): Renderer - // Returns the instance of `Renderer` that should be used to render the given - // `Path`. It will ensure that the `renderer` options of the map and paths - // are respected, and that the renderers do exist on the map. - getRenderer: function (layer) { - // @namespace Path; @option renderer: Renderer - // Use this specific instance of `Renderer` for this path. Takes - // precedence over the map's [default renderer](#map-renderer). - var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer; - - if (!renderer) { - // @namespace Map; @option preferCanvas: Boolean = false - // Whether `Path`s should be rendered on a `Canvas` renderer. - // By default, all `Path`s are rendered in a `SVG` renderer. - renderer = this._renderer = (this.options.preferCanvas && L.canvas()) || L.svg(); - } - - if (!this.hasLayer(renderer)) { - this.addLayer(renderer); - } - return renderer; - }, - - _getPaneRenderer: function (name) { - if (name === 'overlayPane' || name === undefined) { - return false; - } - - var renderer = this._paneRenderers[name]; - if (renderer === undefined) { - renderer = (L.SVG && L.svg({pane: name})) || (L.Canvas && L.canvas({pane: name})); - this._paneRenderers[name] = renderer; - } - return renderer; - } -}); - - - -/* - * @class Path - * @aka L.Path - * @inherits Interactive layer - * - * An abstract class that contains options and constants shared between vector - * overlays (Polygon, Polyline, Circle). Do not use it directly. Extends `Layer`. - */ - -L.Path = L.Layer.extend({ - - // @section - // @aka Path options - options: { - // @option stroke: Boolean = true - // Whether to draw stroke along the path. Set it to `false` to disable borders on polygons or circles. - stroke: true, - - // @option color: String = '#3388ff' - // Stroke color - color: '#3388ff', - - // @option weight: Number = 3 - // Stroke width in pixels - weight: 3, - - // @option opacity: Number = 1.0 - // Stroke opacity - opacity: 1, - - // @option lineCap: String= 'round' - // A string that defines [shape to be used at the end](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) of the stroke. - lineCap: 'round', - - // @option lineJoin: String = 'round' - // A string that defines [shape to be used at the corners](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linejoin) of the stroke. - lineJoin: 'round', - - // @option dashArray: String = null - // A string that defines the stroke [dash pattern](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dasharray). Doesn't work on `Canvas`-powered layers in [some old browsers](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash#Browser_compatibility). - dashArray: null, - - // @option dashOffset: String = null - // A string that defines the [distance into the dash pattern to start the dash](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dashoffset). Doesn't work on `Canvas`-powered layers in [some old browsers](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash#Browser_compatibility). - dashOffset: null, - - // @option fill: Boolean = depends - // Whether to fill the path with color. Set it to `false` to disable filling on polygons or circles. - fill: false, - - // @option fillColor: String = * - // Fill color. Defaults to the value of the [`color`](#path-color) option - fillColor: null, - - // @option fillOpacity: Number = 0.2 - // Fill opacity. - fillOpacity: 0.2, - - // @option fillRule: String = 'evenodd' - // A string that defines [how the inside of a shape](https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule) is determined. - fillRule: 'evenodd', - - // className: '', - - // Option inherited from "Interactive layer" abstract class - interactive: true - }, - - beforeAdd: function (map) { - // Renderer is set here because we need to call renderer.getEvents - // before this.getEvents. - this._renderer = map.getRenderer(this); - }, - - onAdd: function () { - this._renderer._initPath(this); - this._reset(); - this._renderer._addPath(this); - this._renderer.on('update', this._update, this); - }, - - onRemove: function () { - this._renderer._removePath(this); - this._renderer.off('update', this._update, this); - }, - - getEvents: function () { - return { - zoomend: this._project, - viewreset: this._reset - }; - }, - - // @method redraw(): this - // Redraws the layer. Sometimes useful after you changed the coordinates that the path uses. - redraw: function () { - if (this._map) { - this._renderer._updatePath(this); - } - return this; - }, - - // @method setStyle(style: Path options): this - // Changes the appearance of a Path based on the options in the `Path options` object. - setStyle: function (style) { - L.setOptions(this, style); - if (this._renderer) { - this._renderer._updateStyle(this); - } - return this; - }, - - // @method bringToFront(): this - // Brings the layer to the top of all path layers. - bringToFront: function () { - if (this._renderer) { - this._renderer._bringToFront(this); - } - return this; - }, - - // @method bringToBack(): this - // Brings the layer to the bottom of all path layers. - bringToBack: function () { - if (this._renderer) { - this._renderer._bringToBack(this); - } - return this; - }, - - getElement: function () { - return this._path; - }, - - _reset: function () { - // defined in children classes - this._project(); - this._update(); - }, - - _clickTolerance: function () { - // used when doing hit detection for Canvas layers - return (this.options.stroke ? this.options.weight / 2 : 0) + (L.Browser.touch ? 10 : 0); - } -}); - - - + + + +/* + * @class Renderer + * @inherits Layer + * @aka L.Renderer + * + * Base class for vector renderer implementations (`SVG`, `Canvas`). Handles the + * DOM container of the renderer, its bounds, and its zoom animation. + * + * A `Renderer` works as an implicit layer group for all `Path`s - the renderer + * itself can be added or removed to the map. All paths use a renderer, which can + * be implicit (the map will decide the type of renderer and use it automatically) + * or explicit (using the [`renderer`](#path-renderer) option of the path). + * + * Do not use this class directly, use `SVG` and `Canvas` instead. + * + * @event update: Event + * Fired when the renderer updates its bounds, center and zoom, for example when + * its map has moved + */ + +L.Renderer = L.Layer.extend({ + + // @section + // @aka Renderer options + options: { + // @option padding: Number = 0.1 + // How much to extend the clip area around the map view (relative to its size) + // e.g. 0.1 would be 10% of map view in each direction + padding: 0.1 + }, + + initialize: function (options) { + L.setOptions(this, options); + L.stamp(this); + }, + + onAdd: function () { + if (!this._container) { + this._initContainer(); // defined by renderer implementations + + if (this._zoomAnimated) { + L.DomUtil.addClass(this._container, 'leaflet-zoom-animated'); + } + } + + this.getPane().appendChild(this._container); + this._update(); + }, + + onRemove: function () { + L.DomUtil.remove(this._container); + }, + + getEvents: function () { + var events = { + viewreset: this._reset, + zoom: this._onZoom, + moveend: this._update + }; + if (this._zoomAnimated) { + events.zoomanim = this._onAnimZoom; + } + return events; + }, + + _onAnimZoom: function (ev) { + this._updateTransform(ev.center, ev.zoom); + }, + + _onZoom: function () { + this._updateTransform(this._map.getCenter(), this._map.getZoom()); + }, + + _updateTransform: function (center, zoom) { + var scale = this._map.getZoomScale(zoom, this._zoom), + position = L.DomUtil.getPosition(this._container), + viewHalf = this._map.getSize().multiplyBy(0.5 + this.options.padding), + currentCenterPoint = this._map.project(this._center, zoom), + destCenterPoint = this._map.project(center, zoom), + centerOffset = destCenterPoint.subtract(currentCenterPoint), + + topLeftOffset = viewHalf.multiplyBy(-scale).add(position).add(viewHalf).subtract(centerOffset); + + if (L.Browser.any3d) { + L.DomUtil.setTransform(this._container, topLeftOffset, scale); + } else { + L.DomUtil.setPosition(this._container, topLeftOffset); + } + }, + + _reset: function () { + this._update(); + this._updateTransform(this._center, this._zoom); + }, + + _update: function () { + // Update pixel bounds of renderer container (for positioning/sizing/clipping later) + // Subclasses are responsible of firing the 'update' event. + var p = this.options.padding, + size = this._map.getSize(), + min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round(); + + this._bounds = new L.Bounds(min, min.add(size.multiplyBy(1 + p * 2)).round()); + + this._center = this._map.getCenter(); + this._zoom = this._map.getZoom(); + } +}); + + +L.Map.include({ + // @namespace Map; @method getRenderer(layer: Path): Renderer + // Returns the instance of `Renderer` that should be used to render the given + // `Path`. It will ensure that the `renderer` options of the map and paths + // are respected, and that the renderers do exist on the map. + getRenderer: function (layer) { + // @namespace Path; @option renderer: Renderer + // Use this specific instance of `Renderer` for this path. Takes + // precedence over the map's [default renderer](#map-renderer). + var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer; + + if (!renderer) { + // @namespace Map; @option preferCanvas: Boolean = false + // Whether `Path`s should be rendered on a `Canvas` renderer. + // By default, all `Path`s are rendered in a `SVG` renderer. + renderer = this._renderer = (this.options.preferCanvas && L.canvas()) || L.svg(); + } + + if (!this.hasLayer(renderer)) { + this.addLayer(renderer); + } + return renderer; + }, + + _getPaneRenderer: function (name) { + if (name === 'overlayPane' || name === undefined) { + return false; + } + + var renderer = this._paneRenderers[name]; + if (renderer === undefined) { + renderer = (L.SVG && L.svg({pane: name})) || (L.Canvas && L.canvas({pane: name})); + this._paneRenderers[name] = renderer; + } + return renderer; + } +}); + + + +/* + * @class Path + * @aka L.Path + * @inherits Interactive layer + * + * An abstract class that contains options and constants shared between vector + * overlays (Polygon, Polyline, Circle). Do not use it directly. Extends `Layer`. + */ + +L.Path = L.Layer.extend({ + + // @section + // @aka Path options + options: { + // @option stroke: Boolean = true + // Whether to draw stroke along the path. Set it to `false` to disable borders on polygons or circles. + stroke: true, + + // @option color: String = '#3388ff' + // Stroke color + color: '#3388ff', + + // @option weight: Number = 3 + // Stroke width in pixels + weight: 3, + + // @option opacity: Number = 1.0 + // Stroke opacity + opacity: 1, + + // @option lineCap: String= 'round' + // A string that defines [shape to be used at the end](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) of the stroke. + lineCap: 'round', + + // @option lineJoin: String = 'round' + // A string that defines [shape to be used at the corners](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linejoin) of the stroke. + lineJoin: 'round', + + // @option dashArray: String = null + // A string that defines the stroke [dash pattern](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dasharray). Doesn't work on `Canvas`-powered layers in [some old browsers](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash#Browser_compatibility). + dashArray: null, + + // @option dashOffset: String = null + // A string that defines the [distance into the dash pattern to start the dash](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dashoffset). Doesn't work on `Canvas`-powered layers in [some old browsers](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash#Browser_compatibility). + dashOffset: null, + + // @option fill: Boolean = depends + // Whether to fill the path with color. Set it to `false` to disable filling on polygons or circles. + fill: false, + + // @option fillColor: String = * + // Fill color. Defaults to the value of the [`color`](#path-color) option + fillColor: null, + + // @option fillOpacity: Number = 0.2 + // Fill opacity. + fillOpacity: 0.2, + + // @option fillRule: String = 'evenodd' + // A string that defines [how the inside of a shape](https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule) is determined. + fillRule: 'evenodd', + + // className: '', + + // Option inherited from "Interactive layer" abstract class + interactive: true + }, + + beforeAdd: function (map) { + // Renderer is set here because we need to call renderer.getEvents + // before this.getEvents. + this._renderer = map.getRenderer(this); + }, + + onAdd: function () { + this._renderer._initPath(this); + this._reset(); + this._renderer._addPath(this); + this._renderer.on('update', this._update, this); + }, + + onRemove: function () { + this._renderer._removePath(this); + this._renderer.off('update', this._update, this); + }, + + getEvents: function () { + return { + zoomend: this._project, + viewreset: this._reset + }; + }, + + // @method redraw(): this + // Redraws the layer. Sometimes useful after you changed the coordinates that the path uses. + redraw: function () { + if (this._map) { + this._renderer._updatePath(this); + } + return this; + }, + + // @method setStyle(style: Path options): this + // Changes the appearance of a Path based on the options in the `Path options` object. + setStyle: function (style) { + L.setOptions(this, style); + if (this._renderer) { + this._renderer._updateStyle(this); + } + return this; + }, + + // @method bringToFront(): this + // Brings the layer to the top of all path layers. + bringToFront: function () { + if (this._renderer) { + this._renderer._bringToFront(this); + } + return this; + }, + + // @method bringToBack(): this + // Brings the layer to the bottom of all path layers. + bringToBack: function () { + if (this._renderer) { + this._renderer._bringToBack(this); + } + return this; + }, + + getElement: function () { + return this._path; + }, + + _reset: function () { + // defined in children classes + this._project(); + this._update(); + }, + + _clickTolerance: function () { + // used when doing hit detection for Canvas layers + return (this.options.stroke ? this.options.weight / 2 : 0) + (L.Browser.touch ? 10 : 0); + } +}); + + + /* * @namespace LineUtil * @@ -7766,309 +7766,309 @@ L.LineUtil = { return sqDist ? dx * dx + dy * dy : new L.Point(x, y); } }; - - - -/* - * @class Polyline - * @aka L.Polyline - * @inherits Path - * - * A class for drawing polyline overlays on a map. Extends `Path`. - * - * @example - * - * ```js - * // create a red polyline from an array of LatLng points - * var latlngs = [ - * [-122.68, 45.51], - * [-122.43, 37.77], - * [-118.2, 34.04] - * ]; - * - * var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map); - * - * // zoom the map to the polyline - * map.fitBounds(polyline.getBounds()); - * ``` - * - * You can also pass a multi-dimensional array to represent a `MultiPolyline` shape: - * - * ```js - * // create a red polyline from an array of arrays of LatLng points - * var latlngs = [ - * [[-122.68, 45.51], - * [-122.43, 37.77], - * [-118.2, 34.04]], - * [[-73.91, 40.78], - * [-87.62, 41.83], - * [-96.72, 32.76]] - * ]; - * ``` - */ - -L.Polyline = L.Path.extend({ - - // @section - // @aka Polyline options - options: { - // @option smoothFactor: Number = 1.0 - // How much to simplify the polyline on each zoom level. More means - // better performance and smoother look, and less means more accurate representation. - smoothFactor: 1.0, - - // @option noClip: Boolean = false - // Disable polyline clipping. - noClip: false - }, - - initialize: function (latlngs, options) { - L.setOptions(this, options); - this._setLatLngs(latlngs); - }, - - // @method getLatLngs(): LatLng[] - // Returns an array of the points in the path, or nested arrays of points in case of multi-polyline. - getLatLngs: function () { - return this._latlngs; - }, - - // @method setLatLngs(latlngs: LatLng[]): this - // Replaces all the points in the polyline with the given array of geographical points. - setLatLngs: function (latlngs) { - this._setLatLngs(latlngs); - return this.redraw(); - }, - - // @method isEmpty(): Boolean - // Returns `true` if the Polyline has no LatLngs. - isEmpty: function () { - return !this._latlngs.length; - }, - - closestLayerPoint: function (p) { - var minDistance = Infinity, - minPoint = null, - closest = L.LineUtil._sqClosestPointOnSegment, - p1, p2; - - for (var j = 0, jLen = this._parts.length; j < jLen; j++) { - var points = this._parts[j]; - - for (var i = 1, len = points.length; i < len; i++) { - p1 = points[i - 1]; - p2 = points[i]; - - var sqDist = closest(p, p1, p2, true); - - if (sqDist < minDistance) { - minDistance = sqDist; - minPoint = closest(p, p1, p2); - } - } - } - if (minPoint) { - minPoint.distance = Math.sqrt(minDistance); - } - return minPoint; - }, - - // @method getCenter(): LatLng - // Returns the center ([centroid](http://en.wikipedia.org/wiki/Centroid)) of the polyline. - getCenter: function () { - // throws error when not yet added to map as this center calculation requires projected coordinates - if (!this._map) { - throw new Error('Must add layer to map before using getCenter()'); - } - - var i, halfDist, segDist, dist, p1, p2, ratio, - points = this._rings[0], - len = points.length; - - if (!len) { return null; } - - // polyline centroid algorithm; only uses the first ring if there are multiple - - for (i = 0, halfDist = 0; i < len - 1; i++) { - halfDist += points[i].distanceTo(points[i + 1]) / 2; - } - - // The line is so small in the current view that all points are on the same pixel. - if (halfDist === 0) { - return this._map.layerPointToLatLng(points[0]); - } - - for (i = 0, dist = 0; i < len - 1; i++) { - p1 = points[i]; - p2 = points[i + 1]; - segDist = p1.distanceTo(p2); - dist += segDist; - - if (dist > halfDist) { - ratio = (dist - halfDist) / segDist; - return this._map.layerPointToLatLng([ - p2.x - ratio * (p2.x - p1.x), - p2.y - ratio * (p2.y - p1.y) - ]); - } - } - }, - - // @method getBounds(): LatLngBounds - // Returns the `LatLngBounds` of the path. - getBounds: function () { - return this._bounds; - }, - - // @method addLatLng(latlng: LatLng, latlngs? LatLng[]): this - // Adds a given point to the polyline. By default, adds to the first ring of - // the polyline in case of a multi-polyline, but can be overridden by passing - // a specific ring as a LatLng array (that you can earlier access with [`getLatLngs`](#polyline-getlatlngs)). - addLatLng: function (latlng, latlngs) { - latlngs = latlngs || this._defaultShape(); - latlng = L.latLng(latlng); - latlngs.push(latlng); - this._bounds.extend(latlng); - return this.redraw(); - }, - - _setLatLngs: function (latlngs) { - this._bounds = new L.LatLngBounds(); - this._latlngs = this._convertLatLngs(latlngs); - }, - - _defaultShape: function () { - return L.Polyline._flat(this._latlngs) ? this._latlngs : this._latlngs[0]; - }, - - // recursively convert latlngs input into actual LatLng instances; calculate bounds along the way - _convertLatLngs: function (latlngs) { - var result = [], - flat = L.Polyline._flat(latlngs); - - for (var i = 0, len = latlngs.length; i < len; i++) { - if (flat) { - result[i] = L.latLng(latlngs[i]); - this._bounds.extend(result[i]); - } else { - result[i] = this._convertLatLngs(latlngs[i]); - } - } - - return result; - }, - - _project: function () { - var pxBounds = new L.Bounds(); - this._rings = []; - this._projectLatlngs(this._latlngs, this._rings, pxBounds); - - var w = this._clickTolerance(), - p = new L.Point(w, w); - - if (this._bounds.isValid() && pxBounds.isValid()) { - pxBounds.min._subtract(p); - pxBounds.max._add(p); - this._pxBounds = pxBounds; - } - }, - - // recursively turns latlngs into a set of rings with projected coordinates - _projectLatlngs: function (latlngs, result, projectedBounds) { - var flat = latlngs[0] instanceof L.LatLng, - len = latlngs.length, - i, ring; - - if (flat) { - ring = []; - for (i = 0; i < len; i++) { - ring[i] = this._map.latLngToLayerPoint(latlngs[i]); - projectedBounds.extend(ring[i]); - } - result.push(ring); - } else { - for (i = 0; i < len; i++) { - this._projectLatlngs(latlngs[i], result, projectedBounds); - } - } - }, - - // clip polyline by renderer bounds so that we have less to render for performance - _clipPoints: function () { - var bounds = this._renderer._bounds; - - this._parts = []; - if (!this._pxBounds || !this._pxBounds.intersects(bounds)) { - return; - } - - if (this.options.noClip) { - this._parts = this._rings; - return; - } - - var parts = this._parts, - i, j, k, len, len2, segment, points; - - for (i = 0, k = 0, len = this._rings.length; i < len; i++) { - points = this._rings[i]; - - for (j = 0, len2 = points.length; j < len2 - 1; j++) { - segment = L.LineUtil.clipSegment(points[j], points[j + 1], bounds, j, true); - - if (!segment) { continue; } - - parts[k] = parts[k] || []; - parts[k].push(segment[0]); - - // if segment goes out of screen, or it's the last one, it's the end of the line part - if ((segment[1] !== points[j + 1]) || (j === len2 - 2)) { - parts[k].push(segment[1]); - k++; - } - } - } - }, - - // simplify each clipped part of the polyline for performance - _simplifyPoints: function () { - var parts = this._parts, - tolerance = this.options.smoothFactor; - - for (var i = 0, len = parts.length; i < len; i++) { - parts[i] = L.LineUtil.simplify(parts[i], tolerance); - } - }, - - _update: function () { - if (!this._map) { return; } - - this._clipPoints(); - this._simplifyPoints(); - this._updatePath(); - }, - - _updatePath: function () { - this._renderer._updatePoly(this); - } -}); - -// @factory L.polyline(latlngs: LatLng[], options?: Polyline options) -// Instantiates a polyline object given an array of geographical points and -// optionally an options object. You can create a `Polyline` object with -// multiple separate lines (`MultiPolyline`) by passing an array of arrays -// of geographic points. -L.polyline = function (latlngs, options) { - return new L.Polyline(latlngs, options); -}; - -L.Polyline._flat = function (latlngs) { - // true if it's a flat array of latlngs; false if nested - return !L.Util.isArray(latlngs[0]) || (typeof latlngs[0][0] !== 'object' && typeof latlngs[0][0] !== 'undefined'); -}; - - - + + + +/* + * @class Polyline + * @aka L.Polyline + * @inherits Path + * + * A class for drawing polyline overlays on a map. Extends `Path`. + * + * @example + * + * ```js + * // create a red polyline from an array of LatLng points + * var latlngs = [ + * [-122.68, 45.51], + * [-122.43, 37.77], + * [-118.2, 34.04] + * ]; + * + * var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map); + * + * // zoom the map to the polyline + * map.fitBounds(polyline.getBounds()); + * ``` + * + * You can also pass a multi-dimensional array to represent a `MultiPolyline` shape: + * + * ```js + * // create a red polyline from an array of arrays of LatLng points + * var latlngs = [ + * [[-122.68, 45.51], + * [-122.43, 37.77], + * [-118.2, 34.04]], + * [[-73.91, 40.78], + * [-87.62, 41.83], + * [-96.72, 32.76]] + * ]; + * ``` + */ + +L.Polyline = L.Path.extend({ + + // @section + // @aka Polyline options + options: { + // @option smoothFactor: Number = 1.0 + // How much to simplify the polyline on each zoom level. More means + // better performance and smoother look, and less means more accurate representation. + smoothFactor: 1.0, + + // @option noClip: Boolean = false + // Disable polyline clipping. + noClip: false + }, + + initialize: function (latlngs, options) { + L.setOptions(this, options); + this._setLatLngs(latlngs); + }, + + // @method getLatLngs(): LatLng[] + // Returns an array of the points in the path, or nested arrays of points in case of multi-polyline. + getLatLngs: function () { + return this._latlngs; + }, + + // @method setLatLngs(latlngs: LatLng[]): this + // Replaces all the points in the polyline with the given array of geographical points. + setLatLngs: function (latlngs) { + this._setLatLngs(latlngs); + return this.redraw(); + }, + + // @method isEmpty(): Boolean + // Returns `true` if the Polyline has no LatLngs. + isEmpty: function () { + return !this._latlngs.length; + }, + + closestLayerPoint: function (p) { + var minDistance = Infinity, + minPoint = null, + closest = L.LineUtil._sqClosestPointOnSegment, + p1, p2; + + for (var j = 0, jLen = this._parts.length; j < jLen; j++) { + var points = this._parts[j]; + + for (var i = 1, len = points.length; i < len; i++) { + p1 = points[i - 1]; + p2 = points[i]; + + var sqDist = closest(p, p1, p2, true); + + if (sqDist < minDistance) { + minDistance = sqDist; + minPoint = closest(p, p1, p2); + } + } + } + if (minPoint) { + minPoint.distance = Math.sqrt(minDistance); + } + return minPoint; + }, + + // @method getCenter(): LatLng + // Returns the center ([centroid](http://en.wikipedia.org/wiki/Centroid)) of the polyline. + getCenter: function () { + // throws error when not yet added to map as this center calculation requires projected coordinates + if (!this._map) { + throw new Error('Must add layer to map before using getCenter()'); + } + + var i, halfDist, segDist, dist, p1, p2, ratio, + points = this._rings[0], + len = points.length; + + if (!len) { return null; } + + // polyline centroid algorithm; only uses the first ring if there are multiple + + for (i = 0, halfDist = 0; i < len - 1; i++) { + halfDist += points[i].distanceTo(points[i + 1]) / 2; + } + + // The line is so small in the current view that all points are on the same pixel. + if (halfDist === 0) { + return this._map.layerPointToLatLng(points[0]); + } + + for (i = 0, dist = 0; i < len - 1; i++) { + p1 = points[i]; + p2 = points[i + 1]; + segDist = p1.distanceTo(p2); + dist += segDist; + + if (dist > halfDist) { + ratio = (dist - halfDist) / segDist; + return this._map.layerPointToLatLng([ + p2.x - ratio * (p2.x - p1.x), + p2.y - ratio * (p2.y - p1.y) + ]); + } + } + }, + + // @method getBounds(): LatLngBounds + // Returns the `LatLngBounds` of the path. + getBounds: function () { + return this._bounds; + }, + + // @method addLatLng(latlng: LatLng, latlngs? LatLng[]): this + // Adds a given point to the polyline. By default, adds to the first ring of + // the polyline in case of a multi-polyline, but can be overridden by passing + // a specific ring as a LatLng array (that you can earlier access with [`getLatLngs`](#polyline-getlatlngs)). + addLatLng: function (latlng, latlngs) { + latlngs = latlngs || this._defaultShape(); + latlng = L.latLng(latlng); + latlngs.push(latlng); + this._bounds.extend(latlng); + return this.redraw(); + }, + + _setLatLngs: function (latlngs) { + this._bounds = new L.LatLngBounds(); + this._latlngs = this._convertLatLngs(latlngs); + }, + + _defaultShape: function () { + return L.Polyline._flat(this._latlngs) ? this._latlngs : this._latlngs[0]; + }, + + // recursively convert latlngs input into actual LatLng instances; calculate bounds along the way + _convertLatLngs: function (latlngs) { + var result = [], + flat = L.Polyline._flat(latlngs); + + for (var i = 0, len = latlngs.length; i < len; i++) { + if (flat) { + result[i] = L.latLng(latlngs[i]); + this._bounds.extend(result[i]); + } else { + result[i] = this._convertLatLngs(latlngs[i]); + } + } + + return result; + }, + + _project: function () { + var pxBounds = new L.Bounds(); + this._rings = []; + this._projectLatlngs(this._latlngs, this._rings, pxBounds); + + var w = this._clickTolerance(), + p = new L.Point(w, w); + + if (this._bounds.isValid() && pxBounds.isValid()) { + pxBounds.min._subtract(p); + pxBounds.max._add(p); + this._pxBounds = pxBounds; + } + }, + + // recursively turns latlngs into a set of rings with projected coordinates + _projectLatlngs: function (latlngs, result, projectedBounds) { + var flat = latlngs[0] instanceof L.LatLng, + len = latlngs.length, + i, ring; + + if (flat) { + ring = []; + for (i = 0; i < len; i++) { + ring[i] = this._map.latLngToLayerPoint(latlngs[i]); + projectedBounds.extend(ring[i]); + } + result.push(ring); + } else { + for (i = 0; i < len; i++) { + this._projectLatlngs(latlngs[i], result, projectedBounds); + } + } + }, + + // clip polyline by renderer bounds so that we have less to render for performance + _clipPoints: function () { + var bounds = this._renderer._bounds; + + this._parts = []; + if (!this._pxBounds || !this._pxBounds.intersects(bounds)) { + return; + } + + if (this.options.noClip) { + this._parts = this._rings; + return; + } + + var parts = this._parts, + i, j, k, len, len2, segment, points; + + for (i = 0, k = 0, len = this._rings.length; i < len; i++) { + points = this._rings[i]; + + for (j = 0, len2 = points.length; j < len2 - 1; j++) { + segment = L.LineUtil.clipSegment(points[j], points[j + 1], bounds, j, true); + + if (!segment) { continue; } + + parts[k] = parts[k] || []; + parts[k].push(segment[0]); + + // if segment goes out of screen, or it's the last one, it's the end of the line part + if ((segment[1] !== points[j + 1]) || (j === len2 - 2)) { + parts[k].push(segment[1]); + k++; + } + } + } + }, + + // simplify each clipped part of the polyline for performance + _simplifyPoints: function () { + var parts = this._parts, + tolerance = this.options.smoothFactor; + + for (var i = 0, len = parts.length; i < len; i++) { + parts[i] = L.LineUtil.simplify(parts[i], tolerance); + } + }, + + _update: function () { + if (!this._map) { return; } + + this._clipPoints(); + this._simplifyPoints(); + this._updatePath(); + }, + + _updatePath: function () { + this._renderer._updatePoly(this); + } +}); + +// @factory L.polyline(latlngs: LatLng[], options?: Polyline options) +// Instantiates a polyline object given an array of geographical points and +// optionally an options object. You can create a `Polyline` object with +// multiple separate lines (`MultiPolyline`) by passing an array of arrays +// of geographic points. +L.polyline = function (latlngs, options) { + return new L.Polyline(latlngs, options); +}; + +L.Polyline._flat = function (latlngs) { + // true if it's a flat array of latlngs; false if nested + return !L.Util.isArray(latlngs[0]) || (typeof latlngs[0][0] !== 'object' && typeof latlngs[0][0] !== 'undefined'); +}; + + + /* * @namespace PolyUtil * Various utility functions for polygon geometries. @@ -8125,1198 +8125,1198 @@ L.PolyUtil.clipPolygon = function (points, bounds, round) { return points; }; - - - -/* - * @class Polygon - * @aka L.Polygon - * @inherits Polyline - * - * A class for drawing polygon overlays on a map. Extends `Polyline`. - * - * Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one — it's better to filter out such points. - * - * - * @example - * - * ```js - * // create a red polygon from an array of LatLng points - * var latlngs = [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]]; - * - * var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map); - * - * // zoom the map to the polygon - * map.fitBounds(polygon.getBounds()); - * ``` - * - * You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape: - * - * ```js - * var latlngs = [ - * [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring - * [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole - * ]; - * ``` - * - * Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape. - * - * ```js - * var latlngs = [ - * [ // first polygon - * [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring - * [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole - * ], - * [ // second polygon - * [[-109.05, 37],[-109.03, 41],[-102.05, 41],[-102.04, 37],[-109.05, 38]] - * ] - * ]; - * ``` - */ - -L.Polygon = L.Polyline.extend({ - - options: { - fill: true - }, - - isEmpty: function () { - return !this._latlngs.length || !this._latlngs[0].length; - }, - - getCenter: function () { - // throws error when not yet added to map as this center calculation requires projected coordinates - if (!this._map) { - throw new Error('Must add layer to map before using getCenter()'); - } - - var i, j, p1, p2, f, area, x, y, center, - points = this._rings[0], - len = points.length; - - if (!len) { return null; } - - // polygon centroid algorithm; only uses the first ring if there are multiple - - area = x = y = 0; - - for (i = 0, j = len - 1; i < len; j = i++) { - p1 = points[i]; - p2 = points[j]; - - f = p1.y * p2.x - p2.y * p1.x; - x += (p1.x + p2.x) * f; - y += (p1.y + p2.y) * f; - area += f * 3; - } - - if (area === 0) { - // Polygon is so small that all points are on same pixel. - center = points[0]; - } else { - center = [x / area, y / area]; - } - return this._map.layerPointToLatLng(center); - }, - - _convertLatLngs: function (latlngs) { - var result = L.Polyline.prototype._convertLatLngs.call(this, latlngs), - len = result.length; - - // remove last point if it equals first one - if (len >= 2 && result[0] instanceof L.LatLng && result[0].equals(result[len - 1])) { - result.pop(); - } - return result; - }, - - _setLatLngs: function (latlngs) { - L.Polyline.prototype._setLatLngs.call(this, latlngs); - if (L.Polyline._flat(this._latlngs)) { - this._latlngs = [this._latlngs]; - } - }, - - _defaultShape: function () { - return L.Polyline._flat(this._latlngs[0]) ? this._latlngs[0] : this._latlngs[0][0]; - }, - - _clipPoints: function () { - // polygons need a different clipping algorithm so we redefine that - - var bounds = this._renderer._bounds, - w = this.options.weight, - p = new L.Point(w, w); - - // increase clip padding by stroke width to avoid stroke on clip edges - bounds = new L.Bounds(bounds.min.subtract(p), bounds.max.add(p)); - - this._parts = []; - if (!this._pxBounds || !this._pxBounds.intersects(bounds)) { - return; - } - - if (this.options.noClip) { - this._parts = this._rings; - return; - } - - for (var i = 0, len = this._rings.length, clipped; i < len; i++) { - clipped = L.PolyUtil.clipPolygon(this._rings[i], bounds, true); - if (clipped.length) { - this._parts.push(clipped); - } - } - }, - - _updatePath: function () { - this._renderer._updatePoly(this, true); - } -}); - - -// @factory L.polygon(latlngs: LatLng[], options?: Polyline options) -L.polygon = function (latlngs, options) { - return new L.Polygon(latlngs, options); -}; - - - -/* - * L.Rectangle extends Polygon and creates a rectangle when passed a LatLngBounds object. - */ - -/* - * @class Rectangle - * @aka L.Retangle - * @inherits Polygon - * - * A class for drawing rectangle overlays on a map. Extends `Polygon`. - * - * @example - * - * ```js - * // define rectangle geographical bounds - * var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; - * - * // create an orange rectangle - * L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); - * - * // zoom the map to the rectangle bounds - * map.fitBounds(bounds); - * ``` - * - */ - - -L.Rectangle = L.Polygon.extend({ - initialize: function (latLngBounds, options) { - L.Polygon.prototype.initialize.call(this, this._boundsToLatLngs(latLngBounds), options); - }, - - // @method setBounds(latLngBounds: LatLngBounds): this - // Redraws the rectangle with the passed bounds. - setBounds: function (latLngBounds) { - return this.setLatLngs(this._boundsToLatLngs(latLngBounds)); - }, - - _boundsToLatLngs: function (latLngBounds) { - latLngBounds = L.latLngBounds(latLngBounds); - return [ - latLngBounds.getSouthWest(), - latLngBounds.getNorthWest(), - latLngBounds.getNorthEast(), - latLngBounds.getSouthEast() - ]; - } -}); - - -// @factory L.rectangle(latLngBounds: LatLngBounds, options?: Polyline options) -L.rectangle = function (latLngBounds, options) { - return new L.Rectangle(latLngBounds, options); -}; - - - -/* - * @class CircleMarker - * @aka L.CircleMarker - * @inherits Path - * - * A circle of a fixed size with radius specified in pixels. Extends `Path`. - */ - -L.CircleMarker = L.Path.extend({ - - // @section - // @aka CircleMarker options - options: { - fill: true, - - // @option radius: Number = 10 - // Radius of the circle marker, in pixels - radius: 10 - }, - - initialize: function (latlng, options) { - L.setOptions(this, options); - this._latlng = L.latLng(latlng); - this._radius = this.options.radius; - }, - - // @method setLatLng(latLng: LatLng): this - // Sets the position of a circle marker to a new location. - setLatLng: function (latlng) { - this._latlng = L.latLng(latlng); - this.redraw(); - return this.fire('move', {latlng: this._latlng}); - }, - - // @method getLatLng(): LatLng - // Returns the current geographical position of the circle marker - getLatLng: function () { - return this._latlng; - }, - - // @method setRadius(radius: Number): this - // Sets the radius of a circle marker. Units are in pixels. - setRadius: function (radius) { - this.options.radius = this._radius = radius; - return this.redraw(); - }, - - // @method getRadius(): Number - // Returns the current radius of the circle - getRadius: function () { - return this._radius; - }, - - setStyle : function (options) { - var radius = options && options.radius || this._radius; - L.Path.prototype.setStyle.call(this, options); - this.setRadius(radius); - return this; - }, - - _project: function () { - this._point = this._map.latLngToLayerPoint(this._latlng); - this._updateBounds(); - }, - - _updateBounds: function () { - var r = this._radius, - r2 = this._radiusY || r, - w = this._clickTolerance(), - p = [r + w, r2 + w]; - this._pxBounds = new L.Bounds(this._point.subtract(p), this._point.add(p)); - }, - - _update: function () { - if (this._map) { - this._updatePath(); - } - }, - - _updatePath: function () { - this._renderer._updateCircle(this); - }, - - _empty: function () { - return this._radius && !this._renderer._bounds.intersects(this._pxBounds); - } -}); - - -// @factory L.circleMarker(latlng: LatLng, options?: CircleMarker options) -// Instantiates a circle marker object given a geographical point, and an optional options object. -L.circleMarker = function (latlng, options) { - return new L.CircleMarker(latlng, options); -}; - - - -/* - * @class Circle - * @aka L.Circle - * @inherits CircleMarker - * - * A class for drawing circle overlays on a map. Extends `CircleMarker`. - * - * It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion). - * - * @example - * - * ```js - * L.circle([50.5, 30.5], {radius: 200}).addTo(map); - * ``` - */ - -L.Circle = L.CircleMarker.extend({ - - initialize: function (latlng, options, legacyOptions) { - if (typeof options === 'number') { - // Backwards compatibility with 0.7.x factory (latlng, radius, options?) - options = L.extend({}, legacyOptions, {radius: options}); - } - L.setOptions(this, options); - this._latlng = L.latLng(latlng); - - if (isNaN(this.options.radius)) { throw new Error('Circle radius cannot be NaN'); } - - // @section - // @aka Circle options - // @option radius: Number; Radius of the circle, in meters. - this._mRadius = this.options.radius; - }, - - // @method setRadius(radius: Number): this - // Sets the radius of a circle. Units are in meters. - setRadius: function (radius) { - this._mRadius = radius; - return this.redraw(); - }, - - // @method getRadius(): Number - // Returns the current radius of a circle. Units are in meters. - getRadius: function () { - return this._mRadius; - }, - - // @method getBounds(): LatLngBounds - // Returns the `LatLngBounds` of the path. - getBounds: function () { - var half = [this._radius, this._radiusY || this._radius]; - - return new L.LatLngBounds( - this._map.layerPointToLatLng(this._point.subtract(half)), - this._map.layerPointToLatLng(this._point.add(half))); - }, - - setStyle: L.Path.prototype.setStyle, - - _project: function () { - - var lng = this._latlng.lng, - lat = this._latlng.lat, - map = this._map, - crs = map.options.crs; - - if (crs.distance === L.CRS.Earth.distance) { - var d = Math.PI / 180, - latR = (this._mRadius / L.CRS.Earth.R) / d, - top = map.project([lat + latR, lng]), - bottom = map.project([lat - latR, lng]), - p = top.add(bottom).divideBy(2), - lat2 = map.unproject(p).lat, - lngR = Math.acos((Math.cos(latR * d) - Math.sin(lat * d) * Math.sin(lat2 * d)) / - (Math.cos(lat * d) * Math.cos(lat2 * d))) / d; - - if (isNaN(lngR) || lngR === 0) { - lngR = latR / Math.cos(Math.PI / 180 * lat); // Fallback for edge case, #2425 - } - - this._point = p.subtract(map.getPixelOrigin()); - this._radius = isNaN(lngR) ? 0 : Math.max(Math.round(p.x - map.project([lat2, lng - lngR]).x), 1); - this._radiusY = Math.max(Math.round(p.y - top.y), 1); - - } else { - var latlng2 = crs.unproject(crs.project(this._latlng).subtract([this._mRadius, 0])); - - this._point = map.latLngToLayerPoint(this._latlng); - this._radius = this._point.x - map.latLngToLayerPoint(latlng2).x; - } - - this._updateBounds(); - } -}); - -// @factory L.circle(latlng: LatLng, options?: Circle options) -// Instantiates a circle object given a geographical point, and an options object -// which contains the circle radius. -// @alternative -// @factory L.circle(latlng: LatLng, radius: Number, options?: Circle options) -// Obsolete way of instantiating a circle, for compatibility with 0.7.x code. -// Do not use in new applications or plugins. -L.circle = function (latlng, options, legacyOptions) { - return new L.Circle(latlng, options, legacyOptions); -}; - - - -/* - * @class SVG - * @inherits Renderer - * @aka L.SVG - * - * Allows vector layers to be displayed with [SVG](https://developer.mozilla.org/docs/Web/SVG). - * Inherits `Renderer`. - * - * Due to [technical limitations](http://caniuse.com/#search=svg), SVG is not - * available in all web browsers, notably Android 2.x and 3.x. - * - * Although SVG is not available on IE7 and IE8, these browsers support - * [VML](https://en.wikipedia.org/wiki/Vector_Markup_Language) - * (a now deprecated technology), and the SVG renderer will fall back to VML in - * this case. - * - * @example - * - * Use SVG by default for all paths in the map: - * - * ```js - * var map = L.map('map', { - * renderer: L.svg() - * }); - * ``` - * - * Use a SVG renderer with extra padding for specific vector geometries: - * - * ```js - * var map = L.map('map'); - * var myRenderer = L.svg({ padding: 0.5 }); - * var line = L.polyline( coordinates, { renderer: myRenderer } ); - * var circle = L.circle( center, { renderer: myRenderer } ); - * ``` - */ - -L.SVG = L.Renderer.extend({ - - getEvents: function () { - var events = L.Renderer.prototype.getEvents.call(this); - events.zoomstart = this._onZoomStart; - return events; - }, - - _initContainer: function () { - this._container = L.SVG.create('svg'); - - // makes it possible to click through svg root; we'll reset it back in individual paths - this._container.setAttribute('pointer-events', 'none'); - - this._rootGroup = L.SVG.create('g'); - this._container.appendChild(this._rootGroup); - }, - - _onZoomStart: function () { - // Drag-then-pinch interactions might mess up the center and zoom. - // In this case, the easiest way to prevent this is re-do the renderer - // bounds and padding when the zooming starts. - this._update(); - }, - - _update: function () { - if (this._map._animatingZoom && this._bounds) { return; } - - L.Renderer.prototype._update.call(this); - - var b = this._bounds, - size = b.getSize(), - container = this._container; - - // set size of svg-container if changed - if (!this._svgSize || !this._svgSize.equals(size)) { - this._svgSize = size; - container.setAttribute('width', size.x); - container.setAttribute('height', size.y); - } - - // movement: update container viewBox so that we don't have to change coordinates of individual layers - L.DomUtil.setPosition(container, b.min); - container.setAttribute('viewBox', [b.min.x, b.min.y, size.x, size.y].join(' ')); - - this.fire('update'); - }, - - // methods below are called by vector layers implementations - - _initPath: function (layer) { - var path = layer._path = L.SVG.create('path'); - - // @namespace Path - // @option className: String = null - // Custom class name set on an element. Only for SVG renderer. - if (layer.options.className) { - L.DomUtil.addClass(path, layer.options.className); - } - - if (layer.options.interactive) { - L.DomUtil.addClass(path, 'leaflet-interactive'); - } - - this._updateStyle(layer); - }, - - _addPath: function (layer) { - this._rootGroup.appendChild(layer._path); - layer.addInteractiveTarget(layer._path); - }, - - _removePath: function (layer) { - L.DomUtil.remove(layer._path); - layer.removeInteractiveTarget(layer._path); - }, - - _updatePath: function (layer) { - layer._project(); - layer._update(); - }, - - _updateStyle: function (layer) { - var path = layer._path, - options = layer.options; - - if (!path) { return; } - - if (options.stroke) { - path.setAttribute('stroke', options.color); - path.setAttribute('stroke-opacity', options.opacity); - path.setAttribute('stroke-width', options.weight); - path.setAttribute('stroke-linecap', options.lineCap); - path.setAttribute('stroke-linejoin', options.lineJoin); - - if (options.dashArray) { - path.setAttribute('stroke-dasharray', options.dashArray); - } else { - path.removeAttribute('stroke-dasharray'); - } - - if (options.dashOffset) { - path.setAttribute('stroke-dashoffset', options.dashOffset); - } else { - path.removeAttribute('stroke-dashoffset'); - } - } else { - path.setAttribute('stroke', 'none'); - } - - if (options.fill) { - path.setAttribute('fill', options.fillColor || options.color); - path.setAttribute('fill-opacity', options.fillOpacity); - path.setAttribute('fill-rule', options.fillRule || 'evenodd'); - } else { - path.setAttribute('fill', 'none'); - } - }, - - _updatePoly: function (layer, closed) { - this._setPath(layer, L.SVG.pointsToPath(layer._parts, closed)); - }, - - _updateCircle: function (layer) { - var p = layer._point, - r = layer._radius, - r2 = layer._radiusY || r, - arc = 'a' + r + ',' + r2 + ' 0 1,0 '; - - // drawing a circle with two half-arcs - var d = layer._empty() ? 'M0 0' : - 'M' + (p.x - r) + ',' + p.y + - arc + (r * 2) + ',0 ' + - arc + (-r * 2) + ',0 '; - - this._setPath(layer, d); - }, - - _setPath: function (layer, path) { - layer._path.setAttribute('d', path); - }, - - // SVG does not have the concept of zIndex so we resort to changing the DOM order of elements - _bringToFront: function (layer) { - L.DomUtil.toFront(layer._path); - }, - - _bringToBack: function (layer) { - L.DomUtil.toBack(layer._path); - } -}); - - -// @namespace SVG; @section -// There are several static functions which can be called without instantiating L.SVG: -L.extend(L.SVG, { - // @function create(name: String): SVGElement - // Returns a instance of [SVGElement](https://developer.mozilla.org/docs/Web/API/SVGElement), - // corresponding to the class name passed. For example, using 'line' will return - // an instance of [SVGLineElement](https://developer.mozilla.org/docs/Web/API/SVGLineElement). - create: function (name) { - return document.createElementNS('http://www.w3.org/2000/svg', name); - }, - - // @function pointsToPath(rings: Point[], closed: Boolean): String - // Generates a SVG path string for multiple rings, with each ring turning - // into "M..L..L.." instructions - pointsToPath: function (rings, closed) { - var str = '', - i, j, len, len2, points, p; - - for (i = 0, len = rings.length; i < len; i++) { - points = rings[i]; - - for (j = 0, len2 = points.length; j < len2; j++) { - p = points[j]; - str += (j ? 'L' : 'M') + p.x + ' ' + p.y; - } - - // closes the ring for polygons; "x" is VML syntax - str += closed ? (L.Browser.svg ? 'z' : 'x') : ''; - } - - // SVG complains about empty path strings - return str || 'M0 0'; - } -}); - -// @namespace Browser; @property svg: Boolean -// `true` when the browser supports [SVG](https://developer.mozilla.org/docs/Web/SVG). -L.Browser.svg = !!(document.createElementNS && L.SVG.create('svg').createSVGRect); - - -// @namespace SVG -// @factory L.svg(options?: Renderer options) -// Creates a SVG renderer with the given options. -L.svg = function (options) { - return L.Browser.svg || L.Browser.vml ? new L.SVG(options) : null; -}; - - - -/* - * Thanks to Dmitry Baranovsky and his Raphael library for inspiration! - */ - -/* - * @class SVG - * - * Although SVG is not available on IE7 and IE8, these browsers support [VML](https://en.wikipedia.org/wiki/Vector_Markup_Language), and the SVG renderer will fall back to VML in this case. - * - * VML was deprecated in 2012, which means VML functionality exists only for backwards compatibility - * with old versions of Internet Explorer. - */ - -// @namespace Browser; @property vml: Boolean -// `true` if the browser supports [VML](https://en.wikipedia.org/wiki/Vector_Markup_Language). -L.Browser.vml = !L.Browser.svg && (function () { - try { - var div = document.createElement('div'); - div.innerHTML = ''; - - var shape = div.firstChild; - shape.style.behavior = 'url(#default#VML)'; - - return shape && (typeof shape.adj === 'object'); - - } catch (e) { - return false; - } -}()); - -// redefine some SVG methods to handle VML syntax which is similar but with some differences -L.SVG.include(!L.Browser.vml ? {} : { - - _initContainer: function () { - this._container = L.DomUtil.create('div', 'leaflet-vml-container'); - }, - - _update: function () { - if (this._map._animatingZoom) { return; } - L.Renderer.prototype._update.call(this); - this.fire('update'); - }, - - _initPath: function (layer) { - var container = layer._container = L.SVG.create('shape'); - - L.DomUtil.addClass(container, 'leaflet-vml-shape ' + (this.options.className || '')); - - container.coordsize = '1 1'; - - layer._path = L.SVG.create('path'); - container.appendChild(layer._path); - - this._updateStyle(layer); - }, - - _addPath: function (layer) { - var container = layer._container; - this._container.appendChild(container); - - if (layer.options.interactive) { - layer.addInteractiveTarget(container); - } - }, - - _removePath: function (layer) { - var container = layer._container; - L.DomUtil.remove(container); - layer.removeInteractiveTarget(container); - }, - - _updateStyle: function (layer) { - var stroke = layer._stroke, - fill = layer._fill, - options = layer.options, - container = layer._container; - - container.stroked = !!options.stroke; - container.filled = !!options.fill; - - if (options.stroke) { - if (!stroke) { - stroke = layer._stroke = L.SVG.create('stroke'); - } - container.appendChild(stroke); - stroke.weight = options.weight + 'px'; - stroke.color = options.color; - stroke.opacity = options.opacity; - - if (options.dashArray) { - stroke.dashStyle = L.Util.isArray(options.dashArray) ? - options.dashArray.join(' ') : - options.dashArray.replace(/( *, *)/g, ' '); - } else { - stroke.dashStyle = ''; - } - stroke.endcap = options.lineCap.replace('butt', 'flat'); - stroke.joinstyle = options.lineJoin; - - } else if (stroke) { - container.removeChild(stroke); - layer._stroke = null; - } - - if (options.fill) { - if (!fill) { - fill = layer._fill = L.SVG.create('fill'); - } - container.appendChild(fill); - fill.color = options.fillColor || options.color; - fill.opacity = options.fillOpacity; - - } else if (fill) { - container.removeChild(fill); - layer._fill = null; - } - }, - - _updateCircle: function (layer) { - var p = layer._point.round(), - r = Math.round(layer._radius), - r2 = Math.round(layer._radiusY || r); - - this._setPath(layer, layer._empty() ? 'M0 0' : - 'AL ' + p.x + ',' + p.y + ' ' + r + ',' + r2 + ' 0,' + (65535 * 360)); - }, - - _setPath: function (layer, path) { - layer._path.v = path; - }, - - _bringToFront: function (layer) { - L.DomUtil.toFront(layer._container); - }, - - _bringToBack: function (layer) { - L.DomUtil.toBack(layer._container); - } -}); - -if (L.Browser.vml) { - L.SVG.create = (function () { - try { - document.namespaces.add('lvml', 'urn:schemas-microsoft-com:vml'); - return function (name) { - return document.createElement(''); - }; - } catch (e) { - return function (name) { - return document.createElement('<' + name + ' xmlns="urn:schemas-microsoft.com:vml" class="lvml">'); - }; - } - })(); -} - - - -/* - * @class Canvas - * @inherits Renderer - * @aka L.Canvas - * - * Allows vector layers to be displayed with [``](https://developer.mozilla.org/docs/Web/API/Canvas_API). - * Inherits `Renderer`. - * - * Due to [technical limitations](http://caniuse.com/#search=canvas), Canvas is not - * available in all web browsers, notably IE8, and overlapping geometries might - * not display properly in some edge cases. - * - * @example - * - * Use Canvas by default for all paths in the map: - * - * ```js - * var map = L.map('map', { - * renderer: L.canvas() - * }); - * ``` - * - * Use a Canvas renderer with extra padding for specific vector geometries: - * - * ```js - * var map = L.map('map'); - * var myRenderer = L.canvas({ padding: 0.5 }); - * var line = L.polyline( coordinates, { renderer: myRenderer } ); - * var circle = L.circle( center, { renderer: myRenderer } ); - * ``` - */ - -L.Canvas = L.Renderer.extend({ - - onAdd: function () { - L.Renderer.prototype.onAdd.call(this); - - this._layers = this._layers || {}; - - // Redraw vectors since canvas is cleared upon removal, - // in case of removing the renderer itself from the map. - this._draw(); - }, - - _initContainer: function () { - var container = this._container = document.createElement('canvas'); - - L.DomEvent - .on(container, 'mousemove', L.Util.throttle(this._onMouseMove, 32, this), this) - .on(container, 'click dblclick mousedown mouseup contextmenu', this._onClick, this) - .on(container, 'mouseout', this._handleMouseOut, this); - - this._ctx = container.getContext('2d'); - }, - - _update: function () { - if (this._map._animatingZoom && this._bounds) { return; } - - this._drawnLayers = {}; - - L.Renderer.prototype._update.call(this); - - var b = this._bounds, - container = this._container, - size = b.getSize(), - m = L.Browser.retina ? 2 : 1; - - L.DomUtil.setPosition(container, b.min); - - // set canvas size (also clearing it); use double size on retina - container.width = m * size.x; - container.height = m * size.y; - container.style.width = size.x + 'px'; - container.style.height = size.y + 'px'; - - if (L.Browser.retina) { - this._ctx.scale(2, 2); - } - - // translate so we use the same path coordinates after canvas element moves - this._ctx.translate(-b.min.x, -b.min.y); - - // Tell paths to redraw themselves - this.fire('update'); - }, - - _initPath: function (layer) { - this._updateDashArray(layer); - this._layers[L.stamp(layer)] = layer; - }, - - _addPath: L.Util.falseFn, - - _removePath: function (layer) { - layer._removed = true; - this._requestRedraw(layer); - }, - - _updatePath: function (layer) { - this._redrawBounds = layer._pxBounds; - this._draw(true); - layer._project(); - layer._update(); - this._draw(); - this._redrawBounds = null; - }, - - _updateStyle: function (layer) { - this._updateDashArray(layer); - this._requestRedraw(layer); - }, - - _updateDashArray: function (layer) { - if (layer.options.dashArray) { - var parts = layer.options.dashArray.split(','), - dashArray = [], - i; - for (i = 0; i < parts.length; i++) { - dashArray.push(Number(parts[i])); - } - layer.options._dashArray = dashArray; - } - }, - - _requestRedraw: function (layer) { - if (!this._map) { return; } - - var padding = (layer.options.weight || 0) + 1; - this._redrawBounds = this._redrawBounds || new L.Bounds(); - this._redrawBounds.extend(layer._pxBounds.min.subtract([padding, padding])); - this._redrawBounds.extend(layer._pxBounds.max.add([padding, padding])); - - this._redrawRequest = this._redrawRequest || L.Util.requestAnimFrame(this._redraw, this); - }, - - _redraw: function () { - this._redrawRequest = null; - - this._draw(true); // clear layers in redraw bounds - this._draw(); // draw layers - - this._redrawBounds = null; - }, - - _draw: function (clear) { - this._clear = clear; - var layer, bounds = this._redrawBounds; - this._ctx.save(); - if (bounds) { - this._ctx.beginPath(); - this._ctx.rect(bounds.min.x, bounds.min.y, bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y); - this._ctx.clip(); - } - - for (var id in this._layers) { - layer = this._layers[id]; - if (!bounds || (layer._pxBounds && layer._pxBounds.intersects(bounds))) { - layer._updatePath(); - } - if (clear && layer._removed) { - delete layer._removed; - delete this._layers[id]; - } - } - this._ctx.restore(); // Restore state before clipping. - }, - - _updatePoly: function (layer, closed) { - - var i, j, len2, p, - parts = layer._parts, - len = parts.length, - ctx = this._ctx; - - if (!len) { return; } - - this._drawnLayers[layer._leaflet_id] = layer; - - ctx.beginPath(); - - if (ctx.setLineDash) { - ctx.setLineDash(layer.options && layer.options._dashArray || []); - } - - for (i = 0; i < len; i++) { - for (j = 0, len2 = parts[i].length; j < len2; j++) { - p = parts[i][j]; - ctx[j ? 'lineTo' : 'moveTo'](p.x, p.y); - } - if (closed) { - ctx.closePath(); - } - } - - this._fillStroke(ctx, layer); - - // TODO optimization: 1 fill/stroke for all features with equal style instead of 1 for each feature - }, - - _updateCircle: function (layer) { - - if (layer._empty()) { return; } - - var p = layer._point, - ctx = this._ctx, - r = layer._radius, - s = (layer._radiusY || r) / r; - - this._drawnLayers[layer._leaflet_id] = layer; - - if (s !== 1) { - ctx.save(); - ctx.scale(1, s); - } - - ctx.beginPath(); - ctx.arc(p.x, p.y / s, r, 0, Math.PI * 2, false); - - if (s !== 1) { - ctx.restore(); - } - - this._fillStroke(ctx, layer); - }, - - _fillStroke: function (ctx, layer) { - var clear = this._clear, - options = layer.options; - - ctx.globalCompositeOperation = clear ? 'destination-out' : 'source-over'; - - if (options.fill) { - ctx.globalAlpha = clear ? 1 : options.fillOpacity; - ctx.fillStyle = options.fillColor || options.color; - ctx.fill(options.fillRule || 'evenodd'); - } - - if (options.stroke && options.weight !== 0) { - ctx.globalAlpha = clear ? 1 : options.opacity; - - // if clearing shape, do it with the previously drawn line width - layer._prevWeight = ctx.lineWidth = clear ? layer._prevWeight + 1 : options.weight; - - ctx.strokeStyle = options.color; - ctx.lineCap = options.lineCap; - ctx.lineJoin = options.lineJoin; - ctx.stroke(); - } - }, - - // Canvas obviously doesn't have mouse events for individual drawn objects, - // so we emulate that by calculating what's under the mouse on mousemove/click manually - - _onClick: function (e) { - var point = this._map.mouseEventToLayerPoint(e), layers = [], layer; - - for (var id in this._layers) { - layer = this._layers[id]; - if (layer.options.interactive && layer._containsPoint(point) && !this._map._draggableMoved(layer)) { - L.DomEvent._fakeStop(e); - layers.push(layer); - } - } - if (layers.length) { - this._fireEvent(layers, e); - } - }, - - _onMouseMove: function (e) { - if (!this._map || this._map.dragging.moving() || this._map._animatingZoom) { return; } - - var point = this._map.mouseEventToLayerPoint(e); - this._handleMouseOut(e, point); - this._handleMouseHover(e, point); - }, - - - _handleMouseOut: function (e, point) { - var layer = this._hoveredLayer; - if (layer && (e.type === 'mouseout' || !layer._containsPoint(point))) { - // if we're leaving the layer, fire mouseout - L.DomUtil.removeClass(this._container, 'leaflet-interactive'); - this._fireEvent([layer], e, 'mouseout'); - this._hoveredLayer = null; - } - }, - - _handleMouseHover: function (e, point) { - var id, layer; - - for (id in this._drawnLayers) { - layer = this._drawnLayers[id]; - if (layer.options.interactive && layer._containsPoint(point)) { - L.DomUtil.addClass(this._container, 'leaflet-interactive'); // change cursor - this._fireEvent([layer], e, 'mouseover'); - this._hoveredLayer = layer; - } - } - - if (this._hoveredLayer) { - this._fireEvent([this._hoveredLayer], e); - } - }, - - _fireEvent: function (layers, e, type) { - this._map._fireDOMEvent(e, type || e.type, layers); - }, - - // TODO _bringToFront & _bringToBack, pretty tricky - - _bringToFront: L.Util.falseFn, - _bringToBack: L.Util.falseFn -}); - -// @namespace Browser; @property canvas: Boolean -// `true` when the browser supports [``](https://developer.mozilla.org/docs/Web/API/Canvas_API). -L.Browser.canvas = (function () { - return !!document.createElement('canvas').getContext; -}()); - -// @namespace Canvas -// @factory L.canvas(options?: Renderer options) -// Creates a Canvas renderer with the given options. -L.canvas = function (options) { - return L.Browser.canvas ? new L.Canvas(options) : null; -}; - -L.Polyline.prototype._containsPoint = function (p, closed) { - var i, j, k, len, len2, part, - w = this._clickTolerance(); - - if (!this._pxBounds.contains(p)) { return false; } - - // hit detection for polylines - for (i = 0, len = this._parts.length; i < len; i++) { - part = this._parts[i]; - - for (j = 0, len2 = part.length, k = len2 - 1; j < len2; k = j++) { - if (!closed && (j === 0)) { continue; } - - if (L.LineUtil.pointToSegmentDistance(p, part[k], part[j]) <= w) { - return true; - } - } - } - return false; -}; - -L.Polygon.prototype._containsPoint = function (p) { - var inside = false, - part, p1, p2, i, j, k, len, len2; - - if (!this._pxBounds.contains(p)) { return false; } - - // ray casting algorithm for detecting if point is in polygon - for (i = 0, len = this._parts.length; i < len; i++) { - part = this._parts[i]; - - for (j = 0, len2 = part.length, k = len2 - 1; j < len2; k = j++) { - p1 = part[j]; - p2 = part[k]; - - if (((p1.y > p.y) !== (p2.y > p.y)) && (p.x < (p2.x - p1.x) * (p.y - p1.y) / (p2.y - p1.y) + p1.x)) { - inside = !inside; - } - } - } - - // also check if it's on polygon stroke - return inside || L.Polyline.prototype._containsPoint.call(this, p, true); -}; - -L.CircleMarker.prototype._containsPoint = function (p) { - return p.distanceTo(this._point) <= this._radius + this._clickTolerance(); -}; - - - + + + +/* + * @class Polygon + * @aka L.Polygon + * @inherits Polyline + * + * A class for drawing polygon overlays on a map. Extends `Polyline`. + * + * Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one — it's better to filter out such points. + * + * + * @example + * + * ```js + * // create a red polygon from an array of LatLng points + * var latlngs = [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]]; + * + * var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map); + * + * // zoom the map to the polygon + * map.fitBounds(polygon.getBounds()); + * ``` + * + * You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape: + * + * ```js + * var latlngs = [ + * [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring + * [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole + * ]; + * ``` + * + * Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape. + * + * ```js + * var latlngs = [ + * [ // first polygon + * [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring + * [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole + * ], + * [ // second polygon + * [[-109.05, 37],[-109.03, 41],[-102.05, 41],[-102.04, 37],[-109.05, 38]] + * ] + * ]; + * ``` + */ + +L.Polygon = L.Polyline.extend({ + + options: { + fill: true + }, + + isEmpty: function () { + return !this._latlngs.length || !this._latlngs[0].length; + }, + + getCenter: function () { + // throws error when not yet added to map as this center calculation requires projected coordinates + if (!this._map) { + throw new Error('Must add layer to map before using getCenter()'); + } + + var i, j, p1, p2, f, area, x, y, center, + points = this._rings[0], + len = points.length; + + if (!len) { return null; } + + // polygon centroid algorithm; only uses the first ring if there are multiple + + area = x = y = 0; + + for (i = 0, j = len - 1; i < len; j = i++) { + p1 = points[i]; + p2 = points[j]; + + f = p1.y * p2.x - p2.y * p1.x; + x += (p1.x + p2.x) * f; + y += (p1.y + p2.y) * f; + area += f * 3; + } + + if (area === 0) { + // Polygon is so small that all points are on same pixel. + center = points[0]; + } else { + center = [x / area, y / area]; + } + return this._map.layerPointToLatLng(center); + }, + + _convertLatLngs: function (latlngs) { + var result = L.Polyline.prototype._convertLatLngs.call(this, latlngs), + len = result.length; + + // remove last point if it equals first one + if (len >= 2 && result[0] instanceof L.LatLng && result[0].equals(result[len - 1])) { + result.pop(); + } + return result; + }, + + _setLatLngs: function (latlngs) { + L.Polyline.prototype._setLatLngs.call(this, latlngs); + if (L.Polyline._flat(this._latlngs)) { + this._latlngs = [this._latlngs]; + } + }, + + _defaultShape: function () { + return L.Polyline._flat(this._latlngs[0]) ? this._latlngs[0] : this._latlngs[0][0]; + }, + + _clipPoints: function () { + // polygons need a different clipping algorithm so we redefine that + + var bounds = this._renderer._bounds, + w = this.options.weight, + p = new L.Point(w, w); + + // increase clip padding by stroke width to avoid stroke on clip edges + bounds = new L.Bounds(bounds.min.subtract(p), bounds.max.add(p)); + + this._parts = []; + if (!this._pxBounds || !this._pxBounds.intersects(bounds)) { + return; + } + + if (this.options.noClip) { + this._parts = this._rings; + return; + } + + for (var i = 0, len = this._rings.length, clipped; i < len; i++) { + clipped = L.PolyUtil.clipPolygon(this._rings[i], bounds, true); + if (clipped.length) { + this._parts.push(clipped); + } + } + }, + + _updatePath: function () { + this._renderer._updatePoly(this, true); + } +}); + + +// @factory L.polygon(latlngs: LatLng[], options?: Polyline options) +L.polygon = function (latlngs, options) { + return new L.Polygon(latlngs, options); +}; + + + +/* + * L.Rectangle extends Polygon and creates a rectangle when passed a LatLngBounds object. + */ + +/* + * @class Rectangle + * @aka L.Retangle + * @inherits Polygon + * + * A class for drawing rectangle overlays on a map. Extends `Polygon`. + * + * @example + * + * ```js + * // define rectangle geographical bounds + * var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]]; + * + * // create an orange rectangle + * L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); + * + * // zoom the map to the rectangle bounds + * map.fitBounds(bounds); + * ``` + * + */ + + +L.Rectangle = L.Polygon.extend({ + initialize: function (latLngBounds, options) { + L.Polygon.prototype.initialize.call(this, this._boundsToLatLngs(latLngBounds), options); + }, + + // @method setBounds(latLngBounds: LatLngBounds): this + // Redraws the rectangle with the passed bounds. + setBounds: function (latLngBounds) { + return this.setLatLngs(this._boundsToLatLngs(latLngBounds)); + }, + + _boundsToLatLngs: function (latLngBounds) { + latLngBounds = L.latLngBounds(latLngBounds); + return [ + latLngBounds.getSouthWest(), + latLngBounds.getNorthWest(), + latLngBounds.getNorthEast(), + latLngBounds.getSouthEast() + ]; + } +}); + + +// @factory L.rectangle(latLngBounds: LatLngBounds, options?: Polyline options) +L.rectangle = function (latLngBounds, options) { + return new L.Rectangle(latLngBounds, options); +}; + + + +/* + * @class CircleMarker + * @aka L.CircleMarker + * @inherits Path + * + * A circle of a fixed size with radius specified in pixels. Extends `Path`. + */ + +L.CircleMarker = L.Path.extend({ + + // @section + // @aka CircleMarker options + options: { + fill: true, + + // @option radius: Number = 10 + // Radius of the circle marker, in pixels + radius: 10 + }, + + initialize: function (latlng, options) { + L.setOptions(this, options); + this._latlng = L.latLng(latlng); + this._radius = this.options.radius; + }, + + // @method setLatLng(latLng: LatLng): this + // Sets the position of a circle marker to a new location. + setLatLng: function (latlng) { + this._latlng = L.latLng(latlng); + this.redraw(); + return this.fire('move', {latlng: this._latlng}); + }, + + // @method getLatLng(): LatLng + // Returns the current geographical position of the circle marker + getLatLng: function () { + return this._latlng; + }, + + // @method setRadius(radius: Number): this + // Sets the radius of a circle marker. Units are in pixels. + setRadius: function (radius) { + this.options.radius = this._radius = radius; + return this.redraw(); + }, + + // @method getRadius(): Number + // Returns the current radius of the circle + getRadius: function () { + return this._radius; + }, + + setStyle : function (options) { + var radius = options && options.radius || this._radius; + L.Path.prototype.setStyle.call(this, options); + this.setRadius(radius); + return this; + }, + + _project: function () { + this._point = this._map.latLngToLayerPoint(this._latlng); + this._updateBounds(); + }, + + _updateBounds: function () { + var r = this._radius, + r2 = this._radiusY || r, + w = this._clickTolerance(), + p = [r + w, r2 + w]; + this._pxBounds = new L.Bounds(this._point.subtract(p), this._point.add(p)); + }, + + _update: function () { + if (this._map) { + this._updatePath(); + } + }, + + _updatePath: function () { + this._renderer._updateCircle(this); + }, + + _empty: function () { + return this._radius && !this._renderer._bounds.intersects(this._pxBounds); + } +}); + + +// @factory L.circleMarker(latlng: LatLng, options?: CircleMarker options) +// Instantiates a circle marker object given a geographical point, and an optional options object. +L.circleMarker = function (latlng, options) { + return new L.CircleMarker(latlng, options); +}; + + + +/* + * @class Circle + * @aka L.Circle + * @inherits CircleMarker + * + * A class for drawing circle overlays on a map. Extends `CircleMarker`. + * + * It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion). + * + * @example + * + * ```js + * L.circle([50.5, 30.5], {radius: 200}).addTo(map); + * ``` + */ + +L.Circle = L.CircleMarker.extend({ + + initialize: function (latlng, options, legacyOptions) { + if (typeof options === 'number') { + // Backwards compatibility with 0.7.x factory (latlng, radius, options?) + options = L.extend({}, legacyOptions, {radius: options}); + } + L.setOptions(this, options); + this._latlng = L.latLng(latlng); + + if (isNaN(this.options.radius)) { throw new Error('Circle radius cannot be NaN'); } + + // @section + // @aka Circle options + // @option radius: Number; Radius of the circle, in meters. + this._mRadius = this.options.radius; + }, + + // @method setRadius(radius: Number): this + // Sets the radius of a circle. Units are in meters. + setRadius: function (radius) { + this._mRadius = radius; + return this.redraw(); + }, + + // @method getRadius(): Number + // Returns the current radius of a circle. Units are in meters. + getRadius: function () { + return this._mRadius; + }, + + // @method getBounds(): LatLngBounds + // Returns the `LatLngBounds` of the path. + getBounds: function () { + var half = [this._radius, this._radiusY || this._radius]; + + return new L.LatLngBounds( + this._map.layerPointToLatLng(this._point.subtract(half)), + this._map.layerPointToLatLng(this._point.add(half))); + }, + + setStyle: L.Path.prototype.setStyle, + + _project: function () { + + var lng = this._latlng.lng, + lat = this._latlng.lat, + map = this._map, + crs = map.options.crs; + + if (crs.distance === L.CRS.Earth.distance) { + var d = Math.PI / 180, + latR = (this._mRadius / L.CRS.Earth.R) / d, + top = map.project([lat + latR, lng]), + bottom = map.project([lat - latR, lng]), + p = top.add(bottom).divideBy(2), + lat2 = map.unproject(p).lat, + lngR = Math.acos((Math.cos(latR * d) - Math.sin(lat * d) * Math.sin(lat2 * d)) / + (Math.cos(lat * d) * Math.cos(lat2 * d))) / d; + + if (isNaN(lngR) || lngR === 0) { + lngR = latR / Math.cos(Math.PI / 180 * lat); // Fallback for edge case, #2425 + } + + this._point = p.subtract(map.getPixelOrigin()); + this._radius = isNaN(lngR) ? 0 : Math.max(Math.round(p.x - map.project([lat2, lng - lngR]).x), 1); + this._radiusY = Math.max(Math.round(p.y - top.y), 1); + + } else { + var latlng2 = crs.unproject(crs.project(this._latlng).subtract([this._mRadius, 0])); + + this._point = map.latLngToLayerPoint(this._latlng); + this._radius = this._point.x - map.latLngToLayerPoint(latlng2).x; + } + + this._updateBounds(); + } +}); + +// @factory L.circle(latlng: LatLng, options?: Circle options) +// Instantiates a circle object given a geographical point, and an options object +// which contains the circle radius. +// @alternative +// @factory L.circle(latlng: LatLng, radius: Number, options?: Circle options) +// Obsolete way of instantiating a circle, for compatibility with 0.7.x code. +// Do not use in new applications or plugins. +L.circle = function (latlng, options, legacyOptions) { + return new L.Circle(latlng, options, legacyOptions); +}; + + + +/* + * @class SVG + * @inherits Renderer + * @aka L.SVG + * + * Allows vector layers to be displayed with [SVG](https://developer.mozilla.org/docs/Web/SVG). + * Inherits `Renderer`. + * + * Due to [technical limitations](http://caniuse.com/#search=svg), SVG is not + * available in all site browsers, notably Android 2.x and 3.x. + * + * Although SVG is not available on IE7 and IE8, these browsers support + * [VML](https://en.wikipedia.org/wiki/Vector_Markup_Language) + * (a now deprecated technology), and the SVG renderer will fall back to VML in + * this case. + * + * @example + * + * Use SVG by default for all paths in the map: + * + * ```js + * var map = L.map('map', { + * renderer: L.svg() + * }); + * ``` + * + * Use a SVG renderer with extra padding for specific vector geometries: + * + * ```js + * var map = L.map('map'); + * var myRenderer = L.svg({ padding: 0.5 }); + * var line = L.polyline( coordinates, { renderer: myRenderer } ); + * var circle = L.circle( center, { renderer: myRenderer } ); + * ``` + */ + +L.SVG = L.Renderer.extend({ + + getEvents: function () { + var events = L.Renderer.prototype.getEvents.call(this); + events.zoomstart = this._onZoomStart; + return events; + }, + + _initContainer: function () { + this._container = L.SVG.create('svg'); + + // makes it possible to click through svg root; we'll reset it back in individual paths + this._container.setAttribute('pointer-events', 'none'); + + this._rootGroup = L.SVG.create('g'); + this._container.appendChild(this._rootGroup); + }, + + _onZoomStart: function () { + // Drag-then-pinch interactions might mess up the center and zoom. + // In this case, the easiest way to prevent this is re-do the renderer + // bounds and padding when the zooming starts. + this._update(); + }, + + _update: function () { + if (this._map._animatingZoom && this._bounds) { return; } + + L.Renderer.prototype._update.call(this); + + var b = this._bounds, + size = b.getSize(), + container = this._container; + + // set size of svg-container if changed + if (!this._svgSize || !this._svgSize.equals(size)) { + this._svgSize = size; + container.setAttribute('width', size.x); + container.setAttribute('height', size.y); + } + + // movement: update container viewBox so that we don't have to change coordinates of individual layers + L.DomUtil.setPosition(container, b.min); + container.setAttribute('viewBox', [b.min.x, b.min.y, size.x, size.y].join(' ')); + + this.fire('update'); + }, + + // methods below are called by vector layers implementations + + _initPath: function (layer) { + var path = layer._path = L.SVG.create('path'); + + // @namespace Path + // @option className: String = null + // Custom class name set on an element. Only for SVG renderer. + if (layer.options.className) { + L.DomUtil.addClass(path, layer.options.className); + } + + if (layer.options.interactive) { + L.DomUtil.addClass(path, 'leaflet-interactive'); + } + + this._updateStyle(layer); + }, + + _addPath: function (layer) { + this._rootGroup.appendChild(layer._path); + layer.addInteractiveTarget(layer._path); + }, + + _removePath: function (layer) { + L.DomUtil.remove(layer._path); + layer.removeInteractiveTarget(layer._path); + }, + + _updatePath: function (layer) { + layer._project(); + layer._update(); + }, + + _updateStyle: function (layer) { + var path = layer._path, + options = layer.options; + + if (!path) { return; } + + if (options.stroke) { + path.setAttribute('stroke', options.color); + path.setAttribute('stroke-opacity', options.opacity); + path.setAttribute('stroke-width', options.weight); + path.setAttribute('stroke-linecap', options.lineCap); + path.setAttribute('stroke-linejoin', options.lineJoin); + + if (options.dashArray) { + path.setAttribute('stroke-dasharray', options.dashArray); + } else { + path.removeAttribute('stroke-dasharray'); + } + + if (options.dashOffset) { + path.setAttribute('stroke-dashoffset', options.dashOffset); + } else { + path.removeAttribute('stroke-dashoffset'); + } + } else { + path.setAttribute('stroke', 'none'); + } + + if (options.fill) { + path.setAttribute('fill', options.fillColor || options.color); + path.setAttribute('fill-opacity', options.fillOpacity); + path.setAttribute('fill-rule', options.fillRule || 'evenodd'); + } else { + path.setAttribute('fill', 'none'); + } + }, + + _updatePoly: function (layer, closed) { + this._setPath(layer, L.SVG.pointsToPath(layer._parts, closed)); + }, + + _updateCircle: function (layer) { + var p = layer._point, + r = layer._radius, + r2 = layer._radiusY || r, + arc = 'a' + r + ',' + r2 + ' 0 1,0 '; + + // drawing a circle with two half-arcs + var d = layer._empty() ? 'M0 0' : + 'M' + (p.x - r) + ',' + p.y + + arc + (r * 2) + ',0 ' + + arc + (-r * 2) + ',0 '; + + this._setPath(layer, d); + }, + + _setPath: function (layer, path) { + layer._path.setAttribute('d', path); + }, + + // SVG does not have the concept of zIndex so we resort to changing the DOM order of elements + _bringToFront: function (layer) { + L.DomUtil.toFront(layer._path); + }, + + _bringToBack: function (layer) { + L.DomUtil.toBack(layer._path); + } +}); + + +// @namespace SVG; @section +// There are several static functions which can be called without instantiating L.SVG: +L.extend(L.SVG, { + // @function create(name: String): SVGElement + // Returns a instance of [SVGElement](https://developer.mozilla.org/docs/Web/API/SVGElement), + // corresponding to the class name passed. For example, using 'line' will return + // an instance of [SVGLineElement](https://developer.mozilla.org/docs/Web/API/SVGLineElement). + create: function (name) { + return document.createElementNS('http://www.w3.org/2000/svg', name); + }, + + // @function pointsToPath(rings: Point[], closed: Boolean): String + // Generates a SVG path string for multiple rings, with each ring turning + // into "M..L..L.." instructions + pointsToPath: function (rings, closed) { + var str = '', + i, j, len, len2, points, p; + + for (i = 0, len = rings.length; i < len; i++) { + points = rings[i]; + + for (j = 0, len2 = points.length; j < len2; j++) { + p = points[j]; + str += (j ? 'L' : 'M') + p.x + ' ' + p.y; + } + + // closes the ring for polygons; "x" is VML syntax + str += closed ? (L.Browser.svg ? 'z' : 'x') : ''; + } + + // SVG complains about empty path strings + return str || 'M0 0'; + } +}); + +// @namespace Browser; @property svg: Boolean +// `true` when the browser supports [SVG](https://developer.mozilla.org/docs/Web/SVG). +L.Browser.svg = !!(document.createElementNS && L.SVG.create('svg').createSVGRect); + + +// @namespace SVG +// @factory L.svg(options?: Renderer options) +// Creates a SVG renderer with the given options. +L.svg = function (options) { + return L.Browser.svg || L.Browser.vml ? new L.SVG(options) : null; +}; + + + +/* + * Thanks to Dmitry Baranovsky and his Raphael library for inspiration! + */ + +/* + * @class SVG + * + * Although SVG is not available on IE7 and IE8, these browsers support [VML](https://en.wikipedia.org/wiki/Vector_Markup_Language), and the SVG renderer will fall back to VML in this case. + * + * VML was deprecated in 2012, which means VML functionality exists only for backwards compatibility + * with old versions of Internet Explorer. + */ + +// @namespace Browser; @property vml: Boolean +// `true` if the browser supports [VML](https://en.wikipedia.org/wiki/Vector_Markup_Language). +L.Browser.vml = !L.Browser.svg && (function () { + try { + var div = document.createElement('div'); + div.innerHTML = ''; + + var shape = div.firstChild; + shape.style.behavior = 'url(#default#VML)'; + + return shape && (typeof shape.adj === 'object'); + + } catch (e) { + return false; + } +}()); + +// redefine some SVG methods to handle VML syntax which is similar but with some differences +L.SVG.include(!L.Browser.vml ? {} : { + + _initContainer: function () { + this._container = L.DomUtil.create('div', 'leaflet-vml-container'); + }, + + _update: function () { + if (this._map._animatingZoom) { return; } + L.Renderer.prototype._update.call(this); + this.fire('update'); + }, + + _initPath: function (layer) { + var container = layer._container = L.SVG.create('shape'); + + L.DomUtil.addClass(container, 'leaflet-vml-shape ' + (this.options.className || '')); + + container.coordsize = '1 1'; + + layer._path = L.SVG.create('path'); + container.appendChild(layer._path); + + this._updateStyle(layer); + }, + + _addPath: function (layer) { + var container = layer._container; + this._container.appendChild(container); + + if (layer.options.interactive) { + layer.addInteractiveTarget(container); + } + }, + + _removePath: function (layer) { + var container = layer._container; + L.DomUtil.remove(container); + layer.removeInteractiveTarget(container); + }, + + _updateStyle: function (layer) { + var stroke = layer._stroke, + fill = layer._fill, + options = layer.options, + container = layer._container; + + container.stroked = !!options.stroke; + container.filled = !!options.fill; + + if (options.stroke) { + if (!stroke) { + stroke = layer._stroke = L.SVG.create('stroke'); + } + container.appendChild(stroke); + stroke.weight = options.weight + 'px'; + stroke.color = options.color; + stroke.opacity = options.opacity; + + if (options.dashArray) { + stroke.dashStyle = L.Util.isArray(options.dashArray) ? + options.dashArray.join(' ') : + options.dashArray.replace(/( *, *)/g, ' '); + } else { + stroke.dashStyle = ''; + } + stroke.endcap = options.lineCap.replace('butt', 'flat'); + stroke.joinstyle = options.lineJoin; + + } else if (stroke) { + container.removeChild(stroke); + layer._stroke = null; + } + + if (options.fill) { + if (!fill) { + fill = layer._fill = L.SVG.create('fill'); + } + container.appendChild(fill); + fill.color = options.fillColor || options.color; + fill.opacity = options.fillOpacity; + + } else if (fill) { + container.removeChild(fill); + layer._fill = null; + } + }, + + _updateCircle: function (layer) { + var p = layer._point.round(), + r = Math.round(layer._radius), + r2 = Math.round(layer._radiusY || r); + + this._setPath(layer, layer._empty() ? 'M0 0' : + 'AL ' + p.x + ',' + p.y + ' ' + r + ',' + r2 + ' 0,' + (65535 * 360)); + }, + + _setPath: function (layer, path) { + layer._path.v = path; + }, + + _bringToFront: function (layer) { + L.DomUtil.toFront(layer._container); + }, + + _bringToBack: function (layer) { + L.DomUtil.toBack(layer._container); + } +}); + +if (L.Browser.vml) { + L.SVG.create = (function () { + try { + document.namespaces.add('lvml', 'urn:schemas-microsoft-com:vml'); + return function (name) { + return document.createElement(''); + }; + } catch (e) { + return function (name) { + return document.createElement('<' + name + ' xmlns="urn:schemas-microsoft.com:vml" class="lvml">'); + }; + } + })(); +} + + + +/* + * @class Canvas + * @inherits Renderer + * @aka L.Canvas + * + * Allows vector layers to be displayed with [``](https://developer.mozilla.org/docs/Web/API/Canvas_API). + * Inherits `Renderer`. + * + * Due to [technical limitations](http://caniuse.com/#search=canvas), Canvas is not + * available in all site browsers, notably IE8, and overlapping geometries might + * not display properly in some edge cases. + * + * @example + * + * Use Canvas by default for all paths in the map: + * + * ```js + * var map = L.map('map', { + * renderer: L.canvas() + * }); + * ``` + * + * Use a Canvas renderer with extra padding for specific vector geometries: + * + * ```js + * var map = L.map('map'); + * var myRenderer = L.canvas({ padding: 0.5 }); + * var line = L.polyline( coordinates, { renderer: myRenderer } ); + * var circle = L.circle( center, { renderer: myRenderer } ); + * ``` + */ + +L.Canvas = L.Renderer.extend({ + + onAdd: function () { + L.Renderer.prototype.onAdd.call(this); + + this._layers = this._layers || {}; + + // Redraw vectors since canvas is cleared upon removal, + // in case of removing the renderer itself from the map. + this._draw(); + }, + + _initContainer: function () { + var container = this._container = document.createElement('canvas'); + + L.DomEvent + .on(container, 'mousemove', L.Util.throttle(this._onMouseMove, 32, this), this) + .on(container, 'click dblclick mousedown mouseup contextmenu', this._onClick, this) + .on(container, 'mouseout', this._handleMouseOut, this); + + this._ctx = container.getContext('2d'); + }, + + _update: function () { + if (this._map._animatingZoom && this._bounds) { return; } + + this._drawnLayers = {}; + + L.Renderer.prototype._update.call(this); + + var b = this._bounds, + container = this._container, + size = b.getSize(), + m = L.Browser.retina ? 2 : 1; + + L.DomUtil.setPosition(container, b.min); + + // set canvas size (also clearing it); use double size on retina + container.width = m * size.x; + container.height = m * size.y; + container.style.width = size.x + 'px'; + container.style.height = size.y + 'px'; + + if (L.Browser.retina) { + this._ctx.scale(2, 2); + } + + // translate so we use the same path coordinates after canvas element moves + this._ctx.translate(-b.min.x, -b.min.y); + + // Tell paths to redraw themselves + this.fire('update'); + }, + + _initPath: function (layer) { + this._updateDashArray(layer); + this._layers[L.stamp(layer)] = layer; + }, + + _addPath: L.Util.falseFn, + + _removePath: function (layer) { + layer._removed = true; + this._requestRedraw(layer); + }, + + _updatePath: function (layer) { + this._redrawBounds = layer._pxBounds; + this._draw(true); + layer._project(); + layer._update(); + this._draw(); + this._redrawBounds = null; + }, + + _updateStyle: function (layer) { + this._updateDashArray(layer); + this._requestRedraw(layer); + }, + + _updateDashArray: function (layer) { + if (layer.options.dashArray) { + var parts = layer.options.dashArray.split(','), + dashArray = [], + i; + for (i = 0; i < parts.length; i++) { + dashArray.push(Number(parts[i])); + } + layer.options._dashArray = dashArray; + } + }, + + _requestRedraw: function (layer) { + if (!this._map) { return; } + + var padding = (layer.options.weight || 0) + 1; + this._redrawBounds = this._redrawBounds || new L.Bounds(); + this._redrawBounds.extend(layer._pxBounds.min.subtract([padding, padding])); + this._redrawBounds.extend(layer._pxBounds.max.add([padding, padding])); + + this._redrawRequest = this._redrawRequest || L.Util.requestAnimFrame(this._redraw, this); + }, + + _redraw: function () { + this._redrawRequest = null; + + this._draw(true); // clear layers in redraw bounds + this._draw(); // draw layers + + this._redrawBounds = null; + }, + + _draw: function (clear) { + this._clear = clear; + var layer, bounds = this._redrawBounds; + this._ctx.save(); + if (bounds) { + this._ctx.beginPath(); + this._ctx.rect(bounds.min.x, bounds.min.y, bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y); + this._ctx.clip(); + } + + for (var id in this._layers) { + layer = this._layers[id]; + if (!bounds || (layer._pxBounds && layer._pxBounds.intersects(bounds))) { + layer._updatePath(); + } + if (clear && layer._removed) { + delete layer._removed; + delete this._layers[id]; + } + } + this._ctx.restore(); // Restore state before clipping. + }, + + _updatePoly: function (layer, closed) { + + var i, j, len2, p, + parts = layer._parts, + len = parts.length, + ctx = this._ctx; + + if (!len) { return; } + + this._drawnLayers[layer._leaflet_id] = layer; + + ctx.beginPath(); + + if (ctx.setLineDash) { + ctx.setLineDash(layer.options && layer.options._dashArray || []); + } + + for (i = 0; i < len; i++) { + for (j = 0, len2 = parts[i].length; j < len2; j++) { + p = parts[i][j]; + ctx[j ? 'lineTo' : 'moveTo'](p.x, p.y); + } + if (closed) { + ctx.closePath(); + } + } + + this._fillStroke(ctx, layer); + + // TODO optimization: 1 fill/stroke for all features with equal style instead of 1 for each feature + }, + + _updateCircle: function (layer) { + + if (layer._empty()) { return; } + + var p = layer._point, + ctx = this._ctx, + r = layer._radius, + s = (layer._radiusY || r) / r; + + this._drawnLayers[layer._leaflet_id] = layer; + + if (s !== 1) { + ctx.save(); + ctx.scale(1, s); + } + + ctx.beginPath(); + ctx.arc(p.x, p.y / s, r, 0, Math.PI * 2, false); + + if (s !== 1) { + ctx.restore(); + } + + this._fillStroke(ctx, layer); + }, + + _fillStroke: function (ctx, layer) { + var clear = this._clear, + options = layer.options; + + ctx.globalCompositeOperation = clear ? 'destination-out' : 'source-over'; + + if (options.fill) { + ctx.globalAlpha = clear ? 1 : options.fillOpacity; + ctx.fillStyle = options.fillColor || options.color; + ctx.fill(options.fillRule || 'evenodd'); + } + + if (options.stroke && options.weight !== 0) { + ctx.globalAlpha = clear ? 1 : options.opacity; + + // if clearing shape, do it with the previously drawn line width + layer._prevWeight = ctx.lineWidth = clear ? layer._prevWeight + 1 : options.weight; + + ctx.strokeStyle = options.color; + ctx.lineCap = options.lineCap; + ctx.lineJoin = options.lineJoin; + ctx.stroke(); + } + }, + + // Canvas obviously doesn't have mouse events for individual drawn objects, + // so we emulate that by calculating what's under the mouse on mousemove/click manually + + _onClick: function (e) { + var point = this._map.mouseEventToLayerPoint(e), layers = [], layer; + + for (var id in this._layers) { + layer = this._layers[id]; + if (layer.options.interactive && layer._containsPoint(point) && !this._map._draggableMoved(layer)) { + L.DomEvent._fakeStop(e); + layers.push(layer); + } + } + if (layers.length) { + this._fireEvent(layers, e); + } + }, + + _onMouseMove: function (e) { + if (!this._map || this._map.dragging.moving() || this._map._animatingZoom) { return; } + + var point = this._map.mouseEventToLayerPoint(e); + this._handleMouseOut(e, point); + this._handleMouseHover(e, point); + }, + + + _handleMouseOut: function (e, point) { + var layer = this._hoveredLayer; + if (layer && (e.type === 'mouseout' || !layer._containsPoint(point))) { + // if we're leaving the layer, fire mouseout + L.DomUtil.removeClass(this._container, 'leaflet-interactive'); + this._fireEvent([layer], e, 'mouseout'); + this._hoveredLayer = null; + } + }, + + _handleMouseHover: function (e, point) { + var id, layer; + + for (id in this._drawnLayers) { + layer = this._drawnLayers[id]; + if (layer.options.interactive && layer._containsPoint(point)) { + L.DomUtil.addClass(this._container, 'leaflet-interactive'); // change cursor + this._fireEvent([layer], e, 'mouseover'); + this._hoveredLayer = layer; + } + } + + if (this._hoveredLayer) { + this._fireEvent([this._hoveredLayer], e); + } + }, + + _fireEvent: function (layers, e, type) { + this._map._fireDOMEvent(e, type || e.type, layers); + }, + + // TODO _bringToFront & _bringToBack, pretty tricky + + _bringToFront: L.Util.falseFn, + _bringToBack: L.Util.falseFn +}); + +// @namespace Browser; @property canvas: Boolean +// `true` when the browser supports [``](https://developer.mozilla.org/docs/Web/API/Canvas_API). +L.Browser.canvas = (function () { + return !!document.createElement('canvas').getContext; +}()); + +// @namespace Canvas +// @factory L.canvas(options?: Renderer options) +// Creates a Canvas renderer with the given options. +L.canvas = function (options) { + return L.Browser.canvas ? new L.Canvas(options) : null; +}; + +L.Polyline.prototype._containsPoint = function (p, closed) { + var i, j, k, len, len2, part, + w = this._clickTolerance(); + + if (!this._pxBounds.contains(p)) { return false; } + + // hit detection for polylines + for (i = 0, len = this._parts.length; i < len; i++) { + part = this._parts[i]; + + for (j = 0, len2 = part.length, k = len2 - 1; j < len2; k = j++) { + if (!closed && (j === 0)) { continue; } + + if (L.LineUtil.pointToSegmentDistance(p, part[k], part[j]) <= w) { + return true; + } + } + } + return false; +}; + +L.Polygon.prototype._containsPoint = function (p) { + var inside = false, + part, p1, p2, i, j, k, len, len2; + + if (!this._pxBounds.contains(p)) { return false; } + + // ray casting algorithm for detecting if point is in polygon + for (i = 0, len = this._parts.length; i < len; i++) { + part = this._parts[i]; + + for (j = 0, len2 = part.length, k = len2 - 1; j < len2; k = j++) { + p1 = part[j]; + p2 = part[k]; + + if (((p1.y > p.y) !== (p2.y > p.y)) && (p.x < (p2.x - p1.x) * (p.y - p1.y) / (p2.y - p1.y) + p1.x)) { + inside = !inside; + } + } + } + + // also check if it's on polygon stroke + return inside || L.Polyline.prototype._containsPoint.call(this, p, true); +}; + +L.CircleMarker.prototype._containsPoint = function (p) { + return p.distanceTo(this._point) <= this._radius + this._clickTolerance(); +}; + + + /* * @class GeoJSON * @aka L.GeoJSON @@ -9706,9 +9706,9 @@ L.geoJSON = function (geojson, options) { }; // Backward compatibility. L.geoJson = L.geoJSON; - - - + + + /* * @namespace DomEvent * Utility functions to work with the [DOM events](https://developer.mozilla.org/docs/Web/API/Event), used by Leaflet internally. @@ -10017,9 +10017,9 @@ L.DomEvent.addListener = L.DomEvent.on; // @function removeListener(…): this // Alias to [`L.DomEvent.off`](#domevent-off) L.DomEvent.removeListener = L.DomEvent.off; - - - + + + /* * @class Draggable * @aka L.Draggable @@ -10229,432 +10229,432 @@ L.Draggable = L.Evented.extend({ L.Draggable._dragging = false; } }); - - - -/* - L.Handler is a base class for handler classes that are used internally to inject - interaction features like dragging to classes like Map and Marker. -*/ - -// @class Handler -// @aka L.Handler -// Abstract class for map interaction handlers - -L.Handler = L.Class.extend({ - initialize: function (map) { - this._map = map; - }, - - // @method enable(): this - // Enables the handler - enable: function () { - if (this._enabled) { return this; } - - this._enabled = true; - this.addHooks(); - return this; - }, - - // @method disable(): this - // Disables the handler - disable: function () { - if (!this._enabled) { return this; } - - this._enabled = false; - this.removeHooks(); - return this; - }, - - // @method enabled(): Boolean - // Returns `true` if the handler is enabled - enabled: function () { - return !!this._enabled; - } - - // @section Extension methods - // Classes inheriting from `Handler` must implement the two following methods: - // @method addHooks() - // Called when the handler is enabled, should add event hooks. - // @method removeHooks() - // Called when the handler is disabled, should remove the event hooks added previously. -}); - - - -/* - * L.Handler.MapDrag is used to make the map draggable (with panning inertia), enabled by default. - */ - -// @namespace Map -// @section Interaction Options -L.Map.mergeOptions({ - // @option dragging: Boolean = true - // Whether the map be draggable with mouse/touch or not. - dragging: true, - - // @section Panning Inertia Options - // @option inertia: Boolean = * - // If enabled, 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. Enabled by default unless running on old Android devices. - inertia: !L.Browser.android23, - - // @option inertiaDeceleration: Number = 3000 - // The rate with which the inertial movement slows down, in pixels/second². - inertiaDeceleration: 3400, // px/s^2 - - // @option inertiaMaxSpeed: Number = Infinity - // Max speed of the inertial movement, in pixels/second. - inertiaMaxSpeed: Infinity, // px/s - - // @option easeLinearity: Number = 0.2 - easeLinearity: 0.2, - - // TODO refactor, move to CRS - // @option worldCopyJump: Boolean = false - // With this option enabled, 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. - worldCopyJump: false, - - // @option maxBoundsViscosity: Number = 0.0 - // If `maxBounds` is set, this option will control how solid the bounds - // are when dragging the map around. The default value of `0.0` allows the - // user to drag outside the bounds at normal speed, higher values will - // slow down map dragging outside bounds, and `1.0` makes the bounds fully - // solid, preventing the user from dragging outside the bounds. - maxBoundsViscosity: 0.0 -}); - -L.Map.Drag = L.Handler.extend({ - addHooks: function () { - if (!this._draggable) { - var map = this._map; - - this._draggable = new L.Draggable(map._mapPane, map._container); - - this._draggable.on({ - down: this._onDown, - dragstart: this._onDragStart, - drag: this._onDrag, - dragend: this._onDragEnd - }, this); - - this._draggable.on('predrag', this._onPreDragLimit, this); - if (map.options.worldCopyJump) { - this._draggable.on('predrag', this._onPreDragWrap, this); - map.on('zoomend', this._onZoomEnd, this); - - map.whenReady(this._onZoomEnd, this); - } - } - L.DomUtil.addClass(this._map._container, 'leaflet-grab leaflet-touch-drag'); - this._draggable.enable(); - this._positions = []; - this._times = []; - }, - - removeHooks: function () { - L.DomUtil.removeClass(this._map._container, 'leaflet-grab'); - L.DomUtil.removeClass(this._map._container, 'leaflet-touch-drag'); - this._draggable.disable(); - }, - - moved: function () { - return this._draggable && this._draggable._moved; - }, - - moving: function () { - return this._draggable && this._draggable._moving; - }, - - _onDown: function () { - this._map._stop(); - }, - - _onDragStart: function () { - var map = this._map; - - if (this._map.options.maxBounds && this._map.options.maxBoundsViscosity) { - var bounds = L.latLngBounds(this._map.options.maxBounds); - - this._offsetLimit = L.bounds( - this._map.latLngToContainerPoint(bounds.getNorthWest()).multiplyBy(-1), - this._map.latLngToContainerPoint(bounds.getSouthEast()).multiplyBy(-1) - .add(this._map.getSize())); - - this._viscosity = Math.min(1.0, Math.max(0.0, this._map.options.maxBoundsViscosity)); - } else { - this._offsetLimit = null; - } - - map - .fire('movestart') - .fire('dragstart'); - - if (map.options.inertia) { - this._positions = []; - this._times = []; - } - }, - - _onDrag: function (e) { - if (this._map.options.inertia) { - var time = this._lastTime = +new Date(), - pos = this._lastPos = this._draggable._absPos || this._draggable._newPos; - - this._positions.push(pos); - this._times.push(time); - - if (time - this._times[0] > 50) { - this._positions.shift(); - this._times.shift(); - } - } - - this._map - .fire('move', e) - .fire('drag', e); - }, - - _onZoomEnd: function () { - var pxCenter = this._map.getSize().divideBy(2), - pxWorldCenter = this._map.latLngToLayerPoint([0, 0]); - - this._initialWorldOffset = pxWorldCenter.subtract(pxCenter).x; - this._worldWidth = this._map.getPixelWorldBounds().getSize().x; - }, - - _viscousLimit: function (value, threshold) { - return value - (value - threshold) * this._viscosity; - }, - - _onPreDragLimit: function () { - if (!this._viscosity || !this._offsetLimit) { return; } - - var offset = this._draggable._newPos.subtract(this._draggable._startPos); - - var limit = this._offsetLimit; - if (offset.x < limit.min.x) { offset.x = this._viscousLimit(offset.x, limit.min.x); } - if (offset.y < limit.min.y) { offset.y = this._viscousLimit(offset.y, limit.min.y); } - if (offset.x > limit.max.x) { offset.x = this._viscousLimit(offset.x, limit.max.x); } - if (offset.y > limit.max.y) { offset.y = this._viscousLimit(offset.y, limit.max.y); } - - this._draggable._newPos = this._draggable._startPos.add(offset); - }, - - _onPreDragWrap: function () { - // TODO refactor to be able to adjust map pane position after zoom - var worldWidth = this._worldWidth, - halfWidth = Math.round(worldWidth / 2), - dx = this._initialWorldOffset, - x = this._draggable._newPos.x, - newX1 = (x - halfWidth + dx) % worldWidth + halfWidth - dx, - newX2 = (x + halfWidth + dx) % worldWidth - halfWidth - dx, - newX = Math.abs(newX1 + dx) < Math.abs(newX2 + dx) ? newX1 : newX2; - - this._draggable._absPos = this._draggable._newPos.clone(); - this._draggable._newPos.x = newX; - }, - - _onDragEnd: function (e) { - var map = this._map, - options = map.options, - - noInertia = !options.inertia || this._times.length < 2; - - map.fire('dragend', e); - - if (noInertia) { - map.fire('moveend'); - - } else { - - var direction = this._lastPos.subtract(this._positions[0]), - duration = (this._lastTime - this._times[0]) / 1000, - ease = options.easeLinearity, - - speedVector = direction.multiplyBy(ease / duration), - speed = speedVector.distanceTo([0, 0]), - - limitedSpeed = Math.min(options.inertiaMaxSpeed, speed), - limitedSpeedVector = speedVector.multiplyBy(limitedSpeed / speed), - - decelerationDuration = limitedSpeed / (options.inertiaDeceleration * ease), - offset = limitedSpeedVector.multiplyBy(-decelerationDuration / 2).round(); - - if (!offset.x && !offset.y) { - map.fire('moveend'); - - } else { - offset = map._limitOffset(offset, map.options.maxBounds); - - L.Util.requestAnimFrame(function () { - map.panBy(offset, { - duration: decelerationDuration, - easeLinearity: ease, - noMoveStart: true, - animate: true - }); - }); - } - } - } -}); - -// @section Handlers -// @property dragging: Handler -// Map dragging handler (by both mouse and touch). -L.Map.addInitHook('addHandler', 'dragging', L.Map.Drag); - - - -/* - * L.Handler.DoubleClickZoom is used to handle double-click zoom on the map, enabled by default. - */ - -// @namespace Map -// @section Interaction Options - -L.Map.mergeOptions({ - // @option doubleClickZoom: Boolean|String = true - // 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. - doubleClickZoom: true -}); - -L.Map.DoubleClickZoom = L.Handler.extend({ - addHooks: function () { - this._map.on('dblclick', this._onDoubleClick, this); - }, - - removeHooks: function () { - this._map.off('dblclick', this._onDoubleClick, this); - }, - - _onDoubleClick: function (e) { - var map = this._map, - oldZoom = map.getZoom(), - delta = map.options.zoomDelta, - zoom = e.originalEvent.shiftKey ? oldZoom - delta : oldZoom + delta; - - if (map.options.doubleClickZoom === 'center') { - map.setZoom(zoom); - } else { - map.setZoomAround(e.containerPoint, zoom); - } - } -}); - -// @section Handlers -// -// Map properties include interaction handlers that allow you to control -// interaction behavior in runtime, enabling or disabling certain features such -// as dragging or touch zoom (see `Handler` methods). For example: -// -// ```js -// map.doubleClickZoom.disable(); -// ``` -// -// @property doubleClickZoom: Handler -// Double click zoom handler. -L.Map.addInitHook('addHandler', 'doubleClickZoom', L.Map.DoubleClickZoom); - - - -/* - * L.Handler.ScrollWheelZoom is used by L.Map to enable mouse scroll wheel zoom on the map. - */ - -// @namespace Map -// @section Interaction Options -L.Map.mergeOptions({ - // @section Mousewheel options - // @option scrollWheelZoom: Boolean|String = true - // 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. - scrollWheelZoom: true, - - // @option wheelDebounceTime: Number = 40 - // Limits the rate at which a wheel can fire (in milliseconds). By default - // user can't zoom via wheel more often than once per 40 ms. - wheelDebounceTime: 40, - - // @option wheelPxPerZoomLevel: Number = 60 - // How many scroll pixels (as reported by [L.DomEvent.getWheelDelta](#domevent-getwheeldelta)) - // mean a change of one full zoom level. Smaller values will make wheel-zooming - // faster (and vice versa). - wheelPxPerZoomLevel: 60 -}); - -L.Map.ScrollWheelZoom = L.Handler.extend({ - addHooks: function () { - L.DomEvent.on(this._map._container, 'mousewheel', this._onWheelScroll, this); - - this._delta = 0; - }, - - removeHooks: function () { - L.DomEvent.off(this._map._container, 'mousewheel', this._onWheelScroll, this); - }, - - _onWheelScroll: function (e) { - var delta = L.DomEvent.getWheelDelta(e); - - var debounce = this._map.options.wheelDebounceTime; - - this._delta += delta; - this._lastMousePos = this._map.mouseEventToContainerPoint(e); - - if (!this._startTime) { - this._startTime = +new Date(); - } - - var left = Math.max(debounce - (+new Date() - this._startTime), 0); - - clearTimeout(this._timer); - this._timer = setTimeout(L.bind(this._performZoom, this), left); - - L.DomEvent.stop(e); - }, - - _performZoom: function () { - var map = this._map, - zoom = map.getZoom(), - snap = this._map.options.zoomSnap || 0; - - map._stop(); // stop panning and fly animations if any - - // map the delta with a sigmoid function to -4..4 range leaning on -1..1 - var d2 = this._delta / (this._map.options.wheelPxPerZoomLevel * 4), - d3 = 4 * Math.log(2 / (1 + Math.exp(-Math.abs(d2)))) / Math.LN2, - d4 = snap ? Math.ceil(d3 / snap) * snap : d3, - delta = map._limitZoom(zoom + (this._delta > 0 ? d4 : -d4)) - zoom; - - this._delta = 0; - this._startTime = null; - - if (!delta) { return; } - - if (map.options.scrollWheelZoom === 'center') { - map.setZoom(zoom + delta); - } else { - map.setZoomAround(this._lastMousePos, zoom + delta); - } - } -}); - -// @section Handlers -// @property scrollWheelZoom: Handler -// Scroll wheel zoom handler. -L.Map.addInitHook('addHandler', 'scrollWheelZoom', L.Map.ScrollWheelZoom); - - - + + + +/* + L.Handler is a base class for handler classes that are used internally to inject + interaction features like dragging to classes like Map and Marker. +*/ + +// @class Handler +// @aka L.Handler +// Abstract class for map interaction handlers + +L.Handler = L.Class.extend({ + initialize: function (map) { + this._map = map; + }, + + // @method enable(): this + // Enables the handler + enable: function () { + if (this._enabled) { return this; } + + this._enabled = true; + this.addHooks(); + return this; + }, + + // @method disable(): this + // Disables the handler + disable: function () { + if (!this._enabled) { return this; } + + this._enabled = false; + this.removeHooks(); + return this; + }, + + // @method enabled(): Boolean + // Returns `true` if the handler is enabled + enabled: function () { + return !!this._enabled; + } + + // @section Extension methods + // Classes inheriting from `Handler` must implement the two following methods: + // @method addHooks() + // Called when the handler is enabled, should add event hooks. + // @method removeHooks() + // Called when the handler is disabled, should remove the event hooks added previously. +}); + + + +/* + * L.Handler.MapDrag is used to make the map draggable (with panning inertia), enabled by default. + */ + +// @namespace Map +// @section Interaction Options +L.Map.mergeOptions({ + // @option dragging: Boolean = true + // Whether the map be draggable with mouse/touch or not. + dragging: true, + + // @section Panning Inertia Options + // @option inertia: Boolean = * + // If enabled, 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. Enabled by default unless running on old Android devices. + inertia: !L.Browser.android23, + + // @option inertiaDeceleration: Number = 3000 + // The rate with which the inertial movement slows down, in pixels/second². + inertiaDeceleration: 3400, // px/s^2 + + // @option inertiaMaxSpeed: Number = Infinity + // Max speed of the inertial movement, in pixels/second. + inertiaMaxSpeed: Infinity, // px/s + + // @option easeLinearity: Number = 0.2 + easeLinearity: 0.2, + + // TODO refactor, move to CRS + // @option worldCopyJump: Boolean = false + // With this option enabled, 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. + worldCopyJump: false, + + // @option maxBoundsViscosity: Number = 0.0 + // If `maxBounds` is set, this option will control how solid the bounds + // are when dragging the map around. The default value of `0.0` allows the + // user to drag outside the bounds at normal speed, higher values will + // slow down map dragging outside bounds, and `1.0` makes the bounds fully + // solid, preventing the user from dragging outside the bounds. + maxBoundsViscosity: 0.0 +}); + +L.Map.Drag = L.Handler.extend({ + addHooks: function () { + if (!this._draggable) { + var map = this._map; + + this._draggable = new L.Draggable(map._mapPane, map._container); + + this._draggable.on({ + down: this._onDown, + dragstart: this._onDragStart, + drag: this._onDrag, + dragend: this._onDragEnd + }, this); + + this._draggable.on('predrag', this._onPreDragLimit, this); + if (map.options.worldCopyJump) { + this._draggable.on('predrag', this._onPreDragWrap, this); + map.on('zoomend', this._onZoomEnd, this); + + map.whenReady(this._onZoomEnd, this); + } + } + L.DomUtil.addClass(this._map._container, 'leaflet-grab leaflet-touch-drag'); + this._draggable.enable(); + this._positions = []; + this._times = []; + }, + + removeHooks: function () { + L.DomUtil.removeClass(this._map._container, 'leaflet-grab'); + L.DomUtil.removeClass(this._map._container, 'leaflet-touch-drag'); + this._draggable.disable(); + }, + + moved: function () { + return this._draggable && this._draggable._moved; + }, + + moving: function () { + return this._draggable && this._draggable._moving; + }, + + _onDown: function () { + this._map._stop(); + }, + + _onDragStart: function () { + var map = this._map; + + if (this._map.options.maxBounds && this._map.options.maxBoundsViscosity) { + var bounds = L.latLngBounds(this._map.options.maxBounds); + + this._offsetLimit = L.bounds( + this._map.latLngToContainerPoint(bounds.getNorthWest()).multiplyBy(-1), + this._map.latLngToContainerPoint(bounds.getSouthEast()).multiplyBy(-1) + .add(this._map.getSize())); + + this._viscosity = Math.min(1.0, Math.max(0.0, this._map.options.maxBoundsViscosity)); + } else { + this._offsetLimit = null; + } + + map + .fire('movestart') + .fire('dragstart'); + + if (map.options.inertia) { + this._positions = []; + this._times = []; + } + }, + + _onDrag: function (e) { + if (this._map.options.inertia) { + var time = this._lastTime = +new Date(), + pos = this._lastPos = this._draggable._absPos || this._draggable._newPos; + + this._positions.push(pos); + this._times.push(time); + + if (time - this._times[0] > 50) { + this._positions.shift(); + this._times.shift(); + } + } + + this._map + .fire('move', e) + .fire('drag', e); + }, + + _onZoomEnd: function () { + var pxCenter = this._map.getSize().divideBy(2), + pxWorldCenter = this._map.latLngToLayerPoint([0, 0]); + + this._initialWorldOffset = pxWorldCenter.subtract(pxCenter).x; + this._worldWidth = this._map.getPixelWorldBounds().getSize().x; + }, + + _viscousLimit: function (value, threshold) { + return value - (value - threshold) * this._viscosity; + }, + + _onPreDragLimit: function () { + if (!this._viscosity || !this._offsetLimit) { return; } + + var offset = this._draggable._newPos.subtract(this._draggable._startPos); + + var limit = this._offsetLimit; + if (offset.x < limit.min.x) { offset.x = this._viscousLimit(offset.x, limit.min.x); } + if (offset.y < limit.min.y) { offset.y = this._viscousLimit(offset.y, limit.min.y); } + if (offset.x > limit.max.x) { offset.x = this._viscousLimit(offset.x, limit.max.x); } + if (offset.y > limit.max.y) { offset.y = this._viscousLimit(offset.y, limit.max.y); } + + this._draggable._newPos = this._draggable._startPos.add(offset); + }, + + _onPreDragWrap: function () { + // TODO refactor to be able to adjust map pane position after zoom + var worldWidth = this._worldWidth, + halfWidth = Math.round(worldWidth / 2), + dx = this._initialWorldOffset, + x = this._draggable._newPos.x, + newX1 = (x - halfWidth + dx) % worldWidth + halfWidth - dx, + newX2 = (x + halfWidth + dx) % worldWidth - halfWidth - dx, + newX = Math.abs(newX1 + dx) < Math.abs(newX2 + dx) ? newX1 : newX2; + + this._draggable._absPos = this._draggable._newPos.clone(); + this._draggable._newPos.x = newX; + }, + + _onDragEnd: function (e) { + var map = this._map, + options = map.options, + + noInertia = !options.inertia || this._times.length < 2; + + map.fire('dragend', e); + + if (noInertia) { + map.fire('moveend'); + + } else { + + var direction = this._lastPos.subtract(this._positions[0]), + duration = (this._lastTime - this._times[0]) / 1000, + ease = options.easeLinearity, + + speedVector = direction.multiplyBy(ease / duration), + speed = speedVector.distanceTo([0, 0]), + + limitedSpeed = Math.min(options.inertiaMaxSpeed, speed), + limitedSpeedVector = speedVector.multiplyBy(limitedSpeed / speed), + + decelerationDuration = limitedSpeed / (options.inertiaDeceleration * ease), + offset = limitedSpeedVector.multiplyBy(-decelerationDuration / 2).round(); + + if (!offset.x && !offset.y) { + map.fire('moveend'); + + } else { + offset = map._limitOffset(offset, map.options.maxBounds); + + L.Util.requestAnimFrame(function () { + map.panBy(offset, { + duration: decelerationDuration, + easeLinearity: ease, + noMoveStart: true, + animate: true + }); + }); + } + } + } +}); + +// @section Handlers +// @property dragging: Handler +// Map dragging handler (by both mouse and touch). +L.Map.addInitHook('addHandler', 'dragging', L.Map.Drag); + + + +/* + * L.Handler.DoubleClickZoom is used to handle double-click zoom on the map, enabled by default. + */ + +// @namespace Map +// @section Interaction Options + +L.Map.mergeOptions({ + // @option doubleClickZoom: Boolean|String = true + // 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. + doubleClickZoom: true +}); + +L.Map.DoubleClickZoom = L.Handler.extend({ + addHooks: function () { + this._map.on('dblclick', this._onDoubleClick, this); + }, + + removeHooks: function () { + this._map.off('dblclick', this._onDoubleClick, this); + }, + + _onDoubleClick: function (e) { + var map = this._map, + oldZoom = map.getZoom(), + delta = map.options.zoomDelta, + zoom = e.originalEvent.shiftKey ? oldZoom - delta : oldZoom + delta; + + if (map.options.doubleClickZoom === 'center') { + map.setZoom(zoom); + } else { + map.setZoomAround(e.containerPoint, zoom); + } + } +}); + +// @section Handlers +// +// Map properties include interaction handlers that allow you to control +// interaction behavior in runtime, enabling or disabling certain features such +// as dragging or touch zoom (see `Handler` methods). For example: +// +// ```js +// map.doubleClickZoom.disable(); +// ``` +// +// @property doubleClickZoom: Handler +// Double click zoom handler. +L.Map.addInitHook('addHandler', 'doubleClickZoom', L.Map.DoubleClickZoom); + + + +/* + * L.Handler.ScrollWheelZoom is used by L.Map to enable mouse scroll wheel zoom on the map. + */ + +// @namespace Map +// @section Interaction Options +L.Map.mergeOptions({ + // @section Mousewheel options + // @option scrollWheelZoom: Boolean|String = true + // 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. + scrollWheelZoom: true, + + // @option wheelDebounceTime: Number = 40 + // Limits the rate at which a wheel can fire (in milliseconds). By default + // user can't zoom via wheel more often than once per 40 ms. + wheelDebounceTime: 40, + + // @option wheelPxPerZoomLevel: Number = 60 + // How many scroll pixels (as reported by [L.DomEvent.getWheelDelta](#domevent-getwheeldelta)) + // mean a change of one full zoom level. Smaller values will make wheel-zooming + // faster (and vice versa). + wheelPxPerZoomLevel: 60 +}); + +L.Map.ScrollWheelZoom = L.Handler.extend({ + addHooks: function () { + L.DomEvent.on(this._map._container, 'mousewheel', this._onWheelScroll, this); + + this._delta = 0; + }, + + removeHooks: function () { + L.DomEvent.off(this._map._container, 'mousewheel', this._onWheelScroll, this); + }, + + _onWheelScroll: function (e) { + var delta = L.DomEvent.getWheelDelta(e); + + var debounce = this._map.options.wheelDebounceTime; + + this._delta += delta; + this._lastMousePos = this._map.mouseEventToContainerPoint(e); + + if (!this._startTime) { + this._startTime = +new Date(); + } + + var left = Math.max(debounce - (+new Date() - this._startTime), 0); + + clearTimeout(this._timer); + this._timer = setTimeout(L.bind(this._performZoom, this), left); + + L.DomEvent.stop(e); + }, + + _performZoom: function () { + var map = this._map, + zoom = map.getZoom(), + snap = this._map.options.zoomSnap || 0; + + map._stop(); // stop panning and fly animations if any + + // map the delta with a sigmoid function to -4..4 range leaning on -1..1 + var d2 = this._delta / (this._map.options.wheelPxPerZoomLevel * 4), + d3 = 4 * Math.log(2 / (1 + Math.exp(-Math.abs(d2)))) / Math.LN2, + d4 = snap ? Math.ceil(d3 / snap) * snap : d3, + delta = map._limitZoom(zoom + (this._delta > 0 ? d4 : -d4)) - zoom; + + this._delta = 0; + this._startTime = null; + + if (!delta) { return; } + + if (map.options.scrollWheelZoom === 'center') { + map.setZoom(zoom + delta); + } else { + map.setZoomAround(this._lastMousePos, zoom + delta); + } + } +}); + +// @section Handlers +// @property scrollWheelZoom: Handler +// Scroll wheel zoom handler. +L.Map.addInitHook('addHandler', 'scrollWheelZoom', L.Map.ScrollWheelZoom); + + + /* * Extends the event handling code with double tap support for mobile browsers. */ @@ -10744,812 +10744,812 @@ L.extend(L.DomEvent, { return this; } }); - - - -/* - * Extends L.DomEvent to provide touch support for Internet Explorer and Windows-based devices. - */ - -L.extend(L.DomEvent, { - - POINTER_DOWN: L.Browser.msPointer ? 'MSPointerDown' : 'pointerdown', - POINTER_MOVE: L.Browser.msPointer ? 'MSPointerMove' : 'pointermove', - POINTER_UP: L.Browser.msPointer ? 'MSPointerUp' : 'pointerup', - POINTER_CANCEL: L.Browser.msPointer ? 'MSPointerCancel' : 'pointercancel', - TAG_WHITE_LIST: ['INPUT', 'SELECT', 'OPTION'], - - _pointers: {}, - _pointersCount: 0, - - // Provides a touch events wrapper for (ms)pointer events. - // ref http://www.w3.org/TR/pointerevents/ https://www.w3.org/Bugs/Public/show_bug.cgi?id=22890 - - addPointerListener: function (obj, type, handler, id) { - - if (type === 'touchstart') { - this._addPointerStart(obj, handler, id); - - } else if (type === 'touchmove') { - this._addPointerMove(obj, handler, id); - - } else if (type === 'touchend') { - this._addPointerEnd(obj, handler, id); - } - - return this; - }, - - removePointerListener: function (obj, type, id) { - var handler = obj['_leaflet_' + type + id]; - - if (type === 'touchstart') { - obj.removeEventListener(this.POINTER_DOWN, handler, false); - - } else if (type === 'touchmove') { - obj.removeEventListener(this.POINTER_MOVE, handler, false); - - } else if (type === 'touchend') { - obj.removeEventListener(this.POINTER_UP, handler, false); - obj.removeEventListener(this.POINTER_CANCEL, handler, false); - } - - return this; - }, - - _addPointerStart: function (obj, handler, id) { - var onDown = L.bind(function (e) { - if (e.pointerType !== 'mouse' && e.pointerType !== e.MSPOINTER_TYPE_MOUSE) { - // In IE11, some touch events needs to fire for form controls, or - // the controls will stop working. We keep a whitelist of tag names that - // need these events. For other target tags, we prevent default on the event. - if (this.TAG_WHITE_LIST.indexOf(e.target.tagName) < 0) { - L.DomEvent.preventDefault(e); - } else { - return; - } - } - - this._handlePointer(e, handler); - }, this); - - obj['_leaflet_touchstart' + id] = onDown; - obj.addEventListener(this.POINTER_DOWN, onDown, false); - - // need to keep track of what pointers and how many are active to provide e.touches emulation - if (!this._pointerDocListener) { - var pointerUp = L.bind(this._globalPointerUp, this); - - // we listen documentElement as any drags that end by moving the touch off the screen get fired there - document.documentElement.addEventListener(this.POINTER_DOWN, L.bind(this._globalPointerDown, this), true); - document.documentElement.addEventListener(this.POINTER_MOVE, L.bind(this._globalPointerMove, this), true); - document.documentElement.addEventListener(this.POINTER_UP, pointerUp, true); - document.documentElement.addEventListener(this.POINTER_CANCEL, pointerUp, true); - - this._pointerDocListener = true; - } - }, - - _globalPointerDown: function (e) { - this._pointers[e.pointerId] = e; - this._pointersCount++; - }, - - _globalPointerMove: function (e) { - if (this._pointers[e.pointerId]) { - this._pointers[e.pointerId] = e; - } - }, - - _globalPointerUp: function (e) { - delete this._pointers[e.pointerId]; - this._pointersCount--; - }, - - _handlePointer: function (e, handler) { - e.touches = []; - for (var i in this._pointers) { - e.touches.push(this._pointers[i]); - } - e.changedTouches = [e]; - - handler(e); - }, - - _addPointerMove: function (obj, handler, id) { - var onMove = L.bind(function (e) { - // don't fire touch moves when mouse isn't down - if ((e.pointerType === e.MSPOINTER_TYPE_MOUSE || e.pointerType === 'mouse') && e.buttons === 0) { return; } - - this._handlePointer(e, handler); - }, this); - - obj['_leaflet_touchmove' + id] = onMove; - obj.addEventListener(this.POINTER_MOVE, onMove, false); - }, - - _addPointerEnd: function (obj, handler, id) { - var onUp = L.bind(function (e) { - this._handlePointer(e, handler); - }, this); - - obj['_leaflet_touchend' + id] = onUp; - obj.addEventListener(this.POINTER_UP, onUp, false); - obj.addEventListener(this.POINTER_CANCEL, onUp, false); - } -}); - - - -/* - * L.Handler.TouchZoom is used by L.Map to add pinch zoom on supported mobile browsers. - */ - -// @namespace Map -// @section Interaction Options -L.Map.mergeOptions({ - // @section Touch interaction options - // @option touchZoom: Boolean|String = * - // Whether the map can be zoomed by touch-dragging with two fingers. If - // passed `'center'`, it will zoom to the center of the view regardless of - // where the touch events (fingers) were. Enabled for touch-capable web - // browsers except for old Androids. - touchZoom: L.Browser.touch && !L.Browser.android23, - - // @option bounceAtZoomLimits: Boolean = true - // Set it to false if you don't want the map to zoom beyond min/max zoom - // and then bounce back when pinch-zooming. - bounceAtZoomLimits: true -}); - -L.Map.TouchZoom = L.Handler.extend({ - addHooks: function () { - L.DomUtil.addClass(this._map._container, 'leaflet-touch-zoom'); - L.DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this); - }, - - removeHooks: function () { - L.DomUtil.removeClass(this._map._container, 'leaflet-touch-zoom'); - L.DomEvent.off(this._map._container, 'touchstart', this._onTouchStart, this); - }, - - _onTouchStart: function (e) { - var map = this._map; - if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming) { return; } - - var p1 = map.mouseEventToContainerPoint(e.touches[0]), - p2 = map.mouseEventToContainerPoint(e.touches[1]); - - this._centerPoint = map.getSize()._divideBy(2); - this._startLatLng = map.containerPointToLatLng(this._centerPoint); - if (map.options.touchZoom !== 'center') { - this._pinchStartLatLng = map.containerPointToLatLng(p1.add(p2)._divideBy(2)); - } - - this._startDist = p1.distanceTo(p2); - this._startZoom = map.getZoom(); - - this._moved = false; - this._zooming = true; - - map._stop(); - - L.DomEvent - .on(document, 'touchmove', this._onTouchMove, this) - .on(document, 'touchend', this._onTouchEnd, this); - - L.DomEvent.preventDefault(e); - }, - - _onTouchMove: function (e) { - if (!e.touches || e.touches.length !== 2 || !this._zooming) { return; } - - var map = this._map, - p1 = map.mouseEventToContainerPoint(e.touches[0]), - p2 = map.mouseEventToContainerPoint(e.touches[1]), - scale = p1.distanceTo(p2) / this._startDist; - - - this._zoom = map.getScaleZoom(scale, this._startZoom); - - if (!map.options.bounceAtZoomLimits && ( - (this._zoom < map.getMinZoom() && scale < 1) || - (this._zoom > map.getMaxZoom() && scale > 1))) { - this._zoom = map._limitZoom(this._zoom); - } - - if (map.options.touchZoom === 'center') { - this._center = this._startLatLng; - if (scale === 1) { return; } - } else { - // Get delta from pinch to center, so centerLatLng is delta applied to initial pinchLatLng - var delta = p1._add(p2)._divideBy(2)._subtract(this._centerPoint); - if (scale === 1 && delta.x === 0 && delta.y === 0) { return; } - this._center = map.unproject(map.project(this._pinchStartLatLng, this._zoom).subtract(delta), this._zoom); - } - - if (!this._moved) { - map._moveStart(true); - this._moved = true; - } - - L.Util.cancelAnimFrame(this._animRequest); - - var moveFn = L.bind(map._move, map, this._center, this._zoom, {pinch: true, round: false}); - this._animRequest = L.Util.requestAnimFrame(moveFn, this, true); - - L.DomEvent.preventDefault(e); - }, - - _onTouchEnd: function () { - if (!this._moved || !this._zooming) { - this._zooming = false; - return; - } - - this._zooming = false; - L.Util.cancelAnimFrame(this._animRequest); - - L.DomEvent - .off(document, 'touchmove', this._onTouchMove) - .off(document, 'touchend', this._onTouchEnd); - - // Pinch updates GridLayers' levels only when zoomSnap is off, so zoomSnap becomes noUpdate. - if (this._map.options.zoomAnimation) { - this._map._animateZoom(this._center, this._map._limitZoom(this._zoom), true, this._map.options.zoomSnap); - } else { - this._map._resetView(this._center, this._map._limitZoom(this._zoom)); - } - } -}); - -// @section Handlers -// @property touchZoom: Handler -// Touch zoom handler. -L.Map.addInitHook('addHandler', 'touchZoom', L.Map.TouchZoom); - - - -/* - * L.Map.Tap is used to enable mobile hacks like quick taps and long hold. - */ - -// @namespace Map -// @section Interaction Options -L.Map.mergeOptions({ - // @section Touch interaction options - // @option tap: Boolean = true - // Enables mobile hacks for supporting instant taps (fixing 200ms click - // delay on iOS/Android) and touch holds (fired as `contextmenu` events). - tap: true, - - // @option tapTolerance: Number = 15 - // The max number of pixels a user can shift his finger during touch - // for it to be considered a valid tap. - tapTolerance: 15 -}); - -L.Map.Tap = L.Handler.extend({ - addHooks: function () { - L.DomEvent.on(this._map._container, 'touchstart', this._onDown, this); - }, - - removeHooks: function () { - L.DomEvent.off(this._map._container, 'touchstart', this._onDown, this); - }, - - _onDown: function (e) { - if (!e.touches) { return; } - - L.DomEvent.preventDefault(e); - - this._fireClick = true; - - // don't simulate click or track longpress if more than 1 touch - if (e.touches.length > 1) { - this._fireClick = false; - clearTimeout(this._holdTimeout); - return; - } - - var first = e.touches[0], - el = first.target; - - this._startPos = this._newPos = new L.Point(first.clientX, first.clientY); - - // if touching a link, highlight it - if (el.tagName && el.tagName.toLowerCase() === 'a') { - L.DomUtil.addClass(el, 'leaflet-active'); - } - - // simulate long hold but setting a timeout - this._holdTimeout = setTimeout(L.bind(function () { - if (this._isTapValid()) { - this._fireClick = false; - this._onUp(); - this._simulateEvent('contextmenu', first); - } - }, this), 1000); - - this._simulateEvent('mousedown', first); - - L.DomEvent.on(document, { - touchmove: this._onMove, - touchend: this._onUp - }, this); - }, - - _onUp: function (e) { - clearTimeout(this._holdTimeout); - - L.DomEvent.off(document, { - touchmove: this._onMove, - touchend: this._onUp - }, this); - - if (this._fireClick && e && e.changedTouches) { - - var first = e.changedTouches[0], - el = first.target; - - if (el && el.tagName && el.tagName.toLowerCase() === 'a') { - L.DomUtil.removeClass(el, 'leaflet-active'); - } - - this._simulateEvent('mouseup', first); - - // simulate click if the touch didn't move too much - if (this._isTapValid()) { - this._simulateEvent('click', first); - } - } - }, - - _isTapValid: function () { - return this._newPos.distanceTo(this._startPos) <= this._map.options.tapTolerance; - }, - - _onMove: function (e) { - var first = e.touches[0]; - this._newPos = new L.Point(first.clientX, first.clientY); - this._simulateEvent('mousemove', first); - }, - - _simulateEvent: function (type, e) { - var simulatedEvent = document.createEvent('MouseEvents'); - - simulatedEvent._simulated = true; - e.target._simulatedClick = true; - - simulatedEvent.initMouseEvent( - type, true, true, window, 1, - e.screenX, e.screenY, - e.clientX, e.clientY, - false, false, false, false, 0, null); - - e.target.dispatchEvent(simulatedEvent); - } -}); - -// @section Handlers -// @property tap: Handler -// Mobile touch hacks (quick tap and touch hold) handler. -if (L.Browser.touch && !L.Browser.pointer) { - L.Map.addInitHook('addHandler', 'tap', L.Map.Tap); -} - - - -/* - * L.Handler.BoxZoom is used to add shift-drag zoom interaction to the map - * (zoom to a selected bounding box), enabled by default. - */ - -// @namespace Map -// @section Interaction Options -L.Map.mergeOptions({ - // @option boxZoom: Boolean = true - // Whether the map can be zoomed to a rectangular area specified by - // dragging the mouse while pressing the shift key. - boxZoom: true -}); - -L.Map.BoxZoom = L.Handler.extend({ - initialize: function (map) { - this._map = map; - this._container = map._container; - this._pane = map._panes.overlayPane; - }, - - addHooks: function () { - L.DomEvent.on(this._container, 'mousedown', this._onMouseDown, this); - }, - - removeHooks: function () { - L.DomEvent.off(this._container, 'mousedown', this._onMouseDown, this); - }, - - moved: function () { - return this._moved; - }, - - _resetState: function () { - this._moved = false; - }, - - _onMouseDown: function (e) { - if (!e.shiftKey || ((e.which !== 1) && (e.button !== 1))) { return false; } - - this._resetState(); - - L.DomUtil.disableTextSelection(); - L.DomUtil.disableImageDrag(); - - this._startPoint = this._map.mouseEventToContainerPoint(e); - - L.DomEvent.on(document, { - contextmenu: L.DomEvent.stop, - mousemove: this._onMouseMove, - mouseup: this._onMouseUp, - keydown: this._onKeyDown - }, this); - }, - - _onMouseMove: function (e) { - if (!this._moved) { - this._moved = true; - - this._box = L.DomUtil.create('div', 'leaflet-zoom-box', this._container); - L.DomUtil.addClass(this._container, 'leaflet-crosshair'); - - this._map.fire('boxzoomstart'); - } - - this._point = this._map.mouseEventToContainerPoint(e); - - var bounds = new L.Bounds(this._point, this._startPoint), - size = bounds.getSize(); - - L.DomUtil.setPosition(this._box, bounds.min); - - this._box.style.width = size.x + 'px'; - this._box.style.height = size.y + 'px'; - }, - - _finish: function () { - if (this._moved) { - L.DomUtil.remove(this._box); - L.DomUtil.removeClass(this._container, 'leaflet-crosshair'); - } - - L.DomUtil.enableTextSelection(); - L.DomUtil.enableImageDrag(); - - L.DomEvent.off(document, { - contextmenu: L.DomEvent.stop, - mousemove: this._onMouseMove, - mouseup: this._onMouseUp, - keydown: this._onKeyDown - }, this); - }, - - _onMouseUp: function (e) { - if ((e.which !== 1) && (e.button !== 1)) { return; } - - this._finish(); - - if (!this._moved) { return; } - // Postpone to next JS tick so internal click event handling - // still see it as "moved". - setTimeout(L.bind(this._resetState, this), 0); - - var bounds = new L.LatLngBounds( - this._map.containerPointToLatLng(this._startPoint), - this._map.containerPointToLatLng(this._point)); - - this._map - .fitBounds(bounds) - .fire('boxzoomend', {boxZoomBounds: bounds}); - }, - - _onKeyDown: function (e) { - if (e.keyCode === 27) { - this._finish(); - } - } -}); - -// @section Handlers -// @property boxZoom: Handler -// Box (shift-drag with mouse) zoom handler. -L.Map.addInitHook('addHandler', 'boxZoom', L.Map.BoxZoom); - - - -/* - * L.Map.Keyboard is handling keyboard interaction with the map, enabled by default. - */ - -// @namespace Map -// @section Keyboard Navigation Options -L.Map.mergeOptions({ - // @option keyboard: Boolean = true - // Makes the map focusable and allows users to navigate the map with keyboard - // arrows and `+`/`-` keys. - keyboard: true, - - // @option keyboardPanDelta: Number = 80 - // Amount of pixels to pan when pressing an arrow key. - keyboardPanDelta: 80 -}); - -L.Map.Keyboard = L.Handler.extend({ - - keyCodes: { - left: [37], - right: [39], - down: [40], - up: [38], - zoomIn: [187, 107, 61, 171], - zoomOut: [189, 109, 54, 173] - }, - - initialize: function (map) { - this._map = map; - - this._setPanDelta(map.options.keyboardPanDelta); - this._setZoomDelta(map.options.zoomDelta); - }, - - addHooks: function () { - var container = this._map._container; - - // make the container focusable by tabbing - if (container.tabIndex <= 0) { - container.tabIndex = '0'; - } - - L.DomEvent.on(container, { - focus: this._onFocus, - blur: this._onBlur, - mousedown: this._onMouseDown - }, this); - - this._map.on({ - focus: this._addHooks, - blur: this._removeHooks - }, this); - }, - - removeHooks: function () { - this._removeHooks(); - - L.DomEvent.off(this._map._container, { - focus: this._onFocus, - blur: this._onBlur, - mousedown: this._onMouseDown - }, this); - - this._map.off({ - focus: this._addHooks, - blur: this._removeHooks - }, this); - }, - - _onMouseDown: function () { - if (this._focused) { return; } - - var body = document.body, - docEl = document.documentElement, - top = body.scrollTop || docEl.scrollTop, - left = body.scrollLeft || docEl.scrollLeft; - - this._map._container.focus(); - - window.scrollTo(left, top); - }, - - _onFocus: function () { - this._focused = true; - this._map.fire('focus'); - }, - - _onBlur: function () { - this._focused = false; - this._map.fire('blur'); - }, - - _setPanDelta: function (panDelta) { - var keys = this._panKeys = {}, - codes = this.keyCodes, - i, len; - - for (i = 0, len = codes.left.length; i < len; i++) { - keys[codes.left[i]] = [-1 * panDelta, 0]; - } - for (i = 0, len = codes.right.length; i < len; i++) { - keys[codes.right[i]] = [panDelta, 0]; - } - for (i = 0, len = codes.down.length; i < len; i++) { - keys[codes.down[i]] = [0, panDelta]; - } - for (i = 0, len = codes.up.length; i < len; i++) { - keys[codes.up[i]] = [0, -1 * panDelta]; - } - }, - - _setZoomDelta: function (zoomDelta) { - var keys = this._zoomKeys = {}, - codes = this.keyCodes, - i, len; - - for (i = 0, len = codes.zoomIn.length; i < len; i++) { - keys[codes.zoomIn[i]] = zoomDelta; - } - for (i = 0, len = codes.zoomOut.length; i < len; i++) { - keys[codes.zoomOut[i]] = -zoomDelta; - } - }, - - _addHooks: function () { - L.DomEvent.on(document, 'keydown', this._onKeyDown, this); - }, - - _removeHooks: function () { - L.DomEvent.off(document, 'keydown', this._onKeyDown, this); - }, - - _onKeyDown: function (e) { - if (e.altKey || e.ctrlKey || e.metaKey) { return; } - - var key = e.keyCode, - map = this._map, - offset; - - if (key in this._panKeys) { - - if (map._panAnim && map._panAnim._inProgress) { return; } - - offset = this._panKeys[key]; - if (e.shiftKey) { - offset = L.point(offset).multiplyBy(3); - } - - map.panBy(offset); - - if (map.options.maxBounds) { - map.panInsideBounds(map.options.maxBounds); - } - - } else if (key in this._zoomKeys) { - map.setZoom(map.getZoom() + (e.shiftKey ? 3 : 1) * this._zoomKeys[key]); - - } else if (key === 27) { - map.closePopup(); - - } else { - return; - } - - L.DomEvent.stop(e); - } -}); - -// @section Handlers -// @section Handlers -// @property keyboard: Handler -// Keyboard navigation handler. -L.Map.addInitHook('addHandler', 'keyboard', L.Map.Keyboard); - - - -/* - * L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable. - */ - - -/* @namespace Marker - * @section Interaction handlers - * - * Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see `Handler` methods). Example: - * - * ```js - * marker.dragging.disable(); - * ``` - * - * @property dragging: Handler - * Marker dragging handler (by both mouse and touch). - */ - -L.Handler.MarkerDrag = L.Handler.extend({ - initialize: function (marker) { - this._marker = marker; - }, - - addHooks: function () { - var icon = this._marker._icon; - - if (!this._draggable) { - this._draggable = new L.Draggable(icon, icon, true); - } - - this._draggable.on({ - dragstart: this._onDragStart, - drag: this._onDrag, - dragend: this._onDragEnd - }, this).enable(); - - L.DomUtil.addClass(icon, 'leaflet-marker-draggable'); - }, - - removeHooks: function () { - this._draggable.off({ - dragstart: this._onDragStart, - drag: this._onDrag, - dragend: this._onDragEnd - }, this).disable(); - - if (this._marker._icon) { - L.DomUtil.removeClass(this._marker._icon, 'leaflet-marker-draggable'); - } - }, - - moved: function () { - return this._draggable && this._draggable._moved; - }, - - _onDragStart: function () { - // @section Dragging events - // @event dragstart: Event - // Fired when the user starts dragging the marker. - - // @event movestart: Event - // Fired when the marker starts moving (because of dragging). - - this._oldLatLng = this._marker.getLatLng(); - this._marker - .closePopup() - .fire('movestart') - .fire('dragstart'); - }, - - _onDrag: function (e) { - var marker = this._marker, - shadow = marker._shadow, - iconPos = L.DomUtil.getPosition(marker._icon), - latlng = marker._map.layerPointToLatLng(iconPos); - - // update shadow position - if (shadow) { - L.DomUtil.setPosition(shadow, iconPos); - } - - marker._latlng = latlng; - e.latlng = latlng; - e.oldLatLng = this._oldLatLng; - - // @event drag: Event - // Fired repeatedly while the user drags the marker. - marker - .fire('move', e) - .fire('drag', e); - }, - - _onDragEnd: function (e) { - // @event dragend: DragEndEvent - // Fired when the user stops dragging the marker. - - // @event moveend: Event - // Fired when the marker stops moving (because of dragging). - delete this._oldLatLng; - this._marker - .fire('moveend') - .fire('dragend', e); - } -}); - - - + + + +/* + * Extends L.DomEvent to provide touch support for Internet Explorer and Windows-based devices. + */ + +L.extend(L.DomEvent, { + + POINTER_DOWN: L.Browser.msPointer ? 'MSPointerDown' : 'pointerdown', + POINTER_MOVE: L.Browser.msPointer ? 'MSPointerMove' : 'pointermove', + POINTER_UP: L.Browser.msPointer ? 'MSPointerUp' : 'pointerup', + POINTER_CANCEL: L.Browser.msPointer ? 'MSPointerCancel' : 'pointercancel', + TAG_WHITE_LIST: ['INPUT', 'SELECT', 'OPTION'], + + _pointers: {}, + _pointersCount: 0, + + // Provides a touch events wrapper for (ms)pointer events. + // ref http://www.w3.org/TR/pointerevents/ https://www.w3.org/Bugs/Public/show_bug.cgi?id=22890 + + addPointerListener: function (obj, type, handler, id) { + + if (type === 'touchstart') { + this._addPointerStart(obj, handler, id); + + } else if (type === 'touchmove') { + this._addPointerMove(obj, handler, id); + + } else if (type === 'touchend') { + this._addPointerEnd(obj, handler, id); + } + + return this; + }, + + removePointerListener: function (obj, type, id) { + var handler = obj['_leaflet_' + type + id]; + + if (type === 'touchstart') { + obj.removeEventListener(this.POINTER_DOWN, handler, false); + + } else if (type === 'touchmove') { + obj.removeEventListener(this.POINTER_MOVE, handler, false); + + } else if (type === 'touchend') { + obj.removeEventListener(this.POINTER_UP, handler, false); + obj.removeEventListener(this.POINTER_CANCEL, handler, false); + } + + return this; + }, + + _addPointerStart: function (obj, handler, id) { + var onDown = L.bind(function (e) { + if (e.pointerType !== 'mouse' && e.pointerType !== e.MSPOINTER_TYPE_MOUSE) { + // In IE11, some touch events needs to fire for form controls, or + // the controls will stop working. We keep a whitelist of tag names that + // need these events. For other target tags, we prevent default on the event. + if (this.TAG_WHITE_LIST.indexOf(e.target.tagName) < 0) { + L.DomEvent.preventDefault(e); + } else { + return; + } + } + + this._handlePointer(e, handler); + }, this); + + obj['_leaflet_touchstart' + id] = onDown; + obj.addEventListener(this.POINTER_DOWN, onDown, false); + + // need to keep track of what pointers and how many are active to provide e.touches emulation + if (!this._pointerDocListener) { + var pointerUp = L.bind(this._globalPointerUp, this); + + // we listen documentElement as any drags that end by moving the touch off the screen get fired there + document.documentElement.addEventListener(this.POINTER_DOWN, L.bind(this._globalPointerDown, this), true); + document.documentElement.addEventListener(this.POINTER_MOVE, L.bind(this._globalPointerMove, this), true); + document.documentElement.addEventListener(this.POINTER_UP, pointerUp, true); + document.documentElement.addEventListener(this.POINTER_CANCEL, pointerUp, true); + + this._pointerDocListener = true; + } + }, + + _globalPointerDown: function (e) { + this._pointers[e.pointerId] = e; + this._pointersCount++; + }, + + _globalPointerMove: function (e) { + if (this._pointers[e.pointerId]) { + this._pointers[e.pointerId] = e; + } + }, + + _globalPointerUp: function (e) { + delete this._pointers[e.pointerId]; + this._pointersCount--; + }, + + _handlePointer: function (e, handler) { + e.touches = []; + for (var i in this._pointers) { + e.touches.push(this._pointers[i]); + } + e.changedTouches = [e]; + + handler(e); + }, + + _addPointerMove: function (obj, handler, id) { + var onMove = L.bind(function (e) { + // don't fire touch moves when mouse isn't down + if ((e.pointerType === e.MSPOINTER_TYPE_MOUSE || e.pointerType === 'mouse') && e.buttons === 0) { return; } + + this._handlePointer(e, handler); + }, this); + + obj['_leaflet_touchmove' + id] = onMove; + obj.addEventListener(this.POINTER_MOVE, onMove, false); + }, + + _addPointerEnd: function (obj, handler, id) { + var onUp = L.bind(function (e) { + this._handlePointer(e, handler); + }, this); + + obj['_leaflet_touchend' + id] = onUp; + obj.addEventListener(this.POINTER_UP, onUp, false); + obj.addEventListener(this.POINTER_CANCEL, onUp, false); + } +}); + + + +/* + * L.Handler.TouchZoom is used by L.Map to add pinch zoom on supported mobile browsers. + */ + +// @namespace Map +// @section Interaction Options +L.Map.mergeOptions({ + // @section Touch interaction options + // @option touchZoom: Boolean|String = * + // Whether the map can be zoomed by touch-dragging with two fingers. If + // passed `'center'`, it will zoom to the center of the view regardless of + // where the touch events (fingers) were. Enabled for touch-capable site + // browsers except for old Androids. + touchZoom: L.Browser.touch && !L.Browser.android23, + + // @option bounceAtZoomLimits: Boolean = true + // Set it to false if you don't want the map to zoom beyond min/max zoom + // and then bounce back when pinch-zooming. + bounceAtZoomLimits: true +}); + +L.Map.TouchZoom = L.Handler.extend({ + addHooks: function () { + L.DomUtil.addClass(this._map._container, 'leaflet-touch-zoom'); + L.DomEvent.on(this._map._container, 'touchstart', this._onTouchStart, this); + }, + + removeHooks: function () { + L.DomUtil.removeClass(this._map._container, 'leaflet-touch-zoom'); + L.DomEvent.off(this._map._container, 'touchstart', this._onTouchStart, this); + }, + + _onTouchStart: function (e) { + var map = this._map; + if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming) { return; } + + var p1 = map.mouseEventToContainerPoint(e.touches[0]), + p2 = map.mouseEventToContainerPoint(e.touches[1]); + + this._centerPoint = map.getSize()._divideBy(2); + this._startLatLng = map.containerPointToLatLng(this._centerPoint); + if (map.options.touchZoom !== 'center') { + this._pinchStartLatLng = map.containerPointToLatLng(p1.add(p2)._divideBy(2)); + } + + this._startDist = p1.distanceTo(p2); + this._startZoom = map.getZoom(); + + this._moved = false; + this._zooming = true; + + map._stop(); + + L.DomEvent + .on(document, 'touchmove', this._onTouchMove, this) + .on(document, 'touchend', this._onTouchEnd, this); + + L.DomEvent.preventDefault(e); + }, + + _onTouchMove: function (e) { + if (!e.touches || e.touches.length !== 2 || !this._zooming) { return; } + + var map = this._map, + p1 = map.mouseEventToContainerPoint(e.touches[0]), + p2 = map.mouseEventToContainerPoint(e.touches[1]), + scale = p1.distanceTo(p2) / this._startDist; + + + this._zoom = map.getScaleZoom(scale, this._startZoom); + + if (!map.options.bounceAtZoomLimits && ( + (this._zoom < map.getMinZoom() && scale < 1) || + (this._zoom > map.getMaxZoom() && scale > 1))) { + this._zoom = map._limitZoom(this._zoom); + } + + if (map.options.touchZoom === 'center') { + this._center = this._startLatLng; + if (scale === 1) { return; } + } else { + // Get delta from pinch to center, so centerLatLng is delta applied to initial pinchLatLng + var delta = p1._add(p2)._divideBy(2)._subtract(this._centerPoint); + if (scale === 1 && delta.x === 0 && delta.y === 0) { return; } + this._center = map.unproject(map.project(this._pinchStartLatLng, this._zoom).subtract(delta), this._zoom); + } + + if (!this._moved) { + map._moveStart(true); + this._moved = true; + } + + L.Util.cancelAnimFrame(this._animRequest); + + var moveFn = L.bind(map._move, map, this._center, this._zoom, {pinch: true, round: false}); + this._animRequest = L.Util.requestAnimFrame(moveFn, this, true); + + L.DomEvent.preventDefault(e); + }, + + _onTouchEnd: function () { + if (!this._moved || !this._zooming) { + this._zooming = false; + return; + } + + this._zooming = false; + L.Util.cancelAnimFrame(this._animRequest); + + L.DomEvent + .off(document, 'touchmove', this._onTouchMove) + .off(document, 'touchend', this._onTouchEnd); + + // Pinch updates GridLayers' levels only when zoomSnap is off, so zoomSnap becomes noUpdate. + if (this._map.options.zoomAnimation) { + this._map._animateZoom(this._center, this._map._limitZoom(this._zoom), true, this._map.options.zoomSnap); + } else { + this._map._resetView(this._center, this._map._limitZoom(this._zoom)); + } + } +}); + +// @section Handlers +// @property touchZoom: Handler +// Touch zoom handler. +L.Map.addInitHook('addHandler', 'touchZoom', L.Map.TouchZoom); + + + +/* + * L.Map.Tap is used to enable mobile hacks like quick taps and long hold. + */ + +// @namespace Map +// @section Interaction Options +L.Map.mergeOptions({ + // @section Touch interaction options + // @option tap: Boolean = true + // Enables mobile hacks for supporting instant taps (fixing 200ms click + // delay on iOS/Android) and touch holds (fired as `contextmenu` events). + tap: true, + + // @option tapTolerance: Number = 15 + // The max number of pixels a user can shift his finger during touch + // for it to be considered a valid tap. + tapTolerance: 15 +}); + +L.Map.Tap = L.Handler.extend({ + addHooks: function () { + L.DomEvent.on(this._map._container, 'touchstart', this._onDown, this); + }, + + removeHooks: function () { + L.DomEvent.off(this._map._container, 'touchstart', this._onDown, this); + }, + + _onDown: function (e) { + if (!e.touches) { return; } + + L.DomEvent.preventDefault(e); + + this._fireClick = true; + + // don't simulate click or track longpress if more than 1 touch + if (e.touches.length > 1) { + this._fireClick = false; + clearTimeout(this._holdTimeout); + return; + } + + var first = e.touches[0], + el = first.target; + + this._startPos = this._newPos = new L.Point(first.clientX, first.clientY); + + // if touching a link, highlight it + if (el.tagName && el.tagName.toLowerCase() === 'a') { + L.DomUtil.addClass(el, 'leaflet-active'); + } + + // simulate long hold but setting a timeout + this._holdTimeout = setTimeout(L.bind(function () { + if (this._isTapValid()) { + this._fireClick = false; + this._onUp(); + this._simulateEvent('contextmenu', first); + } + }, this), 1000); + + this._simulateEvent('mousedown', first); + + L.DomEvent.on(document, { + touchmove: this._onMove, + touchend: this._onUp + }, this); + }, + + _onUp: function (e) { + clearTimeout(this._holdTimeout); + + L.DomEvent.off(document, { + touchmove: this._onMove, + touchend: this._onUp + }, this); + + if (this._fireClick && e && e.changedTouches) { + + var first = e.changedTouches[0], + el = first.target; + + if (el && el.tagName && el.tagName.toLowerCase() === 'a') { + L.DomUtil.removeClass(el, 'leaflet-active'); + } + + this._simulateEvent('mouseup', first); + + // simulate click if the touch didn't move too much + if (this._isTapValid()) { + this._simulateEvent('click', first); + } + } + }, + + _isTapValid: function () { + return this._newPos.distanceTo(this._startPos) <= this._map.options.tapTolerance; + }, + + _onMove: function (e) { + var first = e.touches[0]; + this._newPos = new L.Point(first.clientX, first.clientY); + this._simulateEvent('mousemove', first); + }, + + _simulateEvent: function (type, e) { + var simulatedEvent = document.createEvent('MouseEvents'); + + simulatedEvent._simulated = true; + e.target._simulatedClick = true; + + simulatedEvent.initMouseEvent( + type, true, true, window, 1, + e.screenX, e.screenY, + e.clientX, e.clientY, + false, false, false, false, 0, null); + + e.target.dispatchEvent(simulatedEvent); + } +}); + +// @section Handlers +// @property tap: Handler +// Mobile touch hacks (quick tap and touch hold) handler. +if (L.Browser.touch && !L.Browser.pointer) { + L.Map.addInitHook('addHandler', 'tap', L.Map.Tap); +} + + + +/* + * L.Handler.BoxZoom is used to add shift-drag zoom interaction to the map + * (zoom to a selected bounding box), enabled by default. + */ + +// @namespace Map +// @section Interaction Options +L.Map.mergeOptions({ + // @option boxZoom: Boolean = true + // Whether the map can be zoomed to a rectangular area specified by + // dragging the mouse while pressing the shift key. + boxZoom: true +}); + +L.Map.BoxZoom = L.Handler.extend({ + initialize: function (map) { + this._map = map; + this._container = map._container; + this._pane = map._panes.overlayPane; + }, + + addHooks: function () { + L.DomEvent.on(this._container, 'mousedown', this._onMouseDown, this); + }, + + removeHooks: function () { + L.DomEvent.off(this._container, 'mousedown', this._onMouseDown, this); + }, + + moved: function () { + return this._moved; + }, + + _resetState: function () { + this._moved = false; + }, + + _onMouseDown: function (e) { + if (!e.shiftKey || ((e.which !== 1) && (e.button !== 1))) { return false; } + + this._resetState(); + + L.DomUtil.disableTextSelection(); + L.DomUtil.disableImageDrag(); + + this._startPoint = this._map.mouseEventToContainerPoint(e); + + L.DomEvent.on(document, { + contextmenu: L.DomEvent.stop, + mousemove: this._onMouseMove, + mouseup: this._onMouseUp, + keydown: this._onKeyDown + }, this); + }, + + _onMouseMove: function (e) { + if (!this._moved) { + this._moved = true; + + this._box = L.DomUtil.create('div', 'leaflet-zoom-box', this._container); + L.DomUtil.addClass(this._container, 'leaflet-crosshair'); + + this._map.fire('boxzoomstart'); + } + + this._point = this._map.mouseEventToContainerPoint(e); + + var bounds = new L.Bounds(this._point, this._startPoint), + size = bounds.getSize(); + + L.DomUtil.setPosition(this._box, bounds.min); + + this._box.style.width = size.x + 'px'; + this._box.style.height = size.y + 'px'; + }, + + _finish: function () { + if (this._moved) { + L.DomUtil.remove(this._box); + L.DomUtil.removeClass(this._container, 'leaflet-crosshair'); + } + + L.DomUtil.enableTextSelection(); + L.DomUtil.enableImageDrag(); + + L.DomEvent.off(document, { + contextmenu: L.DomEvent.stop, + mousemove: this._onMouseMove, + mouseup: this._onMouseUp, + keydown: this._onKeyDown + }, this); + }, + + _onMouseUp: function (e) { + if ((e.which !== 1) && (e.button !== 1)) { return; } + + this._finish(); + + if (!this._moved) { return; } + // Postpone to next JS tick so internal click event handling + // still see it as "moved". + setTimeout(L.bind(this._resetState, this), 0); + + var bounds = new L.LatLngBounds( + this._map.containerPointToLatLng(this._startPoint), + this._map.containerPointToLatLng(this._point)); + + this._map + .fitBounds(bounds) + .fire('boxzoomend', {boxZoomBounds: bounds}); + }, + + _onKeyDown: function (e) { + if (e.keyCode === 27) { + this._finish(); + } + } +}); + +// @section Handlers +// @property boxZoom: Handler +// Box (shift-drag with mouse) zoom handler. +L.Map.addInitHook('addHandler', 'boxZoom', L.Map.BoxZoom); + + + +/* + * L.Map.Keyboard is handling keyboard interaction with the map, enabled by default. + */ + +// @namespace Map +// @section Keyboard Navigation Options +L.Map.mergeOptions({ + // @option keyboard: Boolean = true + // Makes the map focusable and allows users to navigate the map with keyboard + // arrows and `+`/`-` keys. + keyboard: true, + + // @option keyboardPanDelta: Number = 80 + // Amount of pixels to pan when pressing an arrow key. + keyboardPanDelta: 80 +}); + +L.Map.Keyboard = L.Handler.extend({ + + keyCodes: { + left: [37], + right: [39], + down: [40], + up: [38], + zoomIn: [187, 107, 61, 171], + zoomOut: [189, 109, 54, 173] + }, + + initialize: function (map) { + this._map = map; + + this._setPanDelta(map.options.keyboardPanDelta); + this._setZoomDelta(map.options.zoomDelta); + }, + + addHooks: function () { + var container = this._map._container; + + // make the container focusable by tabbing + if (container.tabIndex <= 0) { + container.tabIndex = '0'; + } + + L.DomEvent.on(container, { + focus: this._onFocus, + blur: this._onBlur, + mousedown: this._onMouseDown + }, this); + + this._map.on({ + focus: this._addHooks, + blur: this._removeHooks + }, this); + }, + + removeHooks: function () { + this._removeHooks(); + + L.DomEvent.off(this._map._container, { + focus: this._onFocus, + blur: this._onBlur, + mousedown: this._onMouseDown + }, this); + + this._map.off({ + focus: this._addHooks, + blur: this._removeHooks + }, this); + }, + + _onMouseDown: function () { + if (this._focused) { return; } + + var body = document.body, + docEl = document.documentElement, + top = body.scrollTop || docEl.scrollTop, + left = body.scrollLeft || docEl.scrollLeft; + + this._map._container.focus(); + + window.scrollTo(left, top); + }, + + _onFocus: function () { + this._focused = true; + this._map.fire('focus'); + }, + + _onBlur: function () { + this._focused = false; + this._map.fire('blur'); + }, + + _setPanDelta: function (panDelta) { + var keys = this._panKeys = {}, + codes = this.keyCodes, + i, len; + + for (i = 0, len = codes.left.length; i < len; i++) { + keys[codes.left[i]] = [-1 * panDelta, 0]; + } + for (i = 0, len = codes.right.length; i < len; i++) { + keys[codes.right[i]] = [panDelta, 0]; + } + for (i = 0, len = codes.down.length; i < len; i++) { + keys[codes.down[i]] = [0, panDelta]; + } + for (i = 0, len = codes.up.length; i < len; i++) { + keys[codes.up[i]] = [0, -1 * panDelta]; + } + }, + + _setZoomDelta: function (zoomDelta) { + var keys = this._zoomKeys = {}, + codes = this.keyCodes, + i, len; + + for (i = 0, len = codes.zoomIn.length; i < len; i++) { + keys[codes.zoomIn[i]] = zoomDelta; + } + for (i = 0, len = codes.zoomOut.length; i < len; i++) { + keys[codes.zoomOut[i]] = -zoomDelta; + } + }, + + _addHooks: function () { + L.DomEvent.on(document, 'keydown', this._onKeyDown, this); + }, + + _removeHooks: function () { + L.DomEvent.off(document, 'keydown', this._onKeyDown, this); + }, + + _onKeyDown: function (e) { + if (e.altKey || e.ctrlKey || e.metaKey) { return; } + + var key = e.keyCode, + map = this._map, + offset; + + if (key in this._panKeys) { + + if (map._panAnim && map._panAnim._inProgress) { return; } + + offset = this._panKeys[key]; + if (e.shiftKey) { + offset = L.point(offset).multiplyBy(3); + } + + map.panBy(offset); + + if (map.options.maxBounds) { + map.panInsideBounds(map.options.maxBounds); + } + + } else if (key in this._zoomKeys) { + map.setZoom(map.getZoom() + (e.shiftKey ? 3 : 1) * this._zoomKeys[key]); + + } else if (key === 27) { + map.closePopup(); + + } else { + return; + } + + L.DomEvent.stop(e); + } +}); + +// @section Handlers +// @section Handlers +// @property keyboard: Handler +// Keyboard navigation handler. +L.Map.addInitHook('addHandler', 'keyboard', L.Map.Keyboard); + + + +/* + * L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable. + */ + + +/* @namespace Marker + * @section Interaction handlers + * + * Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see `Handler` methods). Example: + * + * ```js + * marker.dragging.disable(); + * ``` + * + * @property dragging: Handler + * Marker dragging handler (by both mouse and touch). + */ + +L.Handler.MarkerDrag = L.Handler.extend({ + initialize: function (marker) { + this._marker = marker; + }, + + addHooks: function () { + var icon = this._marker._icon; + + if (!this._draggable) { + this._draggable = new L.Draggable(icon, icon, true); + } + + this._draggable.on({ + dragstart: this._onDragStart, + drag: this._onDrag, + dragend: this._onDragEnd + }, this).enable(); + + L.DomUtil.addClass(icon, 'leaflet-marker-draggable'); + }, + + removeHooks: function () { + this._draggable.off({ + dragstart: this._onDragStart, + drag: this._onDrag, + dragend: this._onDragEnd + }, this).disable(); + + if (this._marker._icon) { + L.DomUtil.removeClass(this._marker._icon, 'leaflet-marker-draggable'); + } + }, + + moved: function () { + return this._draggable && this._draggable._moved; + }, + + _onDragStart: function () { + // @section Dragging events + // @event dragstart: Event + // Fired when the user starts dragging the marker. + + // @event movestart: Event + // Fired when the marker starts moving (because of dragging). + + this._oldLatLng = this._marker.getLatLng(); + this._marker + .closePopup() + .fire('movestart') + .fire('dragstart'); + }, + + _onDrag: function (e) { + var marker = this._marker, + shadow = marker._shadow, + iconPos = L.DomUtil.getPosition(marker._icon), + latlng = marker._map.layerPointToLatLng(iconPos); + + // update shadow position + if (shadow) { + L.DomUtil.setPosition(shadow, iconPos); + } + + marker._latlng = latlng; + e.latlng = latlng; + e.oldLatLng = this._oldLatLng; + + // @event drag: Event + // Fired repeatedly while the user drags the marker. + marker + .fire('move', e) + .fire('drag', e); + }, + + _onDragEnd: function (e) { + // @event dragend: DragEndEvent + // Fired when the user stops dragging the marker. + + // @event moveend: Event + // Fired when the marker stops moving (because of dragging). + delete this._oldLatLng; + this._marker + .fire('moveend') + .fire('dragend', e); + } +}); + + + /* * @class Control * @aka L.Control @@ -11709,9 +11709,9 @@ L.Map.include({ L.DomUtil.remove(this._controlContainer); } }); - - - + + + /* * @class Control.Zoom * @aka L.Control.Zoom @@ -11839,9 +11839,9 @@ L.Map.addInitHook(function () { L.control.zoom = function (options) { return new L.Control.Zoom(options); }; - - - + + + /* * @class Control.Attribution * @aka L.Control.Attribution @@ -11966,140 +11966,140 @@ L.Map.addInitHook(function () { L.control.attribution = function (options) { return new L.Control.Attribution(options); }; - - - -/* - * @class Control.Scale - * @aka L.Control.Scale - * @inherits Control - * - * A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. Extends `Control`. - * - * @example - * - * ```js - * L.control.scale().addTo(map); - * ``` - */ - -L.Control.Scale = L.Control.extend({ - // @section - // @aka Control.Scale options - options: { - position: 'bottomleft', - - // @option maxWidth: Number = 100 - // Maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500). - maxWidth: 100, - - // @option metric: Boolean = True - // Whether to show the metric scale line (m/km). - metric: true, - - // @option imperial: Boolean = True - // Whether to show the imperial scale line (mi/ft). - imperial: true - - // @option updateWhenIdle: Boolean = false - // If `true`, the control is updated on [`moveend`](#map-moveend), otherwise it's always up-to-date (updated on [`move`](#map-move)). - }, - - onAdd: function (map) { - var className = 'leaflet-control-scale', - container = L.DomUtil.create('div', className), - options = this.options; - - this._addScales(options, className + '-line', container); - - map.on(options.updateWhenIdle ? 'moveend' : 'move', this._update, this); - map.whenReady(this._update, this); - - return container; - }, - - onRemove: function (map) { - map.off(this.options.updateWhenIdle ? 'moveend' : 'move', this._update, this); - }, - - _addScales: function (options, className, container) { - if (options.metric) { - this._mScale = L.DomUtil.create('div', className, container); - } - if (options.imperial) { - this._iScale = L.DomUtil.create('div', className, container); - } - }, - - _update: function () { - var map = this._map, - y = map.getSize().y / 2; - - var maxMeters = map.distance( - map.containerPointToLatLng([0, y]), - map.containerPointToLatLng([this.options.maxWidth, y])); - - this._updateScales(maxMeters); - }, - - _updateScales: function (maxMeters) { - if (this.options.metric && maxMeters) { - this._updateMetric(maxMeters); - } - if (this.options.imperial && maxMeters) { - this._updateImperial(maxMeters); - } - }, - - _updateMetric: function (maxMeters) { - var meters = this._getRoundNum(maxMeters), - label = meters < 1000 ? meters + ' m' : (meters / 1000) + ' km'; - - this._updateScale(this._mScale, label, meters / maxMeters); - }, - - _updateImperial: function (maxMeters) { - var maxFeet = maxMeters * 3.2808399, - maxMiles, miles, feet; - - if (maxFeet > 5280) { - maxMiles = maxFeet / 5280; - miles = this._getRoundNum(maxMiles); - this._updateScale(this._iScale, miles + ' mi', miles / maxMiles); - - } else { - feet = this._getRoundNum(maxFeet); - this._updateScale(this._iScale, feet + ' ft', feet / maxFeet); - } - }, - - _updateScale: function (scale, text, ratio) { - scale.style.width = Math.round(this.options.maxWidth * ratio) + 'px'; - scale.innerHTML = text; - }, - - _getRoundNum: function (num) { - var pow10 = Math.pow(10, (Math.floor(num) + '').length - 1), - d = num / pow10; - - d = d >= 10 ? 10 : - d >= 5 ? 5 : - d >= 3 ? 3 : - d >= 2 ? 2 : 1; - - return pow10 * d; - } -}); - - -// @factory L.control.scale(options?: Control.Scale options) -// Creates an scale control with the given options. -L.control.scale = function (options) { - return new L.Control.Scale(options); -}; - - - + + + +/* + * @class Control.Scale + * @aka L.Control.Scale + * @inherits Control + * + * A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. Extends `Control`. + * + * @example + * + * ```js + * L.control.scale().addTo(map); + * ``` + */ + +L.Control.Scale = L.Control.extend({ + // @section + // @aka Control.Scale options + options: { + position: 'bottomleft', + + // @option maxWidth: Number = 100 + // Maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500). + maxWidth: 100, + + // @option metric: Boolean = True + // Whether to show the metric scale line (m/km). + metric: true, + + // @option imperial: Boolean = True + // Whether to show the imperial scale line (mi/ft). + imperial: true + + // @option updateWhenIdle: Boolean = false + // If `true`, the control is updated on [`moveend`](#map-moveend), otherwise it's always up-to-date (updated on [`move`](#map-move)). + }, + + onAdd: function (map) { + var className = 'leaflet-control-scale', + container = L.DomUtil.create('div', className), + options = this.options; + + this._addScales(options, className + '-line', container); + + map.on(options.updateWhenIdle ? 'moveend' : 'move', this._update, this); + map.whenReady(this._update, this); + + return container; + }, + + onRemove: function (map) { + map.off(this.options.updateWhenIdle ? 'moveend' : 'move', this._update, this); + }, + + _addScales: function (options, className, container) { + if (options.metric) { + this._mScale = L.DomUtil.create('div', className, container); + } + if (options.imperial) { + this._iScale = L.DomUtil.create('div', className, container); + } + }, + + _update: function () { + var map = this._map, + y = map.getSize().y / 2; + + var maxMeters = map.distance( + map.containerPointToLatLng([0, y]), + map.containerPointToLatLng([this.options.maxWidth, y])); + + this._updateScales(maxMeters); + }, + + _updateScales: function (maxMeters) { + if (this.options.metric && maxMeters) { + this._updateMetric(maxMeters); + } + if (this.options.imperial && maxMeters) { + this._updateImperial(maxMeters); + } + }, + + _updateMetric: function (maxMeters) { + var meters = this._getRoundNum(maxMeters), + label = meters < 1000 ? meters + ' m' : (meters / 1000) + ' km'; + + this._updateScale(this._mScale, label, meters / maxMeters); + }, + + _updateImperial: function (maxMeters) { + var maxFeet = maxMeters * 3.2808399, + maxMiles, miles, feet; + + if (maxFeet > 5280) { + maxMiles = maxFeet / 5280; + miles = this._getRoundNum(maxMiles); + this._updateScale(this._iScale, miles + ' mi', miles / maxMiles); + + } else { + feet = this._getRoundNum(maxFeet); + this._updateScale(this._iScale, feet + ' ft', feet / maxFeet); + } + }, + + _updateScale: function (scale, text, ratio) { + scale.style.width = Math.round(this.options.maxWidth * ratio) + 'px'; + scale.innerHTML = text; + }, + + _getRoundNum: function (num) { + var pow10 = Math.pow(10, (Math.floor(num) + '').length - 1), + d = num / pow10; + + d = d >= 10 ? 10 : + d >= 5 ? 5 : + d >= 3 ? 3 : + d >= 2 ? 2 : 1; + + return pow10 * d; + } +}); + + +// @factory L.control.scale(options?: Control.Scale options) +// Creates an scale control with the given options. +L.control.scale = function (options) { + return new L.Control.Scale(options); +}; + + + /* * @class Control.Layers * @aka L.Control.Layers @@ -12484,447 +12484,447 @@ L.Control.Layers = L.Control.extend({ L.control.layers = function (baseLayers, overlays, options) { return new L.Control.Layers(baseLayers, overlays, options); }; - - - -/* - * @class PosAnimation - * @aka L.PosAnimation - * @inherits Evented - * Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9. - * - * @example - * ```js - * var fx = new L.PosAnimation(); - * fx.run(el, [300, 500], 0.5); - * ``` - * - * @constructor L.PosAnimation() - * Creates a `PosAnimation` object. - * - */ - -L.PosAnimation = L.Evented.extend({ - - // @method run(el: HTMLElement, newPos: Point, duration?: Number, easeLinearity?: Number) - // Run an animation of a given element to a new position, optionally setting - // duration in seconds (`0.25` by default) and easing linearity factor (3rd - // argument of the [cubic bezier curve](http://cubic-bezier.com/#0,0,.5,1), - // `0.5` by default). - run: function (el, newPos, duration, easeLinearity) { - this.stop(); - - this._el = el; - this._inProgress = true; - this._duration = duration || 0.25; - this._easeOutPower = 1 / Math.max(easeLinearity || 0.5, 0.2); - - this._startPos = L.DomUtil.getPosition(el); - this._offset = newPos.subtract(this._startPos); - this._startTime = +new Date(); - - // @event start: Event - // Fired when the animation starts - this.fire('start'); - - this._animate(); - }, - - // @method stop() - // Stops the animation (if currently running). - stop: function () { - if (!this._inProgress) { return; } - - this._step(true); - this._complete(); - }, - - _animate: function () { - // animation loop - this._animId = L.Util.requestAnimFrame(this._animate, this); - this._step(); - }, - - _step: function (round) { - var elapsed = (+new Date()) - this._startTime, - duration = this._duration * 1000; - - if (elapsed < duration) { - this._runFrame(this._easeOut(elapsed / duration), round); - } else { - this._runFrame(1); - this._complete(); - } - }, - - _runFrame: function (progress, round) { - var pos = this._startPos.add(this._offset.multiplyBy(progress)); - if (round) { - pos._round(); - } - L.DomUtil.setPosition(this._el, pos); - - // @event step: Event - // Fired continuously during the animation. - this.fire('step'); - }, - - _complete: function () { - L.Util.cancelAnimFrame(this._animId); - - this._inProgress = false; - // @event end: Event - // Fired when the animation ends. - this.fire('end'); - }, - - _easeOut: function (t) { - return 1 - Math.pow(1 - t, this._easeOutPower); - } -}); - - - -/* - * Extends L.Map to handle panning animations. - */ - -L.Map.include({ - - setView: function (center, zoom, options) { - - zoom = zoom === undefined ? this._zoom : this._limitZoom(zoom); - center = this._limitCenter(L.latLng(center), zoom, this.options.maxBounds); - options = options || {}; - - this._stop(); - - if (this._loaded && !options.reset && options !== true) { - - if (options.animate !== undefined) { - options.zoom = L.extend({animate: options.animate}, options.zoom); - options.pan = L.extend({animate: options.animate, duration: options.duration}, options.pan); - } - - // try animating pan or zoom - var moved = (this._zoom !== zoom) ? - this._tryAnimatedZoom && this._tryAnimatedZoom(center, zoom, options.zoom) : - this._tryAnimatedPan(center, options.pan); - - if (moved) { - // prevent resize handler call, the view will refresh after animation anyway - clearTimeout(this._sizeTimer); - return this; - } - } - - // animation didn't start, just reset the map view - this._resetView(center, zoom); - - return this; - }, - - panBy: function (offset, options) { - offset = L.point(offset).round(); - options = options || {}; - - if (!offset.x && !offset.y) { - return this.fire('moveend'); - } - // If we pan too far, Chrome gets issues with tiles - // and makes them disappear or appear in the wrong place (slightly offset) #2602 - if (options.animate !== true && !this.getSize().contains(offset)) { - this._resetView(this.unproject(this.project(this.getCenter()).add(offset)), this.getZoom()); - return this; - } - - if (!this._panAnim) { - this._panAnim = new L.PosAnimation(); - - this._panAnim.on({ - 'step': this._onPanTransitionStep, - 'end': this._onPanTransitionEnd - }, this); - } - - // don't fire movestart if animating inertia - if (!options.noMoveStart) { - this.fire('movestart'); - } - - // animate pan unless animate: false specified - if (options.animate !== false) { - L.DomUtil.addClass(this._mapPane, 'leaflet-pan-anim'); - - var newPos = this._getMapPanePos().subtract(offset).round(); - this._panAnim.run(this._mapPane, newPos, options.duration || 0.25, options.easeLinearity); - } else { - this._rawPanBy(offset); - this.fire('move').fire('moveend'); - } - - return this; - }, - - _onPanTransitionStep: function () { - this.fire('move'); - }, - - _onPanTransitionEnd: function () { - L.DomUtil.removeClass(this._mapPane, 'leaflet-pan-anim'); - this.fire('moveend'); - }, - - _tryAnimatedPan: function (center, options) { - // difference between the new and current centers in pixels - var offset = this._getCenterOffset(center)._floor(); - - // don't animate too far unless animate: true specified in options - if ((options && options.animate) !== true && !this.getSize().contains(offset)) { return false; } - - this.panBy(offset, options); - - return true; - } -}); - - - -/* - * Extends L.Map to handle zoom animations. - */ - -// @namespace Map -// @section Animation Options -L.Map.mergeOptions({ - // @option zoomAnimation: Boolean = true - // Whether the map zoom animation is enabled. By default it's enabled - // in all browsers that support CSS3 Transitions except Android. - zoomAnimation: true, - - // @option zoomAnimationThreshold: Number = 4 - // Won't animate zoom if the zoom difference exceeds this value. - zoomAnimationThreshold: 4 -}); - -var zoomAnimated = L.DomUtil.TRANSITION && L.Browser.any3d && !L.Browser.mobileOpera; - -if (zoomAnimated) { - - L.Map.addInitHook(function () { - // don't animate on browsers without hardware-accelerated transitions or old Android/Opera - this._zoomAnimated = this.options.zoomAnimation; - - // zoom transitions run with the same duration for all layers, so if one of transitionend events - // happens after starting zoom animation (propagating to the map pane), we know that it ended globally - if (this._zoomAnimated) { - - this._createAnimProxy(); - - L.DomEvent.on(this._proxy, L.DomUtil.TRANSITION_END, this._catchTransitionEnd, this); - } - }); -} - -L.Map.include(!zoomAnimated ? {} : { - - _createAnimProxy: function () { - - var proxy = this._proxy = L.DomUtil.create('div', 'leaflet-proxy leaflet-zoom-animated'); - this._panes.mapPane.appendChild(proxy); - - this.on('zoomanim', function (e) { - var prop = L.DomUtil.TRANSFORM, - transform = proxy.style[prop]; - - L.DomUtil.setTransform(proxy, this.project(e.center, e.zoom), this.getZoomScale(e.zoom, 1)); - - // workaround for case when transform is the same and so transitionend event is not fired - if (transform === proxy.style[prop] && this._animatingZoom) { - this._onZoomTransitionEnd(); - } - }, this); - - this.on('load moveend', function () { - var c = this.getCenter(), - z = this.getZoom(); - L.DomUtil.setTransform(proxy, this.project(c, z), this.getZoomScale(z, 1)); - }, this); - }, - - _catchTransitionEnd: function (e) { - if (this._animatingZoom && e.propertyName.indexOf('transform') >= 0) { - this._onZoomTransitionEnd(); - } - }, - - _nothingToAnimate: function () { - return !this._container.getElementsByClassName('leaflet-zoom-animated').length; - }, - - _tryAnimatedZoom: function (center, zoom, options) { - - if (this._animatingZoom) { return true; } - - options = options || {}; - - // don't animate if disabled, not supported or zoom difference is too large - if (!this._zoomAnimated || options.animate === false || this._nothingToAnimate() || - Math.abs(zoom - this._zoom) > this.options.zoomAnimationThreshold) { return false; } - - // offset is the pixel coords of the zoom origin relative to the current center - var scale = this.getZoomScale(zoom), - offset = this._getCenterOffset(center)._divideBy(1 - 1 / scale); - - // don't animate if the zoom origin isn't within one screen from the current center, unless forced - if (options.animate !== true && !this.getSize().contains(offset)) { return false; } - - L.Util.requestAnimFrame(function () { - this - ._moveStart(true) - ._animateZoom(center, zoom, true); - }, this); - - return true; - }, - - _animateZoom: function (center, zoom, startAnim, noUpdate) { - if (startAnim) { - this._animatingZoom = true; - - // remember what center/zoom to set after animation - this._animateToCenter = center; - this._animateToZoom = zoom; - - L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim'); - } - - // @event zoomanim: ZoomAnimEvent - // Fired on every frame of a zoom animation - this.fire('zoomanim', { - center: center, - zoom: zoom, - noUpdate: noUpdate - }); - - // Work around webkit not firing 'transitionend', see https://github.com/Leaflet/Leaflet/issues/3689, 2693 - setTimeout(L.bind(this._onZoomTransitionEnd, this), 250); - }, - - _onZoomTransitionEnd: function () { - if (!this._animatingZoom) { return; } - - L.DomUtil.removeClass(this._mapPane, 'leaflet-zoom-anim'); - - this._animatingZoom = false; - - this._move(this._animateToCenter, this._animateToZoom); - - // This anim frame should prevent an obscure iOS webkit tile loading race condition. - L.Util.requestAnimFrame(function () { - this._moveEnd(true); - }, this); - } -}); - - - -// @namespace Map -// @section Methods for modifying map state -L.Map.include({ - - // @method flyTo(latlng: LatLng, zoom?: Number, options?: Zoom/pan options): this - // Sets the view of the map (geographical center and zoom) performing a smooth - // pan-zoom animation. - flyTo: function (targetCenter, targetZoom, options) { - - options = options || {}; - if (options.animate === false || !L.Browser.any3d) { - return this.setView(targetCenter, targetZoom, options); - } - - this._stop(); - - var from = this.project(this.getCenter()), - to = this.project(targetCenter), - size = this.getSize(), - startZoom = this._zoom; - - targetCenter = L.latLng(targetCenter); - targetZoom = targetZoom === undefined ? startZoom : targetZoom; - - var w0 = Math.max(size.x, size.y), - w1 = w0 * this.getZoomScale(startZoom, targetZoom), - u1 = (to.distanceTo(from)) || 1, - rho = 1.42, - rho2 = rho * rho; - - function r(i) { - var s1 = i ? -1 : 1, - s2 = i ? w1 : w0, - t1 = w1 * w1 - w0 * w0 + s1 * rho2 * rho2 * u1 * u1, - b1 = 2 * s2 * rho2 * u1, - b = t1 / b1, - sq = Math.sqrt(b * b + 1) - b; - - // workaround for floating point precision bug when sq = 0, log = -Infinite, - // thus triggering an infinite loop in flyTo - var log = sq < 0.000000001 ? -18 : Math.log(sq); - - return log; - } - - function sinh(n) { return (Math.exp(n) - Math.exp(-n)) / 2; } - function cosh(n) { return (Math.exp(n) + Math.exp(-n)) / 2; } - function tanh(n) { return sinh(n) / cosh(n); } - - var r0 = r(0); - - function w(s) { return w0 * (cosh(r0) / cosh(r0 + rho * s)); } - function u(s) { return w0 * (cosh(r0) * tanh(r0 + rho * s) - sinh(r0)) / rho2; } - - function easeOut(t) { return 1 - Math.pow(1 - t, 1.5); } - - var start = Date.now(), - S = (r(1) - r0) / rho, - duration = options.duration ? 1000 * options.duration : 1000 * S * 0.8; - - function frame() { - var t = (Date.now() - start) / duration, - s = easeOut(t) * S; - - if (t <= 1) { - this._flyToFrame = L.Util.requestAnimFrame(frame, this); - - this._move( - this.unproject(from.add(to.subtract(from).multiplyBy(u(s) / u1)), startZoom), - this.getScaleZoom(w0 / w(s), startZoom), - {flyTo: true}); - - } else { - this - ._move(targetCenter, targetZoom) - ._moveEnd(true); - } - } - - this._moveStart(true); - - frame.call(this); - return this; - }, - - // @method flyToBounds(bounds: LatLngBounds, options?: fitBounds options): this - // Sets the view of the map with a smooth animation like [`flyTo`](#map-flyto), - // but takes a bounds parameter like [`fitBounds`](#map-fitbounds). - flyToBounds: function (bounds, options) { - var target = this._getBoundsCenterZoom(bounds, options); - return this.flyTo(target.center, target.zoom, options); - } -}); - - - + + + +/* + * @class PosAnimation + * @aka L.PosAnimation + * @inherits Evented + * Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9. + * + * @example + * ```js + * var fx = new L.PosAnimation(); + * fx.run(el, [300, 500], 0.5); + * ``` + * + * @constructor L.PosAnimation() + * Creates a `PosAnimation` object. + * + */ + +L.PosAnimation = L.Evented.extend({ + + // @method run(el: HTMLElement, newPos: Point, duration?: Number, easeLinearity?: Number) + // Run an animation of a given element to a new position, optionally setting + // duration in seconds (`0.25` by default) and easing linearity factor (3rd + // argument of the [cubic bezier curve](http://cubic-bezier.com/#0,0,.5,1), + // `0.5` by default). + run: function (el, newPos, duration, easeLinearity) { + this.stop(); + + this._el = el; + this._inProgress = true; + this._duration = duration || 0.25; + this._easeOutPower = 1 / Math.max(easeLinearity || 0.5, 0.2); + + this._startPos = L.DomUtil.getPosition(el); + this._offset = newPos.subtract(this._startPos); + this._startTime = +new Date(); + + // @event start: Event + // Fired when the animation starts + this.fire('start'); + + this._animate(); + }, + + // @method stop() + // Stops the animation (if currently running). + stop: function () { + if (!this._inProgress) { return; } + + this._step(true); + this._complete(); + }, + + _animate: function () { + // animation loop + this._animId = L.Util.requestAnimFrame(this._animate, this); + this._step(); + }, + + _step: function (round) { + var elapsed = (+new Date()) - this._startTime, + duration = this._duration * 1000; + + if (elapsed < duration) { + this._runFrame(this._easeOut(elapsed / duration), round); + } else { + this._runFrame(1); + this._complete(); + } + }, + + _runFrame: function (progress, round) { + var pos = this._startPos.add(this._offset.multiplyBy(progress)); + if (round) { + pos._round(); + } + L.DomUtil.setPosition(this._el, pos); + + // @event step: Event + // Fired continuously during the animation. + this.fire('step'); + }, + + _complete: function () { + L.Util.cancelAnimFrame(this._animId); + + this._inProgress = false; + // @event end: Event + // Fired when the animation ends. + this.fire('end'); + }, + + _easeOut: function (t) { + return 1 - Math.pow(1 - t, this._easeOutPower); + } +}); + + + +/* + * Extends L.Map to handle panning animations. + */ + +L.Map.include({ + + setView: function (center, zoom, options) { + + zoom = zoom === undefined ? this._zoom : this._limitZoom(zoom); + center = this._limitCenter(L.latLng(center), zoom, this.options.maxBounds); + options = options || {}; + + this._stop(); + + if (this._loaded && !options.reset && options !== true) { + + if (options.animate !== undefined) { + options.zoom = L.extend({animate: options.animate}, options.zoom); + options.pan = L.extend({animate: options.animate, duration: options.duration}, options.pan); + } + + // try animating pan or zoom + var moved = (this._zoom !== zoom) ? + this._tryAnimatedZoom && this._tryAnimatedZoom(center, zoom, options.zoom) : + this._tryAnimatedPan(center, options.pan); + + if (moved) { + // prevent resize handler call, the view will refresh after animation anyway + clearTimeout(this._sizeTimer); + return this; + } + } + + // animation didn't start, just reset the map view + this._resetView(center, zoom); + + return this; + }, + + panBy: function (offset, options) { + offset = L.point(offset).round(); + options = options || {}; + + if (!offset.x && !offset.y) { + return this.fire('moveend'); + } + // If we pan too far, Chrome gets issues with tiles + // and makes them disappear or appear in the wrong place (slightly offset) #2602 + if (options.animate !== true && !this.getSize().contains(offset)) { + this._resetView(this.unproject(this.project(this.getCenter()).add(offset)), this.getZoom()); + return this; + } + + if (!this._panAnim) { + this._panAnim = new L.PosAnimation(); + + this._panAnim.on({ + 'step': this._onPanTransitionStep, + 'end': this._onPanTransitionEnd + }, this); + } + + // don't fire movestart if animating inertia + if (!options.noMoveStart) { + this.fire('movestart'); + } + + // animate pan unless animate: false specified + if (options.animate !== false) { + L.DomUtil.addClass(this._mapPane, 'leaflet-pan-anim'); + + var newPos = this._getMapPanePos().subtract(offset).round(); + this._panAnim.run(this._mapPane, newPos, options.duration || 0.25, options.easeLinearity); + } else { + this._rawPanBy(offset); + this.fire('move').fire('moveend'); + } + + return this; + }, + + _onPanTransitionStep: function () { + this.fire('move'); + }, + + _onPanTransitionEnd: function () { + L.DomUtil.removeClass(this._mapPane, 'leaflet-pan-anim'); + this.fire('moveend'); + }, + + _tryAnimatedPan: function (center, options) { + // difference between the new and current centers in pixels + var offset = this._getCenterOffset(center)._floor(); + + // don't animate too far unless animate: true specified in options + if ((options && options.animate) !== true && !this.getSize().contains(offset)) { return false; } + + this.panBy(offset, options); + + return true; + } +}); + + + +/* + * Extends L.Map to handle zoom animations. + */ + +// @namespace Map +// @section Animation Options +L.Map.mergeOptions({ + // @option zoomAnimation: Boolean = true + // Whether the map zoom animation is enabled. By default it's enabled + // in all browsers that support CSS3 Transitions except Android. + zoomAnimation: true, + + // @option zoomAnimationThreshold: Number = 4 + // Won't animate zoom if the zoom difference exceeds this value. + zoomAnimationThreshold: 4 +}); + +var zoomAnimated = L.DomUtil.TRANSITION && L.Browser.any3d && !L.Browser.mobileOpera; + +if (zoomAnimated) { + + L.Map.addInitHook(function () { + // don't animate on browsers without hardware-accelerated transitions or old Android/Opera + this._zoomAnimated = this.options.zoomAnimation; + + // zoom transitions run with the same duration for all layers, so if one of transitionend events + // happens after starting zoom animation (propagating to the map pane), we know that it ended globally + if (this._zoomAnimated) { + + this._createAnimProxy(); + + L.DomEvent.on(this._proxy, L.DomUtil.TRANSITION_END, this._catchTransitionEnd, this); + } + }); +} + +L.Map.include(!zoomAnimated ? {} : { + + _createAnimProxy: function () { + + var proxy = this._proxy = L.DomUtil.create('div', 'leaflet-proxy leaflet-zoom-animated'); + this._panes.mapPane.appendChild(proxy); + + this.on('zoomanim', function (e) { + var prop = L.DomUtil.TRANSFORM, + transform = proxy.style[prop]; + + L.DomUtil.setTransform(proxy, this.project(e.center, e.zoom), this.getZoomScale(e.zoom, 1)); + + // workaround for case when transform is the same and so transitionend event is not fired + if (transform === proxy.style[prop] && this._animatingZoom) { + this._onZoomTransitionEnd(); + } + }, this); + + this.on('load moveend', function () { + var c = this.getCenter(), + z = this.getZoom(); + L.DomUtil.setTransform(proxy, this.project(c, z), this.getZoomScale(z, 1)); + }, this); + }, + + _catchTransitionEnd: function (e) { + if (this._animatingZoom && e.propertyName.indexOf('transform') >= 0) { + this._onZoomTransitionEnd(); + } + }, + + _nothingToAnimate: function () { + return !this._container.getElementsByClassName('leaflet-zoom-animated').length; + }, + + _tryAnimatedZoom: function (center, zoom, options) { + + if (this._animatingZoom) { return true; } + + options = options || {}; + + // don't animate if disabled, not supported or zoom difference is too large + if (!this._zoomAnimated || options.animate === false || this._nothingToAnimate() || + Math.abs(zoom - this._zoom) > this.options.zoomAnimationThreshold) { return false; } + + // offset is the pixel coords of the zoom origin relative to the current center + var scale = this.getZoomScale(zoom), + offset = this._getCenterOffset(center)._divideBy(1 - 1 / scale); + + // don't animate if the zoom origin isn't within one screen from the current center, unless forced + if (options.animate !== true && !this.getSize().contains(offset)) { return false; } + + L.Util.requestAnimFrame(function () { + this + ._moveStart(true) + ._animateZoom(center, zoom, true); + }, this); + + return true; + }, + + _animateZoom: function (center, zoom, startAnim, noUpdate) { + if (startAnim) { + this._animatingZoom = true; + + // remember what center/zoom to set after animation + this._animateToCenter = center; + this._animateToZoom = zoom; + + L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim'); + } + + // @event zoomanim: ZoomAnimEvent + // Fired on every frame of a zoom animation + this.fire('zoomanim', { + center: center, + zoom: zoom, + noUpdate: noUpdate + }); + + // Work around webkit not firing 'transitionend', see https://github.com/Leaflet/Leaflet/issues/3689, 2693 + setTimeout(L.bind(this._onZoomTransitionEnd, this), 250); + }, + + _onZoomTransitionEnd: function () { + if (!this._animatingZoom) { return; } + + L.DomUtil.removeClass(this._mapPane, 'leaflet-zoom-anim'); + + this._animatingZoom = false; + + this._move(this._animateToCenter, this._animateToZoom); + + // This anim frame should prevent an obscure iOS webkit tile loading race condition. + L.Util.requestAnimFrame(function () { + this._moveEnd(true); + }, this); + } +}); + + + +// @namespace Map +// @section Methods for modifying map state +L.Map.include({ + + // @method flyTo(latlng: LatLng, zoom?: Number, options?: Zoom/pan options): this + // Sets the view of the map (geographical center and zoom) performing a smooth + // pan-zoom animation. + flyTo: function (targetCenter, targetZoom, options) { + + options = options || {}; + if (options.animate === false || !L.Browser.any3d) { + return this.setView(targetCenter, targetZoom, options); + } + + this._stop(); + + var from = this.project(this.getCenter()), + to = this.project(targetCenter), + size = this.getSize(), + startZoom = this._zoom; + + targetCenter = L.latLng(targetCenter); + targetZoom = targetZoom === undefined ? startZoom : targetZoom; + + var w0 = Math.max(size.x, size.y), + w1 = w0 * this.getZoomScale(startZoom, targetZoom), + u1 = (to.distanceTo(from)) || 1, + rho = 1.42, + rho2 = rho * rho; + + function r(i) { + var s1 = i ? -1 : 1, + s2 = i ? w1 : w0, + t1 = w1 * w1 - w0 * w0 + s1 * rho2 * rho2 * u1 * u1, + b1 = 2 * s2 * rho2 * u1, + b = t1 / b1, + sq = Math.sqrt(b * b + 1) - b; + + // workaround for floating point precision bug when sq = 0, log = -Infinite, + // thus triggering an infinite loop in flyTo + var log = sq < 0.000000001 ? -18 : Math.log(sq); + + return log; + } + + function sinh(n) { return (Math.exp(n) - Math.exp(-n)) / 2; } + function cosh(n) { return (Math.exp(n) + Math.exp(-n)) / 2; } + function tanh(n) { return sinh(n) / cosh(n); } + + var r0 = r(0); + + function w(s) { return w0 * (cosh(r0) / cosh(r0 + rho * s)); } + function u(s) { return w0 * (cosh(r0) * tanh(r0 + rho * s) - sinh(r0)) / rho2; } + + function easeOut(t) { return 1 - Math.pow(1 - t, 1.5); } + + var start = Date.now(), + S = (r(1) - r0) / rho, + duration = options.duration ? 1000 * options.duration : 1000 * S * 0.8; + + function frame() { + var t = (Date.now() - start) / duration, + s = easeOut(t) * S; + + if (t <= 1) { + this._flyToFrame = L.Util.requestAnimFrame(frame, this); + + this._move( + this.unproject(from.add(to.subtract(from).multiplyBy(u(s) / u1)), startZoom), + this.getScaleZoom(w0 / w(s), startZoom), + {flyTo: true}); + + } else { + this + ._move(targetCenter, targetZoom) + ._moveEnd(true); + } + } + + this._moveStart(true); + + frame.call(this); + return this; + }, + + // @method flyToBounds(bounds: LatLngBounds, options?: fitBounds options): this + // Sets the view of the map with a smooth animation like [`flyTo`](#map-flyto), + // but takes a bounds parameter like [`fitBounds`](#map-fitbounds). + flyToBounds: function (bounds, options) { + var target = this._getBoundsCenterZoom(bounds, options); + return this.flyTo(target.center, target.zoom, options); + } +}); + + + /* * Provides L.Map with convenient shortcuts for using browser geolocation features. */ @@ -13037,8 +13037,8 @@ L.Map.include({ this.fire('locationfound', data); } }); - - - -}(window, document)); -//# sourceMappingURL=leaflet-src.map \ No newline at end of file + + + +}(window, document)); +//# sourceMappingURL=leaflet-src.map