From b73b2d12c41f2df5b601717dc34ec4e5143e9797 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 26 Sep 2012 10:58:13 +0200 Subject: [PATCH] Replace ol.createMap with friendlier ol.Map constructor --- demos/full-screen/full-screen.js | 15 +- demos/side-by-side/side-by-side.js | 30 ++-- demos/two-layers/two-layers.js | 46 +++--- src/ol/createmap.js | 153 ------------------- src/ol/map.js | 15 +- src/ol/mapoptions.js | 227 +++++++++++++++++++++++++++++ 6 files changed, 272 insertions(+), 214 deletions(-) delete mode 100644 src/ol/createmap.js create mode 100644 src/ol/mapoptions.js diff --git a/demos/full-screen/full-screen.js b/demos/full-screen/full-screen.js index fd8ad98ad9..a6109bd3aa 100644 --- a/demos/full-screen/full-screen.js +++ b/demos/full-screen/full-screen.js @@ -1,8 +1,10 @@ goog.require('goog.debug.Console'); goog.require('goog.debug.Logger'); goog.require('goog.debug.Logger.Level'); +goog.require('ol.Collection'); +goog.require('ol.Coordinate'); +goog.require('ol.Map'); goog.require('ol.RendererHint'); -goog.require('ol.createMap'); goog.require('ol.layer.MapQuestOpenAerial'); @@ -11,9 +13,10 @@ if (goog.DEBUG) { goog.debug.Logger.getLogger('ol').setLevel(goog.debug.Logger.Level.INFO); } -var rendererHint = [ol.RendererHint.WEBGL, ol.RendererHint.DOM]; -var map = ol.createMap(document.getElementById('map'), {}, rendererHint); + var layer = new ol.layer.MapQuestOpenAerial(); -map.getLayers().push(layer); -map.setCenter(new ol.Coordinate(0, 0)); -map.setResolution(layer.getStore().getResolutions()[0]); +var map = new ol.Map(document.getElementById('map'), { + center: new ol.Coordinate(0, 0), + layers: new ol.Collection([layer]), + resolution: layer.getStore().getResolutions()[0] +}); diff --git a/demos/side-by-side/side-by-side.js b/demos/side-by-side/side-by-side.js index 756c097946..6c711c0c2d 100644 --- a/demos/side-by-side/side-by-side.js +++ b/demos/side-by-side/side-by-side.js @@ -2,10 +2,10 @@ goog.require('goog.debug.Console'); goog.require('goog.debug.Logger'); goog.require('goog.debug.Logger.Level'); goog.require('ol.CoordinateFormat'); +goog.require('ol.Map'); goog.require('ol.RendererHint'); goog.require('ol.control.Attribution'); goog.require('ol.control.MousePosition'); -goog.require('ol.createMap'); goog.require('ol.interaction.Keyboard'); goog.require('ol.layer.MapQuestOpenAerial'); @@ -16,23 +16,18 @@ if (goog.DEBUG) { } - var layer = new ol.layer.MapQuestOpenAerial(); -var layers = new ol.Collection(); -layers.push(layer); +var domMap = new ol.Map(document.getElementById('domMap'), { + center: new ol.Coordinate(0, 0), + layers: new ol.Collection([layer]), + renderer: ol.RendererHint.DOM, + zoom: 0 +}); -var domMap = ol.createMap( - document.getElementById('domMap'), - {'layers': layers}, - ol.RendererHint.DOM); -domMap.setCenter(new ol.Coordinate(0, 0)); -domMap.setResolution(layer.getStore().getResolutions()[0]); - -var webglMap = ol.createMap( - document.getElementById('webglMap'), - {}, - ol.RendererHint.WEBGL); +var webglMap = new ol.Map(document.getElementById('webglMap'), { + renderer: ol.RendererHint.WEBGL +}); if (!goog.isNull(webglMap)) { webglMap.bindTo('center', domMap); webglMap.bindTo('layers', domMap); @@ -102,8 +97,3 @@ keyboardInteraction.addCallback('vV', function() { layer.setVisible(!layer.getVisible()); }); domMap.getInteractions().push(keyboardInteraction); - -goog.exportSymbol('layer', layer); -goog.exportSymbol('layers', layers); -goog.exportSymbol('domMap', domMap); -goog.exportSymbol('webglMap', webglMap); diff --git a/demos/two-layers/two-layers.js b/demos/two-layers/two-layers.js index fdc3cb0633..c752e980e7 100644 --- a/demos/two-layers/two-layers.js +++ b/demos/two-layers/two-layers.js @@ -1,33 +1,33 @@ +goog.require('ol.Collection'); goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.Projection'); goog.require('ol.RendererHint'); goog.require('ol.control.Attribution'); -goog.require('ol.createMap'); goog.require('ol.layer.BingMaps'); goog.require('ol.layer.TileJSON'); -var layer1 = new ol.layer.BingMaps( - ol.BingMapsStyle.AERIAL, - 'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE'); -var layer2 = new ol.layer.TileJSON( - 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp'); +var layers = new ol.Collection([ + new ol.layer.BingMaps( + ol.BingMapsStyle.AERIAL, + 'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE'), + new ol.layer.TileJSON( + 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp') +]); -var layers = new ol.Collection([layer1, layer2]); - -var webglMap = ol.createMap( - document.getElementById('webglMap'), - {'layers': new ol.Collection([layer1, layer2])}, - ol.RendererHint.WEBGL); - -goog.events.listen(layer2, goog.events.EventType.LOAD, function() { - webglMap.setUserCenter(new ol.Coordinate(-77.93254999999999, 37.9555)); - webglMap.setResolution(layer2.getStore().getResolutions()[5]); +var webglMap = new ol.Map(document.getElementById('webglMap'), { + center: ol.Projection.transformWithCodes( + new ol.Coordinate(-77.93254999999999, 37.9555), + 'EPSG:4326', 'EPSG:3857'), + layers: layers, + renderer: ol.RendererHint.WEBGL, + zoom: 5 }); -var domMap = ol.createMap( - document.getElementById('domMap'), - {}, - ol.RendererHint.DOM); +var domMap = new ol.Map(document.getElementById('domMap'), { + renderer: ol.RendererHint.DOM +}); domMap.bindTo('center', webglMap); domMap.bindTo('layers', webglMap); domMap.bindTo('resolution', webglMap); @@ -36,9 +36,3 @@ domMap.bindTo('rotation', webglMap); var attributionControl = new ol.control.Attribution(webglMap); document.getElementById('attribution').appendChild( attributionControl.getElement()); - -goog.exportSymbol('layer1', layer1); -goog.exportSymbol('layer2', layer2); -goog.exportSymbol('layers', layers); -goog.exportSymbol('domMap', domMap); -goog.exportSymbol('webglMap', webglMap); diff --git a/src/ol/createmap.js b/src/ol/createmap.js deleted file mode 100644 index 54ee4259c6..0000000000 --- a/src/ol/createmap.js +++ /dev/null @@ -1,153 +0,0 @@ -goog.provide('ol.RendererHint'); -goog.provide('ol.createMap'); - -goog.require('goog.object'); -goog.require('ol.Collection'); -goog.require('ol.Map'); -goog.require('ol.MapProperty'); -goog.require('ol.Projection'); -goog.require('ol.interaction.AltDragRotate'); -goog.require('ol.interaction.CenterConstraint'); -goog.require('ol.interaction.Constraints'); -goog.require('ol.interaction.DblClickZoom'); -goog.require('ol.interaction.DragPan'); -goog.require('ol.interaction.KeyboardPan'); -goog.require('ol.interaction.KeyboardZoom'); -goog.require('ol.interaction.MouseWheelZoom'); -goog.require('ol.interaction.ResolutionConstraint'); -goog.require('ol.interaction.RotationConstraint'); -goog.require('ol.interaction.ShiftDragZoom'); -goog.require('ol.renderer.dom'); -goog.require('ol.renderer.dom.Map'); -goog.require('ol.renderer.webgl'); -goog.require('ol.renderer.webgl.Map'); - - -/** - * @define {string} Default projection code. - */ -ol.DEFAULT_PROJECTION_CODE = 'EPSG:3857'; - - -/** - * @define {string} Default user projection code. - */ -ol.DEFAULT_USER_PROJECTION_CODE = 'EPSG:4326'; - - -/** - * @define {boolean} Whether to enable DOM. - */ -ol.ENABLE_DOM = true; - - -/** - * @define {boolean} Whether to enable WebGL. - */ -ol.ENABLE_WEBGL = true; - - -/** - * @enum {string} - */ -ol.RendererHint = { - DOM: 'dom', - WEBGL: 'webgl' -}; - - -/** - * @type {Array.} - */ -ol.DEFAULT_RENDERER_HINT = [ - ol.RendererHint.WEBGL, - ol.RendererHint.DOM -]; - - -/** - * @param {Element} target Target. - * @param {Object.=} opt_values Values. - * @param {ol.RendererHint|Array.=} opt_rendererHints - * Renderer hints. - * @return {ol.Map} Map. - */ -ol.createMap = function(target, opt_values, opt_rendererHints) { - - var values = {}; - if (goog.isDef(opt_values)) { - goog.object.extend(values, opt_values); - } - - // FIXME this should be a configuration option - var centerConstraint = ol.interaction.CenterConstraint.snapToPixel; - var resolutionConstraint = - ol.interaction.ResolutionConstraint.createSnapToPower( - Math.exp(Math.log(2) / 8), ol.Projection.EPSG_3857_HALF_SIZE / 128); - var rotationConstraint = ol.interaction.RotationConstraint.none; - var constraints = new ol.interaction.Constraints( - centerConstraint, resolutionConstraint, rotationConstraint); - - if (!goog.object.containsKey(values, ol.MapProperty.INTERACTIONS)) { - var interactions = new ol.Collection(); - interactions.push(new ol.interaction.AltDragRotate(constraints)); - interactions.push(new ol.interaction.DblClickZoom(constraints)); - interactions.push(new ol.interaction.DragPan(constraints)); - interactions.push(new ol.interaction.KeyboardPan(constraints, 16)); - interactions.push(new ol.interaction.KeyboardZoom(constraints)); - interactions.push(new ol.interaction.MouseWheelZoom(constraints)); - interactions.push(new ol.interaction.ShiftDragZoom(constraints)); - values[ol.MapProperty.INTERACTIONS] = interactions; - } - - if (!goog.object.containsKey(values, ol.MapProperty.LAYERS)) { - values[ol.MapProperty.LAYERS] = new ol.Collection(); - } - - if (!goog.object.containsKey(values, ol.MapProperty.PROJECTION)) { - values[ol.MapProperty.PROJECTION] = - ol.Projection.getFromCode(ol.DEFAULT_PROJECTION_CODE); - } - - if (!goog.object.containsKey(values, ol.MapProperty.USER_PROJECTION)) { - values[ol.MapProperty.USER_PROJECTION] = - ol.Projection.getFromCode(ol.DEFAULT_USER_PROJECTION_CODE); - } - - /** - * @type {Array.} - */ - var rendererHints; - if (goog.isDef(opt_rendererHints)) { - if (goog.isArray(opt_rendererHints)) { - rendererHints = opt_rendererHints; - } else { - rendererHints = [opt_rendererHints]; - } - } else { - rendererHints = ol.DEFAULT_RENDERER_HINT; - } - - var i, rendererHint, rendererConstructor; - for (i = 0; i < rendererHints.length; ++i) { - rendererHint = rendererHints[i]; - if (rendererHint == ol.RendererHint.DOM) { - if (ol.ENABLE_DOM && ol.renderer.dom.isSupported()) { - rendererConstructor = ol.renderer.dom.Map; - break; - } - } else if (rendererHint == ol.RendererHint.WEBGL) { - if (ol.ENABLE_WEBGL && ol.renderer.webgl.isSupported()) { - rendererConstructor = ol.renderer.webgl.Map; - break; - } - } - } - - if (goog.isDef(rendererConstructor)) { - return new ol.Map(target, rendererConstructor, values); - } else { - return null; - } - -}; diff --git a/src/ol/map.js b/src/ol/map.js index 341e71f8de..b8b73f2b42 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -76,14 +76,11 @@ ol.MapPaneZIndex = { * @extends {ol.Object} * @implements {goog.fx.anim.Animated} * @param {Element} container Container. - * @param {function(new: ol.renderer.Map, Element, ol.Map)} rendererConstructor - * Renderer constructor. - * @param {Object=} opt_values Values. + * @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options literal. * @param {goog.dom.ViewportSizeMonitor=} opt_viewportSizeMonitor * Viewport size monitor. */ -ol.Map = function( - container, rendererConstructor, opt_values, opt_viewportSizeMonitor) { +ol.Map = function(container, mapOptionsLiteral, opt_viewportSizeMonitor) { goog.base(this); @@ -95,6 +92,8 @@ ol.Map = function( this.logger = goog.debug.Logger.getLogger('ol.map.' + goog.getUid(this)); } + var mapOptions = new ol.MapOptions(mapOptionsLiteral); + /** * @type {ol.TransformFunction} * @private @@ -176,7 +175,7 @@ ol.Map = function( * @type {ol.renderer.Map} * @private */ - this.renderer_ = new rendererConstructor(this.viewport_, this); + this.renderer_ = new mapOptions.rendererConstructor(this.viewport_, this); this.registerDisposable(this.renderer_); /** @@ -197,9 +196,7 @@ ol.Map = function( this, ol.Object.getChangedEventType(ol.MapProperty.USER_PROJECTION), this.handleUserProjectionChanged, false, this); - if (goog.isDef(opt_values)) { - this.setValues(opt_values); - } + this.setValues(mapOptions.values); this.handleBrowserWindowResize(); diff --git a/src/ol/mapoptions.js b/src/ol/mapoptions.js new file mode 100644 index 0000000000..e86c6802c4 --- /dev/null +++ b/src/ol/mapoptions.js @@ -0,0 +1,227 @@ +goog.provide('ol.MapOptions'); +goog.provide('ol.MapOptionsLiteral'); +goog.provide('ol.RendererHint'); + +goog.require('ol.Collection'); +goog.require('ol.Projection'); +goog.require('ol.interaction.AltDragRotate'); +goog.require('ol.interaction.CenterConstraint'); +goog.require('ol.interaction.Constraints'); +goog.require('ol.interaction.DblClickZoom'); +goog.require('ol.interaction.DragPan'); +goog.require('ol.interaction.KeyboardPan'); +goog.require('ol.interaction.KeyboardZoom'); +goog.require('ol.interaction.MouseWheelZoom'); +goog.require('ol.interaction.ResolutionConstraint'); +goog.require('ol.interaction.RotationConstraint'); +goog.require('ol.interaction.ShiftDragZoom'); +goog.require('ol.renderer.Map'); +goog.require('ol.renderer.dom'); +goog.require('ol.renderer.dom.Map'); +goog.require('ol.renderer.webgl'); +goog.require('ol.renderer.webgl.Map'); + + +/** + * @define {boolean} Whether to enable DOM. + */ +ol.ENABLE_DOM = true; + + +/** + * @define {boolean} Whether to enable WebGL. + */ +ol.ENABLE_WEBGL = true; + + +/** + * @enum {string} + */ +ol.RendererHint = { + DOM: 'dom', + WEBGL: 'webgl' +}; + + +/** + * @type {Array.} + */ +ol.DEFAULT_RENDERER_HINTS = [ + ol.RendererHint.WEBGL, + ol.RendererHint.DOM +]; + + +/** + * @typedef {{center: (ol.Coordinate|undefined), + * doubleClickZoom: (boolean|undefined), + * dragPan: (boolean|undefined), + * interactions: (ol.Collection|undefined), + * keyboard: (boolean|undefined), + * keyboardPanOffset: (number|undefined), + * layers: (ol.Collection|undefined), + * mouseWheelZoom: (boolean|undefined), + * projection: (ol.Projection|string|undefined), + * renderer: (ol.RendererHint|undefined), + * renderers: (Array.<(ol.RendererHint)>|undefined), + * resolution: (number|undefined), + * rotate: (boolean|undefined), + * shiftDragZoom: (boolean|undefined), + * userProjection: (ol.Projection|string|undefined), + * zoom: (number|undefined)}} + */ +ol.MapOptionsLiteral; + + + +/** + * @constructor + * @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options. + */ +ol.MapOptions = function(mapOptionsLiteral) { + + /** + * @type {Object.} + */ + this.values = {}; + + if (goog.isDef(mapOptionsLiteral.center)) { + this.values[ol.MapProperty.CENTER] = mapOptionsLiteral.center; + } + + this.values[ol.MapProperty.INTERACTIONS] = + goog.isDef(mapOptionsLiteral.interactions) ? + mapOptionsLiteral.interactions : + ol.MapOptions.createInteractions_(mapOptionsLiteral); + + this.values[ol.MapProperty.LAYERS] = goog.isDef(mapOptionsLiteral.layers) ? + mapOptionsLiteral.layers : new ol.Collection(); + + this.values[ol.MapProperty.PROJECTION] = ol.MapOptions.createProjection_( + mapOptionsLiteral.projection, 'EPSG:3857'); + + if (goog.isDef(mapOptionsLiteral.resolution)) { + this.values[ol.MapProperty.RESOLUTION] = mapOptionsLiteral.resolution; + } else if (goog.isDef(mapOptionsLiteral.zoom)) { + this.values[ol.MapProperty.RESOLUTION] = + ol.Projection.EPSG_3857_HALF_SIZE / (128 << mapOptionsLiteral.zoom); + } + + this.values[ol.MapProperty.USER_PROJECTION] = ol.MapOptions.createProjection_( + mapOptionsLiteral.userProjection, 'EPSG:4326'); + + /** + * @type {function(new: ol.renderer.Map, Element, ol.Map)} + */ + this.rendererConstructor = ol.renderer.Map; + + /** + * @type {Array.} + */ + var rendererHints; + if (goog.isDef(mapOptionsLiteral.renderers)) { + rendererHints = mapOptionsLiteral.renderers; + } else if (goog.isDef(mapOptionsLiteral.renderer)) { + rendererHints = [mapOptionsLiteral.renderer]; + } else { + rendererHints = ol.DEFAULT_RENDERER_HINTS; + } + + var i, rendererHint; + for (i = 0; i < rendererHints.length; ++i) { + rendererHint = rendererHints[i]; + if (rendererHint == ol.RendererHint.DOM) { + if (ol.ENABLE_DOM && ol.renderer.dom.isSupported()) { + this.rendererConstructor = ol.renderer.dom.Map; + break; + } + } else if (rendererHint == ol.RendererHint.WEBGL) { + if (ol.ENABLE_WEBGL && ol.renderer.webgl.isSupported()) { + this.rendererConstructor = ol.renderer.webgl.Map; + break; + } + } + } + +}; + + +/** + * @private + * @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options literal. + * @return {ol.Collection} Interactions. + */ +ol.MapOptions.createInteractions_ = function(mapOptionsLiteral) { + + // FIXME this should be a configuration option + var centerConstraint = ol.interaction.CenterConstraint.snapToPixel; + var resolutionConstraint = + ol.interaction.ResolutionConstraint.createSnapToPower( + Math.exp(Math.log(2) / 8), ol.Projection.EPSG_3857_HALF_SIZE / 128); + var rotationConstraint = ol.interaction.RotationConstraint.none; + var constraints = new ol.interaction.Constraints( + centerConstraint, resolutionConstraint, rotationConstraint); + + var interactions = new ol.Collection(); + + var rotate = goog.isDef(mapOptionsLiteral.rotate) ? + mapOptionsLiteral.rotate : true; + if (rotate) { + interactions.push(new ol.interaction.AltDragRotate(constraints)); + } + + var doubleClickZoom = goog.isDef(mapOptionsLiteral.doubleClickZoom) ? + mapOptionsLiteral.doubleClickZoom : true; + if (doubleClickZoom) { + interactions.push(new ol.interaction.DblClickZoom(constraints)); + } + + var dragPan = goog.isDef(mapOptionsLiteral.dragPan) ? + mapOptionsLiteral.dragPan : true; + if (dragPan) { + interactions.push(new ol.interaction.DragPan(constraints)); + } + + var keyboard = goog.isDef(mapOptionsLiteral.keyboard) ? + mapOptionsLiteral.keyboard : true; + var keyboardPanOffset = goog.isDef(mapOptionsLiteral.keyboardPanOffset) ? + mapOptionsLiteral.keyboardPanOffset : 80; + if (keyboard) { + interactions.push( + new ol.interaction.KeyboardPan(constraints, keyboardPanOffset)); + interactions.push(new ol.interaction.KeyboardZoom(constraints)); + } + + var mouseWheelZoom = goog.isDef(mapOptionsLiteral.mouseWheelZoom) ? + mapOptionsLiteral.mouseWheelZoom : true; + if (mouseWheelZoom) { + interactions.push(new ol.interaction.MouseWheelZoom(constraints)); + } + + var shiftDragZoom = goog.isDef(mapOptionsLiteral.shiftDragZoom) ? + mapOptionsLiteral.shiftDragZoom : true; + if (shiftDragZoom) { + interactions.push(new ol.interaction.ShiftDragZoom(constraints)); + } + + return interactions; + +}; + + +/** + * @private + * @param {ol.Projection|string|undefined} projection Projection. + * @param {string} defaultCode Default code. + * @return {ol.Projection} Projection. + */ +ol.MapOptions.createProjection_ = function(projection, defaultCode) { + if (!goog.isDefAndNotNull(projection)) { + return ol.Projection.getFromCode(defaultCode); + } else if (goog.isString(projection)) { + return ol.Projection.getFromCode(projection); + } else { + goog.asserts.assert(projection instanceof ol.Projection); + return projection; + } +};