` + * 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 + * @aka L.DivOverlay + * Base model for L.Popup and L.Tooltip. Inherit from it for custom popup like plugins. + */ + +// @namespace DivOverlay +L.DivOverlay = L.Layer.extend({ + + // @section + // @aka DivOverlay options + options: { + // @option offset: Point = Point(0, 7) + // The offset of the popup position. Useful to control the anchor + // of the popup when opening it on some overlays. + offset: [0, 7], + + // @option className: String = '' + // A custom CSS class name to assign to the popup. + className: '', + + // @option pane: String = 'popupPane' + // `Map pane` where the popup will be added. + pane: 'popupPane' + }, + + initialize: function (options, source) { + L.setOptions(this, options); + + this._source = source; + }, + + onAdd: function (map) { + this._zoomAnimated = map._zoomAnimated; + + if (!this._container) { + this._initLayout(); + } + + if (map._fadeAnimated) { + L.DomUtil.setOpacity(this._container, 0); + } + + clearTimeout(this._removeTimeout); + this.getPane().appendChild(this._container); + this.update(); + + if (map._fadeAnimated) { + L.DomUtil.setOpacity(this._container, 1); + } + + this.bringToFront(); + }, + + onRemove: function (map) { + if (map._fadeAnimated) { + L.DomUtil.setOpacity(this._container, 0); + this._removeTimeout = setTimeout(L.bind(L.DomUtil.remove, L.DomUtil, this._container), 200); + } else { + L.DomUtil.remove(this._container); + } + }, + + // @namespace Popup + // @method getLatLng: LatLng + // Returns the geographical point of popup. + getLatLng: function () { + return this._latlng; + }, + + // @method setLatLng(latlng: LatLng): this + // Sets the geographical point where the popup will open. + setLatLng: function (latlng) { + this._latlng = L.latLng(latlng); + if (this._map) { + this._updatePosition(); + this._adjustPan(); + } + return this; + }, + + // @method getContent: String|HTMLElement + // Returns the content of the popup. + getContent: function () { + return this._content; + }, + + // @method setContent(htmlContent: String|HTMLElement|Function): this + // Sets the HTML content of the popup. If a function is passed the source layer will be passed to the function. The function should return a `String` or `HTMLElement` to be used in the popup. + setContent: function (content) { + this._content = content; + this.update(); + return this; + }, + + // @method getElement: String|HTMLElement + // Alias for [getContent()](#popup-getcontent) + getElement: function () { + return this._container; + }, + + // @method update: null + // Updates the popup content, layout and position. Useful for updating the popup after something inside changed, e.g. image loaded. + update: function () { + if (!this._map) { return; } + + this._container.style.visibility = 'hidden'; + + this._updateContent(); + this._updateLayout(); + this._updatePosition(); + + this._container.style.visibility = ''; + + this._adjustPan(); + }, + + getEvents: function () { + var events = { + zoom: this._updatePosition, + viewreset: this._updatePosition + }; + + if (this._zoomAnimated) { + events.zoomanim = this._animateZoom; + } + return events; + }, + + // @method isOpen: Boolean + // Returns `true` when the popup is visible on the map. + isOpen: function () { + return !!this._map && this._map.hasLayer(this); + }, + + // @method bringToFront: this + // Brings this popup in front of other popups (in the same map pane). + bringToFront: function () { + if (this._map) { + L.DomUtil.toFront(this._container); + } + return this; + }, + + // @method bringToBack: this + // Brings this popup to the back of other popups (in the same map pane). + bringToBack: function () { + if (this._map) { + L.DomUtil.toBack(this._container); + } + return this; + }, + + _updateContent: function () { + if (!this._content) { return; } + + var node = this._contentNode; + var content = (typeof this._content === 'function') ? this._content(this._source || this) : this._content; + + if (typeof content === 'string') { + node.innerHTML = content; + } else { + while (node.hasChildNodes()) { + node.removeChild(node.firstChild); + } + node.appendChild(content); + } + this.fire('contentupdate'); + }, + + _updatePosition: function () { + if (!this._map) { return; } + + var pos = this._map.latLngToLayerPoint(this._latlng), + offset = L.point(this.options.offset), + anchor = this._getAnchor(); + + if (this._zoomAnimated) { + L.DomUtil.setPosition(this._container, pos.add(anchor)); + } else { + offset = offset.add(pos).add(anchor); + } + + var bottom = this._containerBottom = -offset.y, + left = this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x; + + // bottom position the popup in case the height of the popup changes (images loading etc) + this._container.style.bottom = bottom + 'px'; + this._container.style.left = left + 'px'; + }, + + _getAnchor: function () { + return [0, 0]; + } + +}); + + + +/* + * @class Popup + * @inherits DivOverlay + * @aka L.Popup + * Used to open popups in certain places of the map. Use [Map.openPopup](#map-openpopup) to + * open popups while making sure that only one popup is open at one time + * (recommended for usability), or use [Map.addLayer](#map-addlayer) to open as many as you want. + * + * @example + * + * If you want to just bind a popup to marker click and then open it, it's really easy: + * + * ```js + * marker.bindPopup(popupContent).openPopup(); + * ``` + * Path overlays like polylines also have a `bindPopup` method. + * Here's a more complicated way to open a popup on a map: + * + * ```js + * var popup = L.popup() + * .setLatLng(latlng) + * .setContent('

Hello world!
This is a nice popup.

') + * .openOn(map); + * ``` + */ + + +// @namespace Popup +L.Popup = L.DivOverlay.extend({ + + // @section + // @aka Popup options + options: { + // @option maxWidth: Number = 300 + // Max width of the popup, in pixels. + maxWidth: 300, + + // @option minWidth: Number = 50 + // Min width of the popup, in pixels. + minWidth: 50, + + // @option maxHeight: Number = null + // If set, creates a scrollable container of the given height + // inside a popup if its content exceeds it. + maxHeight: null, + + // @option autoPan: Boolean = true + // Set it to `false` if you don't want the map to do panning animation + // to fit the opened popup. + autoPan: true, + + // @option autoPanPaddingTopLeft: Point = null + // The margin between the popup and the top left corner of the map + // view after autopanning was performed. + autoPanPaddingTopLeft: null, + + // @option autoPanPaddingBottomRight: Point = null + // The margin between the popup and the bottom right corner of the map + // view after autopanning was performed. + autoPanPaddingBottomRight: null, + + // @option autoPanPadding: Point = Point(5, 5) + // Equivalent of setting both top left and bottom right autopan padding to the same value. + autoPanPadding: [5, 5], + + // @option keepInView: Boolean = false + // Set it to `true` if you want to prevent users from panning the popup + // off of the screen while it is open. + keepInView: false, + + // @option closeButton: Boolean = true + // Controls the presence of a close button in the popup. + closeButton: true, + + // @option autoClose: Boolean = true + // Set it to `false` if you want to override the default behavior of + // the popup closing when user clicks the map (set globally by + // the Map's [closePopupOnClick](#map-closepopuponclick) option). + autoClose: true, + + // @option className: String = '' + // A custom CSS class name to assign to the popup. + className: '' + }, + + // @namespace Popup + // @method openOn(map: Map): this + // Adds the popup to the map and closes the previous one. The same as `map.openPopup(popup)`. + openOn: function (map) { + map.openPopup(this); + return this; + }, + + onAdd: function (map) { + L.DivOverlay.prototype.onAdd.call(this, map); + + // @namespace Map + // @section Popup events + // @event popupopen: PopupEvent + // Fired when a popup is opened in the map + map.fire('popupopen', {popup: this}); + + if (this._source) { + // @namespace Layer + // @section Popup events + // @event popupopen: PopupEvent + // Fired when a popup bound to this layer is opened + this._source.fire('popupopen', {popup: this}, true); + // For non-path layers, we toggle the popup when clicking + // again the layer, so prevent the map to reopen it. + if (!(this._source instanceof L.Path)) { + this._source.on('preclick', L.DomEvent.stopPropagation); + } + } + }, + + onRemove: function (map) { + L.DivOverlay.prototype.onRemove.call(this, map); + + // @namespace Map + // @section Popup events + // @event popupclose: PopupEvent + // Fired when a popup in the map is closed + map.fire('popupclose', {popup: this}); + + if (this._source) { + // @namespace Layer + // @section Popup events + // @event popupclose: PopupEvent + // Fired when a popup bound to this layer is closed + this._source.fire('popupclose', {popup: this}, true); + if (!(this._source instanceof L.Path)) { + this._source.off('preclick', L.DomEvent.stopPropagation); + } + } + }, + + getEvents: function () { + var events = L.DivOverlay.prototype.getEvents.call(this); + + if ('closeOnClick' in this.options ? this.options.closeOnClick : this._map.options.closePopupOnClick) { + events.preclick = this._close; + } + + if (this.options.keepInView) { + events.moveend = this._adjustPan; + } + + return events; + }, + + _close: function () { + if (this._map) { + this._map.closePopup(this); + } + }, + + _initLayout: function () { + var prefix = 'leaflet-popup', + container = this._container = L.DomUtil.create('div', + prefix + ' ' + (this.options.className || '') + + ' leaflet-zoom-animated'); + + if (this.options.closeButton) { + var closeButton = this._closeButton = L.DomUtil.create('a', prefix + '-close-button', container); + closeButton.href = '#close'; + closeButton.innerHTML = '×'; + + L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this); + } + + var wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container); + this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper); + + L.DomEvent + .disableClickPropagation(wrapper) + .disableScrollPropagation(this._contentNode) + .on(wrapper, 'contextmenu', L.DomEvent.stopPropagation); + + this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container); + this._tip = L.DomUtil.create('div', prefix + '-tip', this._tipContainer); + }, + + _updateLayout: function () { + var container = this._contentNode, + style = container.style; + + style.width = ''; + style.whiteSpace = 'nowrap'; + + var width = container.offsetWidth; + width = Math.min(width, this.options.maxWidth); + width = Math.max(width, this.options.minWidth); + + style.width = (width + 1) + 'px'; + style.whiteSpace = ''; + + style.height = ''; + + var height = container.offsetHeight, + maxHeight = this.options.maxHeight, + scrolledClass = 'leaflet-popup-scrolled'; + + if (maxHeight && height > maxHeight) { + style.height = maxHeight + 'px'; + L.DomUtil.addClass(container, scrolledClass); + } else { + L.DomUtil.removeClass(container, scrolledClass); + } + + this._containerWidth = this._container.offsetWidth; + }, + + _animateZoom: function (e) { + var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center), + anchor = this._getAnchor(); + L.DomUtil.setPosition(this._container, pos.add(anchor)); + }, + + _adjustPan: function () { + if (!this.options.autoPan || (this._map._panAnim && this._map._panAnim._inProgress)) { return; } + + var map = this._map, + marginBottom = parseInt(L.DomUtil.getStyle(this._container, 'marginBottom'), 10) || 0, + containerHeight = this._container.offsetHeight + marginBottom, + containerWidth = this._containerWidth, + layerPos = new L.Point(this._containerLeft, -containerHeight - this._containerBottom); + + layerPos._add(L.DomUtil.getPosition(this._container)); + + var containerPos = map.layerPointToContainerPoint(layerPos), + padding = L.point(this.options.autoPanPadding), + paddingTL = L.point(this.options.autoPanPaddingTopLeft || padding), + paddingBR = L.point(this.options.autoPanPaddingBottomRight || padding), + size = map.getSize(), + dx = 0, + dy = 0; + + if (containerPos.x + containerWidth + paddingBR.x > size.x) { // right + dx = containerPos.x + containerWidth - size.x + paddingBR.x; + } + if (containerPos.x - dx - paddingTL.x < 0) { // left + dx = containerPos.x - paddingTL.x; + } + if (containerPos.y + containerHeight + paddingBR.y > size.y) { // bottom + dy = containerPos.y + containerHeight - size.y + paddingBR.y; + } + if (containerPos.y - dy - paddingTL.y < 0) { // top + dy = containerPos.y - paddingTL.y; + } + + // @namespace Map + // @section Popup events + // @event autopanstart: Event + // Fired when the map starts autopanning when opening a popup. + if (dx || dy) { + map + .fire('autopanstart') + .panBy([dx, dy]); + } + }, + + _onCloseButtonClick: function (e) { + this._close(); + L.DomEvent.stop(e); + }, + + _getAnchor: function () { + // Where should we anchor the popup on the source layer? + return L.point(this._source && this._source._getPopupAnchor ? this._source._getPopupAnchor() : [0, 0]); + } + +}); + +// @namespace Popup +// @factory L.popup(options?: Popup options, source?: Layer) +// Instantiates a `Popup` object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the popup with a reference to the Layer to which it refers. +L.popup = function (options, source) { + return new L.Popup(options, source); +}; + + +/* @namespace Map + * @section Interaction Options + * @option closePopupOnClick: Boolean = true + * Set it to `false` if you don't want popups to close when user clicks the map. + */ +L.Map.mergeOptions({ + closePopupOnClick: true +}); + + +// @namespace Map +// @section Methods for Layers and Controls +L.Map.include({ + // @method openPopup(popup: Popup): this + // Opens the specified popup while closing the previously opened (to make sure only one is opened at one time for usability). + // @alternative + // @method openPopup(content: String|HTMLElement, latlng: LatLng, options?: Popup options): this + // Creates a popup with the specified content and options and opens it in the given point on a map. + openPopup: function (popup, latlng, options) { + if (!(popup instanceof L.Popup)) { + popup = new L.Popup(options).setContent(popup); + } + + if (latlng) { + popup.setLatLng(latlng); + } + + if (this.hasLayer(popup)) { + return this; + } + + if (this._popup && this._popup.options.autoClose) { + this.closePopup(); + } + + this._popup = popup; + return this.addLayer(popup); + }, + + // @method closePopup(popup?: Popup): this + // Closes the popup previously opened with [openPopup](#map-openpopup) (or the given one). + closePopup: function (popup) { + if (!popup || popup === this._popup) { + popup = this._popup; + this._popup = null; + } + if (popup) { + this.removeLayer(popup); + } + 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 ? this._popup.isOpen() : false); + }, + + // @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); + } +}); + + + +/* + * @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, true)); + } else if (direction === 'bottom') { + pos = pos.subtract(L.point(tooltipWidth / 2 - offset.x, -offset.y, true)); + } else if (direction === 'center') { + pos = pos.subtract(L.point(tooltipWidth / 2 + offset.x, tooltipHeight / 2 - anchor.y + offset.y, true)); + } else if (direction === 'right' || direction === 'auto' && tooltipPoint.x < centerPoint.x) { + direction = 'right'; + pos = pos.add(L.point(offset.x + anchor.x, anchor.y - tooltipHeight / 2 + offset.y, true)); + } else { + direction = 'left'; + pos = pos.subtract(L.point(tooltipWidth + anchor.x - offset.x, tooltipHeight / 2 - anchor.y - offset.y, true)); + } + + 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 LayerGroup + * @aka L.LayerGroup + * @inherits Layer + * + * Used to group several layers and handle them as one. If you add it to the map, + * any layers added or removed from the group will be added/removed on the map as + * well. Extends `Layer`. + * + * @example + * + * ```js + * L.layerGroup([marker1, marker2]) + * .addLayer(polyline) + * .addTo(map); + * ``` + */ + +L.LayerGroup = L.Layer.extend({ + + initialize: function (layers) { + this._layers = {}; + + var i, len; + + if (layers) { + for (i = 0, len = layers.length; i < len; i++) { + this.addLayer(layers[i]); + } + } + }, + + // @method addLayer(layer: Layer): this + // Adds the given layer to the group. + addLayer: function (layer) { + var id = this.getLayerId(layer); + + this._layers[id] = layer; + + if (this._map) { + this._map.addLayer(layer); + } + + return this; + }, + + // @method removeLayer(layer: Layer): this + // Removes the given layer from the group. + // @alternative + // @method removeLayer(id: Number): this + // Removes the layer with the given internal ID from the group. + removeLayer: function (layer) { + var id = layer in this._layers ? layer : this.getLayerId(layer); + + if (this._map && this._layers[id]) { + this._map.removeLayer(this._layers[id]); + } + + delete this._layers[id]; + + return this; + }, + + // @method hasLayer(layer: Layer): Boolean + // Returns `true` if the given layer is currently added to the group. + hasLayer: function (layer) { + return !!layer && (layer in this._layers || this.getLayerId(layer) in this._layers); + }, + + // @method clearLayers(): this + // Removes all the layers from the group. + clearLayers: function () { + for (var i in this._layers) { + this.removeLayer(this._layers[i]); + } + return this; + }, + + // @method invoke(methodName: String, …): this + // Calls `methodName` on every layer contained in this group, passing any + // additional parameters. Has no effect if the layers contained do not + // implement `methodName`. + invoke: function (methodName) { + var args = Array.prototype.slice.call(arguments, 1), + i, layer; + + for (i in this._layers) { + layer = this._layers[i]; + + if (layer[methodName]) { + layer[methodName].apply(layer, args); + } + } + + return this; + }, + + onAdd: function (map) { + for (var i in this._layers) { + map.addLayer(this._layers[i]); + } + }, + + onRemove: function (map) { + for (var i in this._layers) { + map.removeLayer(this._layers[i]); + } + }, + + // @method eachLayer(fn: Function, context?: Object): this + // Iterates over the layers of the group, optionally specifying context of the iterator function. + // ```js + // group.eachLayer(function (layer) { + // layer.bindPopup('Hello'); + // }); + // ``` + eachLayer: function (method, context) { + for (var i in this._layers) { + method.call(context, this._layers[i]); + } + return this; + }, + + // @method getLayer(id: Number): Layer + // Returns the layer with the given internal ID. + getLayer: function (id) { + return this._layers[id]; + }, + + // @method getLayers(): Layer[] + // Returns an array of all the layers added to the group. + getLayers: function () { + var layers = []; + + for (var i in this._layers) { + layers.push(this._layers[i]); + } + return layers; + }, + + // @method setZIndex(zIndex: Number): this + // Calls `setZIndex` on every layer contained in this group, passing the z-index. + setZIndex: function (zIndex) { + return this.invoke('setZIndex', zIndex); + }, + + // @method getLayerId(layer: Layer): Number + // Returns the internal ID for a layer + getLayerId: function (layer) { + return L.stamp(layer); + } +}); + + +// @factory L.layerGroup(layers: Layer[]) +// Create a layer group, optionally given an initial set of layers. +L.layerGroup = function (layers) { + return new L.LayerGroup(layers); +}; + + + +/* + * @class FeatureGroup + * @aka L.FeatureGroup + * @inherits LayerGroup + * + * Extended `LayerGroup` that makes it easier to do the same thing to all its member layers: + * * [`bindPopup`](#layer-bindpopup) binds a popup to all of the layers at once (likewise with [`bindTooltip`](#layer-bindtooltip)) + * * Events are propagated to the `FeatureGroup`, so if the group has an event + * handler, it will handle events from any of the layers. This includes mouse events + * and custom events. + * * Has `layeradd` and `layerremove` events + * + * @example + * + * ```js + * L.featureGroup([marker1, marker2, polyline]) + * .bindPopup('Hello world!') + * .on('click', function() { alert('Clicked on a member of the group!'); }) + * .addTo(map); + * ``` + */ + +L.FeatureGroup = L.LayerGroup.extend({ + + addLayer: function (layer) { + if (this.hasLayer(layer)) { + return this; + } + + layer.addEventParent(this); + + L.LayerGroup.prototype.addLayer.call(this, layer); + + // @event layeradd: LayerEvent + // Fired when a layer is added to this `FeatureGroup` + return this.fire('layeradd', {layer: layer}); + }, + + removeLayer: function (layer) { + if (!this.hasLayer(layer)) { + return this; + } + if (layer in this._layers) { + layer = this._layers[layer]; + } + + layer.removeEventParent(this); + + L.LayerGroup.prototype.removeLayer.call(this, layer); + + // @event layerremove: LayerEvent + // Fired when a layer is removed from this `FeatureGroup` + return this.fire('layerremove', {layer: layer}); + }, + + // @method setStyle(style: Path options): this + // Sets the given path options to each layer of the group that has a `setStyle` method. + setStyle: function (style) { + return this.invoke('setStyle', style); + }, + + // @method bringToFront(): this + // Brings the layer group to the top of all other layers + bringToFront: function () { + return this.invoke('bringToFront'); + }, + + // @method bringToBack(): this + // Brings the layer group to the top of all other layers + bringToBack: function () { + return this.invoke('bringToBack'); + }, + + // @method getBounds(): LatLngBounds + // Returns the LatLngBounds of the Feature Group (created from bounds and coordinates of its children). + getBounds: function () { + var bounds = new L.LatLngBounds(); + + for (var id in this._layers) { + var layer = this._layers[id]; + bounds.extend(layer.getBounds ? layer.getBounds() : layer.getLatLng()); + } + return bounds; + } +}); + +// @factory L.featureGroup(layers: Layer[]) +// Create a feature group, optionally given an initial set of layers. +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); + this._layers = this._layers || {}; + }, + + 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(); + this.on('update', this._updatePaths, this); + }, + + onRemove: function () { + L.DomUtil.remove(this._container); + this.off('update', this._updatePaths, this); + }, + + getEvents: function () { + var events = { + viewreset: this._reset, + zoom: this._onZoom, + moveend: this._update, + zoomend: this._onZoomEnd + }; + 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); + + for (var id in this._layers) { + this._layers[id]._reset(); + } + }, + + _onZoomEnd: function () { + for (var id in this._layers) { + this._layers[id]._project(); + } + }, + + _updatePaths: function () { + for (var id in this._layers) { + this._layers[id]._update(); + } + }, + + _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); + }, + + onRemove: function () { + this._renderer._removePath(this); + }, + + // @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 + * + * Various utility functions for polyine points processing, used by Leaflet internally to make polylines lightning-fast. + */ + +L.LineUtil = { + + // Simplify polyline with vertex reduction and Douglas-Peucker simplification. + // Improves rendering performance dramatically by lessening the number of points to draw. + + // @function simplify(points: Point[], tolerance: Number): Point[] + // Dramatically reduces the number of points in a polyline while retaining + // its shape and returns a new array of simplified points, using the + // [Douglas-Peucker algorithm](http://en.wikipedia.org/wiki/Douglas-Peucker_algorithm). + // Used for a huge performance boost when processing/displaying Leaflet polylines for + // each zoom level and also reducing visual noise. tolerance affects the amount of + // simplification (lesser value means higher quality but slower and with more points). + // Also released as a separated micro-library [Simplify.js](http://mourner.github.com/simplify-js/). + simplify: function (points, tolerance) { + if (!tolerance || !points.length) { + return points.slice(); + } + + var sqTolerance = tolerance * tolerance; + + // stage 1: vertex reduction + points = this._reducePoints(points, sqTolerance); + + // stage 2: Douglas-Peucker simplification + points = this._simplifyDP(points, sqTolerance); + + return points; + }, + + // @function pointToSegmentDistance(p: Point, p1: Point, p2: Point): Number + // Returns the distance between point `p` and segment `p1` to `p2`. + pointToSegmentDistance: function (p, p1, p2) { + return Math.sqrt(this._sqClosestPointOnSegment(p, p1, p2, true)); + }, + + // @function closestPointOnSegment(p: Point, p1: Point, p2: Point): Number + // Returns the closest point from a point `p` on a segment `p1` to `p2`. + closestPointOnSegment: function (p, p1, p2) { + return this._sqClosestPointOnSegment(p, p1, p2); + }, + + // Douglas-Peucker simplification, see http://en.wikipedia.org/wiki/Douglas-Peucker_algorithm + _simplifyDP: function (points, sqTolerance) { + + var len = points.length, + ArrayConstructor = typeof Uint8Array !== undefined + '' ? Uint8Array : Array, + markers = new ArrayConstructor(len); + + markers[0] = markers[len - 1] = 1; + + this._simplifyDPStep(points, markers, sqTolerance, 0, len - 1); + + var i, + newPoints = []; + + for (i = 0; i < len; i++) { + if (markers[i]) { + newPoints.push(points[i]); + } + } + + return newPoints; + }, + + _simplifyDPStep: function (points, markers, sqTolerance, first, last) { + + var maxSqDist = 0, + index, i, sqDist; + + for (i = first + 1; i <= last - 1; i++) { + sqDist = this._sqClosestPointOnSegment(points[i], points[first], points[last], true); + + if (sqDist > maxSqDist) { + index = i; + maxSqDist = sqDist; + } + } + + if (maxSqDist > sqTolerance) { + markers[index] = 1; + + this._simplifyDPStep(points, markers, sqTolerance, first, index); + this._simplifyDPStep(points, markers, sqTolerance, index, last); + } + }, + + // reduce points that are too close to each other to a single point + _reducePoints: function (points, sqTolerance) { + var reducedPoints = [points[0]]; + + for (var i = 1, prev = 0, len = points.length; i < len; i++) { + if (this._sqDist(points[i], points[prev]) > sqTolerance) { + reducedPoints.push(points[i]); + prev = i; + } + } + if (prev < len - 1) { + reducedPoints.push(points[len - 1]); + } + return reducedPoints; + }, + + + // @function clipSegment(a: Point, b: Point, bounds: Bounds, useLastCode?: Boolean, round?: Boolean): Point[]|Boolean + // Clips the segment a to b by rectangular bounds with the + // [Cohen-Sutherland algorithm](https://en.wikipedia.org/wiki/Cohen%E2%80%93Sutherland_algorithm) + // (modifying the segment points directly!). Used by Leaflet to only show polyline + // points that are on the screen or near, increasing performance. + clipSegment: function (a, b, bounds, useLastCode, round) { + var codeA = useLastCode ? this._lastCode : this._getBitCode(a, bounds), + codeB = this._getBitCode(b, bounds), + + codeOut, p, newCode; + + // save 2nd code to avoid calculating it on the next segment + this._lastCode = codeB; + + while (true) { + // if a,b is inside the clip window (trivial accept) + if (!(codeA | codeB)) { + return [a, b]; + } + + // if a,b is outside the clip window (trivial reject) + if (codeA & codeB) { + return false; + } + + // other cases + codeOut = codeA || codeB; + p = this._getEdgeIntersection(a, b, codeOut, bounds, round); + newCode = this._getBitCode(p, bounds); + + if (codeOut === codeA) { + a = p; + codeA = newCode; + } else { + b = p; + codeB = newCode; + } + } + }, + + _getEdgeIntersection: function (a, b, code, bounds, round) { + var dx = b.x - a.x, + dy = b.y - a.y, + min = bounds.min, + max = bounds.max, + x, y; + + if (code & 8) { // top + x = a.x + dx * (max.y - a.y) / dy; + y = max.y; + + } else if (code & 4) { // bottom + x = a.x + dx * (min.y - a.y) / dy; + y = min.y; + + } else if (code & 2) { // right + x = max.x; + y = a.y + dy * (max.x - a.x) / dx; + + } else if (code & 1) { // left + x = min.x; + y = a.y + dy * (min.x - a.x) / dx; + } + + return new L.Point(x, y, round); + }, + + _getBitCode: function (p, bounds) { + var code = 0; + + if (p.x < bounds.min.x) { // left + code |= 1; + } else if (p.x > bounds.max.x) { // right + code |= 2; + } + + if (p.y < bounds.min.y) { // bottom + code |= 4; + } else if (p.y > bounds.max.y) { // top + code |= 8; + } + + return code; + }, + + // square distance (to avoid unnecessary Math.sqrt calls) + _sqDist: function (p1, p2) { + var dx = p2.x - p1.x, + dy = p2.y - p1.y; + return dx * dx + dy * dy; + }, + + // return closest point on segment or distance to that point + _sqClosestPointOnSegment: function (p, p1, p2, sqDist) { + var x = p1.x, + y = p1.y, + dx = p2.x - x, + dy = p2.y - y, + dot = dx * dx + dy * dy, + t; + + if (dot > 0) { + t = ((p.x - x) * dx + (p.y - y) * dy) / dot; + + if (t > 1) { + x = p2.x; + y = p2.y; + } else if (t > 0) { + x += dx * t; + y += dy * t; + } + } + + dx = p.x - x; + dy = p.y - y; + + 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 = [ + * [45.51, -122.68], + * [37.77, -122.43], + * [34.04, -118.2] + * ]; + * + * 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 = [ + * [[45.51, -122.68], + * [37.77, -122.43], + * [34.04, -118.2]], + * [[40.78, -73.91], + * [41.83, -87.62], + * [32.76, -96.72]] + * ]; + * ``` + */ + +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. + */ + +L.PolyUtil = {}; + +/* @function clipPolygon(points: Point[], bounds: Bounds, round?: Boolean): Point[] + * Clips the polygon geometry defined by the given `points` by the given bounds (using the [Sutherland-Hodgeman algorithm](https://en.wikipedia.org/wiki/Sutherland%E2%80%93Hodgman_algorithm)). + * Used by Leaflet to only show polygon points that are on the screen or near, increasing + * performance. Note that polygon points needs different algorithm for clipping + * than polyline, so there's a seperate method for it. + */ +L.PolyUtil.clipPolygon = function (points, bounds, round) { + var clippedPoints, + edges = [1, 4, 2, 8], + i, j, k, + a, b, + len, edge, p, + lu = L.LineUtil; + + for (i = 0, len = points.length; i < len; i++) { + points[i]._code = lu._getBitCode(points[i], bounds); + } + + // for each edge (left, bottom, right, top) + for (k = 0; k < 4; k++) { + edge = edges[k]; + clippedPoints = []; + + for (i = 0, len = points.length, j = len - 1; i < len; j = i++) { + a = points[i]; + b = points[j]; + + // if a is inside the clip window + if (!(a._code & edge)) { + // if b is outside the clip window (a->b goes out of screen) + if (b._code & edge) { + p = lu._getEdgeIntersection(b, a, edge, bounds, round); + p._code = lu._getBitCode(p, bounds); + clippedPoints.push(p); + } + clippedPoints.push(a); + + // else if b is inside the clip window (a->b enters the screen) + } else if (!(b._code & edge)) { + p = lu._getEdgeIntersection(b, a, edge, bounds, round); + p._code = lu._getBitCode(p, bounds); + clippedPoints.push(p); + } + } + points = clippedPoints; + } + + 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 = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]]; + * + * 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 = [ + * [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring + * [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole + * ]; + * ``` + * + * Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape. + * + * ```js + * var latlngs = [ + * [ // first polygon + * [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring + * [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole + * ], + * [ // second polygon + * [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]] + * ] + * ]; + * ``` + */ + +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); + this._layers[L.stamp(layer)] = 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); + delete this._layers[L.stamp(layer)]; + }, + + _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); + this._layers[L.stamp(layer)] = 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); + delete this._layers[L.stamp(layer)]; + }, + + _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 [`

+ Select map area +

+ Select marker position +