Replace ol.createMap with friendlier ol.Map constructor

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);
+var map = new ol.Map(document.getElementById('map'), {
-map.setCenter(new ol.Coordinate(0, 0));
+  center: new ol.Coordinate(0, 0),
-map.setResolution(layer.getStore().getResolutions()[0]);
+  layers: new ol.Collection([layer]),
+  resolution: layer.getStore().getResolutions()[0]
+});

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();
+var domMap = new ol.Map(document.getElementById('domMap'), {
-layers.push(layer);
+  center: new ol.Coordinate(0, 0),
+  layers: new ol.Collection([layer]),
+  renderer: ol.RendererHint.DOM,
+  zoom: 0
+});
 
-var domMap = ol.createMap(
+var webglMap = new ol.Map(document.getElementById('webglMap'), {
-    document.getElementById('domMap'),
+  renderer: ol.RendererHint.WEBGL
-    {'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);
 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);

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(
+var layers = new ol.Collection([
-    ol.BingMapsStyle.AERIAL,
+  new ol.layer.BingMaps(
-    'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE');
+      ol.BingMapsStyle.AERIAL,
-var layer2 = new ol.layer.TileJSON(
+      'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE'),
-    'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp');
+  new ol.layer.TileJSON(
+      'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp')
+]);
 
-var layers = new ol.Collection([layer1, layer2]);
+var webglMap = new ol.Map(document.getElementById('webglMap'), {
-
+  center: ol.Projection.transformWithCodes(
-var webglMap = ol.createMap(
+      new ol.Coordinate(-77.93254999999999, 37.9555),
-    document.getElementById('webglMap'),
+      'EPSG:4326', 'EPSG:3857'),
-    {'layers': new ol.Collection([layer1, layer2])},
+  layers: layers,
-    ol.RendererHint.WEBGL);
+  renderer: ol.RendererHint.WEBGL,
-
+  zoom: 5
-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 domMap = ol.createMap(
+var domMap = new ol.Map(document.getElementById('domMap'), {
-    document.getElementById('domMap'),
+  renderer: ol.RendererHint.DOM
-    {},
+});
-    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);

src/ol/createmap.js

@@ -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.RendererHint>}
- */
-ol.DEFAULT_RENDERER_HINT = [
-  ol.RendererHint.WEBGL,
-  ol.RendererHint.DOM
-];
-
-
-/**
- * @param {Element} target Target.
- * @param {Object.<string, *>=} opt_values Values.
- * @param {ol.RendererHint|Array.<ol.RendererHint>=} 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.<ol.RendererHint>}
-   */
-  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;
-  }
-
-};

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
+ * @param {ol.MapOptionsLiteral} mapOptionsLiteral Map options literal.
- *     Renderer constructor.
- * @param {Object=} opt_values Values.
  * @param {goog.dom.ViewportSizeMonitor=} opt_viewportSizeMonitor
  *     Viewport size monitor.
  */
-ol.Map = function(
+ol.Map = function(container, mapOptionsLiteral, opt_viewportSizeMonitor) {
-    container, rendererConstructor, opt_values, 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(mapOptions.values);
-    this.setValues(opt_values);
-  }
 
   this.handleBrowserWindowResize();
 

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.RendererHint>}
+ */
+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.<string, *>}
+   */
+  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.<ol.RendererHint>}
+   */
+  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;
+  }
+};