Merge pull request #516 from OpenGeoscience/map-rotation

Map rotation

Author: manthey

examples/common/css/examples.css

@@ -1,6 +1,12 @@
 html, body {
   height: 100%;
   width: 100%;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 #map {

examples/common/templates/index.jade

@@ -2,6 +2,7 @@ doctype html
 html(lang="en")
   head
     meta(charset="UTF-8")
+    link(rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon")
     title= title
 
     // Include common files

examples/tiles/index.jade

@@ -35,6 +35,16 @@ block append mainContent
     .form-group(title="The starting zoom level.  Changing this will also change the current zoom level.")
       label(for="map-zoom") Starting Zoom
       input#map-zoom.mapparam(param-name="zoom", placeholder="3")
+    .form-group(title="Allow the map to be rotated.")
+      label(for="map-allowRotation") Allow Rotation
+      select#map-allowRotation.mapparam(param-name="allowRotation", placeholder="true")
+        option(value="true") Yes
+        option(value="false") No
+        option(value="90") 90° increments
+        option(value="30") 30° increments
+        option(value="15") 15° increments
+        option(value="5") 5° increments
+        option(value="1") 1° increments
 
     .form-group(title="The url used to fetch tiles.  Use {x}, {y}, {z}, and {s} for templating.")
       label(for="layer-url") Tile URL

examples/tiles/main.css

@@ -1,13 +1,21 @@
-#map.debug-border .geo-tile-container img {
+#map.debug-border .geo-tile-container:before {
+    content: "";
     box-sizing: inherit;
     border: 4px solid rgba(0,0,0,0.25);
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
 }
 #map.debug-label .geo-tile-container:after {
     content: attr(tile-reference);
     position: absolute;
     top: 5px;
     left: 10px;
     font-size: 30px;
+    line-height: 1.3em;
     color: black;
 }
 @keyframes imgfadein {

examples/tiles/main.js

@@ -1,6 +1,8 @@
 // This example should be tried with different query strings.
 
 /* Many parameters can be adjusted via url query parameters:
+ *  allowRotation: 'true' to allow map rotation, 'false' to prevent it, or
+ *      allowable rotations in degrees.
  *  attribution: override the layer attribution text.
  *  clampBoundsX: 'true' to clamp movement in the horizontal direction.
  *  clampBoundsY: 'true' to clamp movement in the vertical direction.
@@ -19,6 +21,10 @@
  *  min: minimum zoom level (default is 0).
  *  max: maximum zoom level (default is 16 for maps, or the entire image for
  *      images).
+ *  maxBoundsBottom: maximum bounds bottom value.
+ *  maxBoundsLeft: maximum bounds left value.
+ *  maxBoundsRight: maximum bounds right value.
+ *  maxBoundsTop: maximum bounds top value.
  *  opacity: a css opacity value (typically a float from 0 to 1).
  *  projection: 'parallel' or 'projection' for the camera projection.
  *  renderer: 'vgl' (default), 'd3', 'null', or 'html'.  This picks the
@@ -27,6 +33,7 @@
  *  subdomains: a comma-separated string of subdomains to use in the {s} part
  *      of the url parameter.  If there are no commas in the string, each letter
  *      is used by itself (e.g., 'abc' is the same as 'a,b,c').
+ *  unitsPerPixel: set the units per pixel at zoom level 0.
  *  url: url to use for the map files.  Placeholders are allowed.  Default is
  *      http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png .  Other useful
  *      urls are are: /data/tilefancy.png
@@ -92,6 +99,7 @@ $(function () {
       x: -98.0,
       y: 39.5
     },
+    maxBounds: {},
     zoom: query.zoom !== undefined ? parseFloat(query.zoom) : 3
   };
   // Set the tile layer defaults to use the specified renderer and opacity
@@ -157,6 +165,21 @@ $(function () {
   if (query.min !== undefined) {
     mapParams.min = parseFloat(query.min);
   }
+  if (query.maxBoundsLeft !== undefined) {
+    mapParams.maxBounds.left = parseFloat(query.maxBoundsLeft);
+  }
+  if (query.maxBoundsRight !== undefined) {
+    mapParams.maxBounds.right = parseFloat(query.maxBoundsRight);
+  }
+  if (query.maxBoundsTop !== undefined) {
+    mapParams.maxBounds.top = parseFloat(query.maxBoundsTop);
+  }
+  if (query.maxBoundsBottom !== undefined) {
+    mapParams.maxBounds.bottom = parseFloat(query.maxBoundsBottom);
+  }
+  if (query.allowRotation) {
+    mapParams.allowRotation = get_allow_rotation(query.allowRotation);
+  }
   if (query.attribution !== undefined) {
     layerParams.attribution = query.attribution;
   }
@@ -187,6 +210,9 @@ $(function () {
     // maximum zoom
     mapParams.unitsPerPixel = Math.pow(2, mapParams.max);
   }
+  if (query.unitsPerPixel !== undefined) {
+    mapParams.unitsPerPixel = parseFloat(query.unitsPerPixel);
+  }
   // Populate boolean flags for the map
   $.each({
       clampBoundsX: 'clampBoundsX',
@@ -249,6 +275,10 @@ $(function () {
     var processedValue = (ctl.is('[type="checkbox"]') ?
         (value === 'true') : value);
     switch (param) {
+      case 'allowRotation':
+        mapParams.allowRotation = get_allow_rotation(value);
+        map.allowRotation(mapParams.allowRotation);
+        break;
       case 'debug':
         $('#map').toggleClass('debug-label', (
             value === 'true' || value === 'all'))
@@ -326,4 +356,18 @@ $(function () {
         window.location.pathname + '?' + $.param(query);
     window.history.replaceState(query, '', newurl);
   }
+
+  /* Return the value to set for the allowRotation parameter.
+   * @param value the value in the query string.
+   * @returns true, false, or a function.
+   */
+  function get_allow_rotation(value) {
+    if (!parseFloat(value)) {
+      return value !== 'false';
+    }
+    return function (rotation) {
+      var factor = 180 / Math.PI / parseFloat(value);
+      return Math.round(rotation * factor) / factor;
+    };
+  }
 });

