From b0205094c1f61f78132f99c0b056d9ae50787d1e Mon Sep 17 00:00:00 2001 From: Mourner Date: Thu, 8 Sep 2011 12:23:22 +0300 Subject: [PATCH] Fix initializing map in a non-empty div, close #278 --- CHANGELOG.md | 1 + dist/leaflet.js | 6 +- src/map/Map.js | 222 ++++++++++++++++++++++++------------------------ 3 files changed, 116 insertions(+), 113 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca35caf5..d408d89b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -53,6 +53,7 @@ Leaflet Changelog * Fixed a bug related to clearing background tiles after zooming (by [@neno-giscloud](https://github.com/neno-giscloud) & [@dravnic](https://github.com/dravnic)). * Fixed a bug related to cleaning up after removing tile layers (by [@dravnic](https://github.com/dravnic)). [#276](https://github.com/CloudMade/Leaflet/pull/276) * Fixed a bug that made selecting text in the attribution control impossible. [#279](https://github.com/CloudMade/Leaflet/issues/279) + * Fixed a bug when initializing a map in a non-empty div. [#278](https://github.com/CloudMade/Leaflet/issues/278) #### Browser bugfixes diff --git a/dist/leaflet.js b/dist/leaflet.js index 83c9b3e1..33d139d9 100644 --- a/dist/leaflet.js +++ b/dist/leaflet.js @@ -109,9 +109,9 @@ this._layers},invalidateSize:function(){var a=this.getSize();this._sizeChanged=! a.max.y)),a=this.unproject(new L.Point(a.max.x,a.min.y));return new L.LatLngBounds(b,a)},getMinZoom:function(){return isNaN(this.options.minZoom)?this._layersMinZoom||0:this.options.minZoom},getMaxZoom:function(){return isNaN(this.options.maxZoom)?this._layersMaxZoom||Infinity:this.options.maxZoom},getBoundsZoom:function(a){var b=this.getSize(),c=this.getMinZoom(),d=this.getMaxZoom(),e=a.getNorthEast(),a=a.getSouthWest(),f,g;do c++,f=this.project(e,c),g=this.project(a,c),f=new L.Point(f.x-g.x,g.y- f.y);while(f.x<=b.x&&f.y<=b.y&&c<=d);return c-1},getSize:function(){if(!this._size||this._sizeChanged)this._size=new L.Point(this._container.clientWidth,this._container.clientHeight),this._sizeChanged=!1;return this._size},getPixelBounds:function(){var a=this._getTopLeftPoint(),b=this.getSize();return new L.Bounds(a,a.add(b))},getPixelOrigin:function(){return this._initialTopLeftPoint},getPanes:function(){return this._panes},mouseEventToContainerPoint:function(a){return L.DomEvent.getMousePosition(a, this._container)},mouseEventToLayerPoint:function(a){return this.containerPointToLayerPoint(this.mouseEventToContainerPoint(a))},mouseEventToLatLng:function(a){return this.layerPointToLatLng(this.mouseEventToLayerPoint(a))},containerPointToLayerPoint:function(a){return a.subtract(L.DomUtil.getPosition(this._mapPane))},layerPointToContainerPoint:function(a){return a.add(L.DomUtil.getPosition(this._mapPane))},layerPointToLatLng:function(a){return this.unproject(a.add(this._initialTopLeftPoint))},latLngToLayerPoint:function(a){return this.project(a)._round()._subtract(this._initialTopLeftPoint)}, -project:function(a,b){b=typeof b=="undefined"?this._zoom:b;return this.options.crs.latLngToPoint(a,this.options.scale(b))},unproject:function(a,b,c){b=typeof b=="undefined"?this._zoom:b;return this.options.crs.pointToLatLng(a,this.options.scale(b),c)},_initLayout:function(){var a=this._container;a.className+=" leaflet-container";this.options.fadeAnimation&&(a.className+=" leaflet-fade-anim");var b=L.DomUtil.getStyle(a,"position");if(b!="absolute"&&b!="relative")a.style.position="relative";this._initPanes(); -this._initControlPos&&this._initControlPos()},_initPanes:function(){var a=this._panes={};this._mapPane=a.mapPane=this._createPane("leaflet-map-pane",this._container);this._tilePane=a.tilePane=this._createPane("leaflet-tile-pane",this._mapPane);this._objectsPane=a.objectsPane=this._createPane("leaflet-objects-pane",this._mapPane);a.shadowPane=this._createPane("leaflet-shadow-pane");a.overlayPane=this._createPane("leaflet-overlay-pane");a.markerPane=this._createPane("leaflet-marker-pane");a.popupPane= -this._createPane("leaflet-popup-pane")},_createPane:function(a,b){return L.DomUtil.create("div",a,b||this._objectsPane)},_resetView:function(a,b,c){var d=this._zoom!=b;this.fire("movestart");this._zoom=b;this._initialTopLeftPoint=this._getNewTopLeftPoint(a);c?this._initialTopLeftPoint._add(L.DomUtil.getPosition(this._mapPane)):L.DomUtil.setPosition(this._mapPane,new L.Point(0,0));this._tileLayersToLoad=this._tileLayersNum;this.fire("viewreset",{hard:!c});this.fire("move");d&&this.fire("zoomend"); +project:function(a,b){b=typeof b=="undefined"?this._zoom:b;return this.options.crs.latLngToPoint(a,this.options.scale(b))},unproject:function(a,b,c){b=typeof b=="undefined"?this._zoom:b;return this.options.crs.pointToLatLng(a,this.options.scale(b),c)},_initLayout:function(){var a=this._container;a.innerHTML="";a.className+=" leaflet-container";this.options.fadeAnimation&&(a.className+=" leaflet-fade-anim");var b=L.DomUtil.getStyle(a,"position");if(b!="absolute"&&b!="relative")a.style.position="relative"; +this._initPanes();this._initControlPos&&this._initControlPos()},_initPanes:function(){var a=this._panes={};this._mapPane=a.mapPane=this._createPane("leaflet-map-pane",this._container);this._tilePane=a.tilePane=this._createPane("leaflet-tile-pane",this._mapPane);this._objectsPane=a.objectsPane=this._createPane("leaflet-objects-pane",this._mapPane);a.shadowPane=this._createPane("leaflet-shadow-pane");a.overlayPane=this._createPane("leaflet-overlay-pane");a.markerPane=this._createPane("leaflet-marker-pane"); +a.popupPane=this._createPane("leaflet-popup-pane")},_createPane:function(a,b){return L.DomUtil.create("div",a,b||this._objectsPane)},_resetView:function(a,b,c){var d=this._zoom!=b;this.fire("movestart");this._zoom=b;this._initialTopLeftPoint=this._getNewTopLeftPoint(a);c?this._initialTopLeftPoint._add(L.DomUtil.getPosition(this._mapPane)):L.DomUtil.setPosition(this._mapPane,new L.Point(0,0));this._tileLayersToLoad=this._tileLayersNum;this.fire("viewreset",{hard:!c});this.fire("move");d&&this.fire("zoomend"); this.fire("moveend");if(!this._loaded)this._loaded=!0,this.fire("load")},_initLayers:function(a){this._layers={};for(var b=0,c=a.length;b Object*/ { zoom = (typeof zoom == 'undefined' ? this._zoom : zoom); return this.options.crs.pointToLatLng(point, this.options.scale(zoom), unbounded); }, - - + + // private methods that modify map state - + _initLayout: function() { var container = this._container; - + + container.innerHTML = ''; + container.className += ' leaflet-container'; - + if (this.options.fadeAnimation) { container.className += ' leaflet-fade-anim'; } - + var position = L.DomUtil.getStyle(container, 'position'); if (position != 'absolute' && position != 'relative') { container.style.position = 'relative'; } - + this._initPanes(); - + if (this._initControlPos) this._initControlPos(); }, - + _initPanes: function() { var panes = this._panes = {}; - + this._mapPane = panes.mapPane = this._createPane('leaflet-map-pane', this._container); - + this._tilePane = panes.tilePane = this._createPane('leaflet-tile-pane', this._mapPane); this._objectsPane = panes.objectsPane = this._createPane('leaflet-objects-pane', this._mapPane); - + panes.shadowPane = this._createPane('leaflet-shadow-pane'); panes.overlayPane = this._createPane('leaflet-overlay-pane'); panes.markerPane = this._createPane('leaflet-marker-pane'); panes.popupPane = this._createPane('leaflet-popup-pane'); }, - + _createPane: function(className, container) { return L.DomUtil.create('div', className, container || this._objectsPane); }, - + _resetView: function(center, zoom, preserveMapOffset) { var zoomChanged = (this._zoom != zoom); - + this.fire('movestart'); - + this._zoom = zoom; - + this._initialTopLeftPoint = this._getNewTopLeftPoint(center); - + if (!preserveMapOffset) { L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0)); } else { var offset = L.DomUtil.getPosition(this._mapPane); this._initialTopLeftPoint._add(offset); } - + this._tileLayersToLoad = this._tileLayersNum; this.fire('viewreset', {hard: !preserveMapOffset}); this.fire('move'); if (zoomChanged) { this.fire('zoomend'); } this.fire('moveend'); - + if (!this._loaded) { this._loaded = true; this.fire('load'); } }, - + _initLayers: function(layers) { this._layers = {}; for (var i = 0, len = layers.length; i < len; i++) { this.addLayer(layers[i]); } }, - + _initControls: function() { if (this.options.zoomControl) { this.addControl(new L.Control.Zoom()); @@ -391,34 +393,34 @@ L.Map = L.Class.extend({ var mapPaneOffset = L.DomUtil.getPosition(this._mapPane); L.DomUtil.setPosition(this._mapPane, mapPaneOffset.subtract(offset)); }, - - + + // map events - + _initEvents: function() { L.DomEvent.addListener(this._container, 'click', this._onMouseClick, this); - + var events = ['dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove']; for (var i = 0; i < events.length; i++) { L.DomEvent.addListener(this._container, events[i], this._fireMouseEvent, this); } - + if (this.options.trackResize) { L.DomEvent.addListener(window, 'resize', this._onResize, this); } }, - + _onResize: function() { L.Util.requestAnimFrame(this.invalidateSize, this, false, this._container); }, - + _onMouseClick: function(e) { if (this.dragging && this.dragging.moved()) { return; } - + this.fire('pre' + e.type); this._fireMouseEvent(e); }, - + _fireMouseEvent: function(e) { var type = e.type; type = (type == 'mouseenter' ? 'mouseover' : (type == 'mouseleave' ? 'mouseout' : type)); @@ -428,7 +430,7 @@ L.Map = L.Class.extend({ layerPoint: this.mouseEventToLayerPoint(e) }); }, - + _initInteraction: function() { var handlers = { dragging: L.Handler.MapDrag, @@ -444,7 +446,7 @@ L.Map = L.Class.extend({ } } }, - + _onTileLayerLoad: function() { // clear scaled tiles after all new tiles are loaded (for performance) this._tileLayersToLoad--; @@ -453,21 +455,21 @@ L.Map = L.Class.extend({ this._clearTileBgTimer = setTimeout(L.Util.bind(this._clearTileBg, this), 500); } }, - + // private methods for getting map state - + _getTopLeftPoint: function() { if (!this._loaded) throw new Error('Set map center and zoom first.'); var offset = L.DomUtil.getPosition(this._mapPane); return this._initialTopLeftPoint.subtract(offset); }, - + _getNewTopLeftPoint: function(center) { var viewHalf = this.getSize().divideBy(2); return this.project(center).subtract(viewHalf).round(); }, - + _limitZoom: function(zoom) { var min = this.getMinZoom(); var max = this.getMaxZoom();