From 306e42a25c918da21d926b1dac53b58cb2689c46 Mon Sep 17 00:00:00 2001 From: Mourner Date: Tue, 22 Mar 2011 17:58:35 +0200 Subject: [PATCH] refactor map init code --- src/layer/ImageOverlay.js | 1 + src/map/Map.js | 78 +++++++++++++++++++++----------- src/map/ext/Map.PanAnimation.js | 2 +- src/map/ext/Map.ZoomAnimation.js | 4 +- 4 files changed, 56 insertions(+), 29 deletions(-) diff --git a/src/layer/ImageOverlay.js b/src/layer/ImageOverlay.js index 12364471..d9c7294f 100644 --- a/src/layer/ImageOverlay.js +++ b/src/layer/ImageOverlay.js @@ -14,6 +14,7 @@ L.ImageOverlay = L.Class.extend({ this._image.style.visibility = 'hidden'; //TODO opacity option + //TODO createImage util method to remove duplication L.Util.extend(this._image, { galleryimg: 'no', onselectstart: L.Util.falseFn, diff --git a/src/map/Map.js b/src/map/Map.js index 1008d4f4..162e89bc 100644 --- a/src/map/Map.js +++ b/src/map/Map.js @@ -12,8 +12,8 @@ L.Map = L.Class.extend({ scaling: function(zoom) { return 256 * (1 << zoom); }, // state - center: new L.LatLng(0, 0), - zoom: 0, + center: null, + zoom: null, layers: [], //interaction @@ -43,7 +43,12 @@ L.Map = L.Class.extend({ if (L.Handler) { this._initInteraction(); } } - this.setView(this.options.center, this.options.zoom, true); + var center = this.options.center, + zoom = this.options.zoom; + + if (center !== null && zoom !== null) { + this.setView(center, zoom, true); + } var layers = this.options.layers; layers = (layers instanceof Array ? layers : [layers]); @@ -53,14 +58,10 @@ L.Map = L.Class.extend({ // public methods that modify map state - // replaced by animation-powered implementation in Map.Animation.js + // replaced by animation-powered implementation in Map.PanAnimation.js setView: function(center, zoom, forceReset) { - zoom = this._limitZoom(zoom); - var zoomChanged = (this._zoom != zoom); - // reset the map view - this._resetView(center, zoom); - + this._resetView(center, this._limitZoom(zoom)); return this; }, @@ -101,8 +102,6 @@ L.Map = L.Class.extend({ var id = L.Util.stamp(layer); if (!this._layers[id]) { - layer.onAdd(this); - this._layers[id] = layer; if (layer.options && !isNaN(layer.options.maxZoom)) { @@ -113,7 +112,16 @@ L.Map = L.Class.extend({ } //TODO getMaxZoom, getMinZoom - this.fire('layeradd', {layer: layer}); + function addLayer() { + layer.onAdd(this); + this.fire('layeradd', {layer: layer}); + } + + if (this._loaded) { + addLayer.call(this); + } else { + this.on('load', addLayer, this); + } } return this; }, @@ -207,6 +215,13 @@ L.Map = L.Class.extend({ return this._initialTopLeftPoint; }, + getPanes: function() { + return this._panes; + }, + + + // conversion methods + mouseEventToContainerPoint: function(/*MouseEvent*/ e) { return L.DomEvent.getMousePosition(e, this._container); }, @@ -248,27 +263,32 @@ L.Map = L.Class.extend({ return this.options.projection.unproject(untransformedPoint, unbounded); }, - getPanes: function() { - return this._panes; - }, - // private methods that modify map state _initLayout: function() { - this._container.className += ' leaflet-container'; + var container = this._container; - var position = L.DomUtil.getStyle(this._container, 'position'); - this._container.style.position = (position == 'absolute' ? 'absolute' : 'relative'); + container.className += ' leaflet-container'; - this._panes = {}; - this._mapPane = this._panes.mapPane = this._createPane('leaflet-map-pane', this._container); + var position = L.DomUtil.getStyle(container, 'position'); + container.style.position = (position == 'absolute' ? 'absolute' : 'relative'); - this._tilePane = this._panes.tilePane = this._createPane('leaflet-tile-pane'); - this._panes.shadowPane = this._createPane('leaflet-shadow-pane'); - this._panes.overlayPane = this._createPane('leaflet-overlay-pane'); - this._panes.markerPane = this._createPane('leaflet-marker-pane'); - this._panes.popupPane = this._createPane('leaflet-popup-pane'); + 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'); + 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) { @@ -290,6 +310,11 @@ L.Map = L.Class.extend({ this.fire('move'); if (zoomChanged) { this.fire('zoomend'); } this.fire('moveend'); + + if (!this._loaded) { + this._loaded = true; + this.fire('load'); + } }, _initLayers: function(layers) { @@ -349,6 +374,7 @@ L.Map = L.Class.extend({ // 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); }, diff --git a/src/map/ext/Map.PanAnimation.js b/src/map/ext/Map.PanAnimation.js index 687ed4a4..c4a71e97 100644 --- a/src/map/ext/Map.PanAnimation.js +++ b/src/map/ext/Map.PanAnimation.js @@ -3,7 +3,7 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : { zoom = this._limitZoom(zoom); var zoomChanged = (this._zoom != zoom); - if (!forceReset && this._layers) { + if (this._loaded && !forceReset && this._layers) { // difference between the new and current centers in pixels var offset = this._getNewTopLeftPoint(center).subtract(this._getTopLeftPoint()); diff --git a/src/map/ext/Map.ZoomAnimation.js b/src/map/ext/Map.ZoomAnimation.js index 5e476f44..ff8063f8 100644 --- a/src/map/ext/Map.ZoomAnimation.js +++ b/src/map/ext/Map.ZoomAnimation.js @@ -14,13 +14,13 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : { //if offset does not exceed half of the view if (!this._offsetIsWithinView(offset, 1)) { return false; } - this._initPanes(); + this._initTilePanes(); this._runAnimation(center, zoom, scale, offset); return true; }, - _initPanes: function() { + _initTilePanes: function() { if (!this._tileBg) { this._tileBg = this._createPane('leaflet-tile-pane'); this._tileBg.style.zIndex = 1;