examples/transitions/index.jade

@@ -6,4 +6,4 @@ block append mainContent
     button#elastic-to-moscow Elastic to Moscow
     button#bounce-to-istanbul Bounce to Istanbul
     button#fly-to-bern Fly to Bern
-
+    button#spin-to-budapest Spin to Budapest

examples/transitions/main.js

@@ -10,7 +10,7 @@ $(function () {
   });
 
   // Add an OSM layer
-  var osm = map.createLayer('osm',{
+  var osm = map.createLayer('osm', {
     baseUrl: 'http://otile1.mqcdn.com/tiles/1.0.0/map'
   });
 
@@ -63,4 +63,12 @@ $(function () {
       interp: d3.interpolateZoom
     });
   });
+
+  $('#spin-to-budapest').click(function () {
+    map.transition({
+      center: {x: 19.0514, y: 47.4925},
+      rotation: Math.PI * 2,
+      duration: 2000
+    });
+  });
 });

src/core/camera.js

@@ -7,11 +7,11 @@
    * camera provides a methods for converting between a map's coordinate system
    * to display pixel coordinates.
    *
-   * For the moment, all camera trasforms are assumed to be expressible as
+   * For the moment, all camera transforms are assumed to be expressible as
    * 4x4 matrices.  More general cameras may follow that break this assumption.
    *
    * The interface for the camera is relatively stable for "map-like" views,
-   * i.e. when the camera is pointing in the direction [0, 0, -1], and placed
+   * e.g. when the camera is pointing in the direction [0, 0, -1], and placed
    * above the z=0 plane.  More general view changes and events have not yet
    * been defined.
    *
@@ -27,11 +27,13 @@
    *   * {@link geo.event.camera.viewport} when the viewport changes
    *
    * By convention, protected methods do not update the internal matrix state,
-   * public methods do.  For now, there are two primary methods that are
-   * inteded to be used by external classes to mutate the internal state:
+   * public methods do.  There are a few primary methods that are intended to
+   * be used by external classes to mutate the internal state:
    *
    *   * bounds: Set the visible bounds (for initialization and zooming)
    *   * pan: Translate the camera in x/y by an offset (for panning)
+   *   * viewFromCenterSizeRotation: set the camera view based on a center
+   *        point, boundary size, and rotation angle.
    *
    * @class
    * @extends geo.object
@@ -521,22 +523,21 @@
      * @returns {object} bounds object
      */
     this._getBounds = function () {
-      var pt, bds = {};
-
-
-      // get lower bounds
-      pt = this.displayToWorld({
-        x: 0, y: this._viewport.height
+      var ul, ur, ll, lr, bds = {};
+
+      // get corners
+      ul = this.displayToWorld({x: 0, y: 0});
+      ur = this.displayToWorld({x: this._viewport.width, y: 0});
+      ll = this.displayToWorld({x: 0, y: this._viewport.height});
+      lr = this.displayToWorld({
+        x: this._viewport.width,
+        y: this._viewport.height
       });
-      bds.left = pt.x;
-      bds.bottom = pt.y;
 
-      // get upper bounds
-      pt = this.displayToWorld({
-        x: this._viewport.width, y: 0
-      });
-      bds.right = pt.x;
-      bds.top = pt.y;
+      bds.left = Math.min(ul.x, ur.x, ll.x, lr.x);
+      bds.bottom = Math.min(ul.y, ur.y, ll.y, lr.y);
+      bds.right = Math.max(ul.x, ur.x, ll.x, lr.x);
+      bds.top = Math.max(ul.y, ur.y, ll.y, lr.y);
 
       return bds;
     };
@@ -558,19 +559,45 @@
      * @return {this} Chainable
      */
     this._setBounds = function (bounds) {
+      var size = {
+        width: bounds.right - bounds.left,
+        height: bounds.top - bounds.bottom
+      };
+      var center = {
+        x: (bounds.left + bounds.right) / 2,
+        y: (bounds.bottom + bounds.top) / 2
+      };
+
+      this._viewFromCenterSizeRotation(center, size, 0);
+      return this;
+    };
 
+    /**
+     * Sets the view matrix so that the given world center is centered, at
+     * least a certain width and height are visible, and a rotation is applied.
+     * The resulting bounds may be larger in width or height than the values if
+     * the viewport is a different aspect ratio.
+     *
+     * @protected
+     * @param {object} center
+     * @param {number} center.x
+     * @param {number} center.y
+     * @param {object} size
+     * @param {number} size.width
+     * @param {number} size.height
+     * @param {number} rotation in clockwise radians.  Optional
+     * @return {this} Chainable
+     */
+    this._viewFromCenterSizeRotation = function (center, size, rotation) {
       var translate = geo.util.vec3AsArray(),
           scale = geo.util.vec3AsArray(),
           c_ar, v_ar, w, h;
 
-      bounds.near = bounds.near || 0;
-      bounds.far = bounds.far || 1;
-
       // reset view to the identity
       this._resetView();
 
-      w = Math.abs(bounds.right - bounds.left);
-      h = Math.abs(bounds.top - bounds.bottom);
+      w = Math.abs(size.width);
+      h = Math.abs(size.height);
       c_ar = w / h;
       v_ar = this._viewport.width / this._viewport.height;
 
@@ -589,12 +616,26 @@
       scale[2] = 1;
       this._scale(scale);
 
+      if (rotation) {
+        this._rotate(rotation);
+      }
+
       // translate to the new center.
-      translate[0] = -(bounds.left + bounds.right) / 2;
-      translate[1] = -(bounds.bottom + bounds.top) / 2;
+      translate[0] = -center.x;
+      translate[1] = -center.y;
       translate[2] = 0;
 
       this._translate(translate);
+
+      return this;
+    };
+
+    /**
+     * Public exposure of the viewFromCenterSizeRotation function.
+     */
+    this.viewFromCenterSizeRotation = function (center, size, rotation) {
+      this._viewFromCenterSizeRotation(center, size, rotation);
+      this._update();
       return this;
     };
 
@@ -624,6 +665,9 @@
      * @param {number} zoom The zoom scale to apply
      */
     this.zoom = function (zoom) {
+      if (zoom === 1) {
+        return;
+      }
       mat4.scale(this._view, this._view, [
           zoom,
           zoom,
@@ -632,6 +676,29 @@
       this._update();
     };
 
+    /**
+     * Rotate the view matrix by the given amount.
+     *
+     * @param {number} rotation Counter-clockwise rotation angle in radians.
+     * @param {object} center Center of rotation in world space coordinates.
+     * @param {vec3} axis acis of rotation.  Defaults to [0, 0, -1]
+     */
+    this._rotate = function (rotation, center, axis) {
+      if (!rotation) {
+        return;
+      }
+      axis = axis || [0, 0, -1];
+      if (!center) {
+        center = [0, 0, 0];
+      } else if (center.x !== undefined) {
+        center = [center.x || 0, center.y || 0, center.z || 0];
+      }
+      var invcenter = [-center[0], -center[1], -center[2]];
+      mat4.translate(this._view, this._view, center);
+      mat4.rotate(this._view, this._view, rotation, axis);
+      mat4.translate(this._view, this._view, invcenter);
+    };
+
     /**
      * Returns a CSS transform that converts (by default) from world coordinates
      * into display coordinates.  This allows users of this module to

src/core/event.js

@@ -32,7 +32,6 @@ geo.event = {};
 //
 // geo.event.update = 'geo_update';
 // geo.event.opacityUpdate = 'geo_opacityUpdate';
-// geo.event.layerToggle = 'geo_layerToggle';
 // geo.event.layerSelect = 'geo_layerSelect';
 // geo.event.layerUnselect = 'geo_layerUnselect';
 // geo.event.query = 'geo_query';
@@ -71,8 +70,8 @@ geo.event.zoom = 'geo_zoom';
 
 //////////////////////////////////////////////////////////////////////////////
 /**
- * Triggered when the map is rotated around the map center (pointing downward
- * so that positive angles are clockwise rotations).
+ * Triggered when the map is rotated around the current map center (pointing
+ * downward so that positive angles are clockwise rotations).
  *
  * @property {number} angle The angle of the rotation in radians
  */