add show-hide example, address #59

stamen · Oct 7, 2011 · 2ecff79 · 2ecff79
1 parent 5e1066e
commit 2ecff79
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 31 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -8,6 +8,12 @@ Following the semantic versioning recommendation best we can:
     minor version, and backwards incompatible API changes increment
     the major version." -- http://semver.org/
 
+v0.18.5
+- Address issue where display:none on parent affects size detection
+  (thanks @tmcw)
+- Remove arbitary default map size - parent size is used always unless
+  dimensions are specified. Use setSize to override at any time.
+
 v0.18.4
 - Fix Location.interpolate between the same location
 - Fix DragHandler - remove inertia code

diff --git a/examples/show-hide/index.html b/examples/show-hide/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>display: none; example</title>
+  <script type='text/javascript' src='../../modestmaps.js'></script>
+  <script type='text/javascript'>
+    window.onload = function() {
+      // "import" namespace
+      var MM = com.modestmaps;
+
+      // grab elements once for convenience
+      var parent = document.getElementById('map_div'),
+          toggle = document.getElementById('toggle');
+
+      // defaults to Google-style Mercator projection, so works
+      // out of the box with OpenStreetMap and friends:
+      var template = 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png';
+      var provider = new MM.TemplatedMapProvider(template);
+
+      // without a size, it will expand to fit the parent:
+      map = new MM.Map(parent, provider);
+      map.setZoom(4);
+
+      MM.addEvent(toggle, 'click', function(e) {
+        if (MM.getStyle(parent, 'display') == 'none') {
+          parent.style.display = 'block';
+          map.draw();
+        } else {
+          parent.style.display = 'none';
+        }
+        return MM.cancelEvent(e);
+      });
+    };
+  </script>
+  <style type='text/css'>
+    #map_div {
+      position:absolute;
+      left:0;
+      right:0;
+      top:0;
+      bottom:0;
+      display:none;
+    }
+
+    #toggle {
+      color:#fff;
+      font-size: 20px;
+      padding: 5px;
+      background:#111;
+      position:absolute;
+      top:0;
+      z-index:40;
+    }
+  </style>
+</head>
+<body>
+  <div id='map_div'></div>
+  <a href='#' id='toggle'>toggle map visibility</a>
+</body>
+</html>
diff --git a/modestmaps.js b/modestmaps.js
@@ -1,5 +1,5 @@
 /*!
- * Modest Maps JS v0.18.4
+ * Modest Maps JS v0.18.5
  * http://modestmaps.com/
  *
  * Copyright (c) 2011 Stamen Design, All Rights Reserved.
@@ -1317,17 +1317,10 @@ if (!com) {
         // if you don't specify dimensions we assume you want to fill the parent
         // unless the parent has no w/h, in which case we'll still use a default
         if (!dimensions) {
-            var w = this.parent.offsetWidth;
+            dimensions = new MM.Point(
-            var h = this.parent.offsetHeight;
+                this.parent.offsetWidth,
-            if (!w) {
+                this.parent.offsetHeight);
-                w = 640;
+            this.autoSize = true;
-                this.parent.style.width = w + 'px';
-            }
-            if (!h) {
-                h = 480;
-                this.parent.style.height = h + 'px';
-            }
-            dimensions = new MM.Point(w, h);
             // FIXME: listeners like this will stop the map being removed cleanly?
             // when does removeEvent get called?
             var theMap = this;
@@ -1340,6 +1333,7 @@ if (!com) {
             });
         }
         else {
+            this.autoSize = false;
             this.parent.style.width = Math.round(dimensions.x) + 'px';
             this.parent.style.height = Math.round(dimensions.y) + 'px';
         }
@@ -1410,6 +1404,8 @@ if (!com) {
 
         callbackManager: null,
         eventHandlers: null,
+
+        autoSize: null,
 
         toString: function() {
             return 'Map(#' + this.parent.id + ')';
@@ -1431,10 +1427,8 @@ if (!com) {
 
         // zooming
         zoomBy: function(zoomOffset) {
-            var theMap = this;
             this.coordinate = this.enforceLimits(this.coordinate.zoomBy(zoomOffset));
-
+            MM.getFrame(this.getRedraw());
-            MM.getFrame(function() { theMap.draw(); });
             this.dispatchCallback('zoomed', zoomOffset);
             return this;
         },
@@ -1455,27 +1449,25 @@ if (!com) {
 
         // panning
         panBy: function(dx, dy) {
-            var theMap = this;
             this.coordinate.column -= dx / this.provider.tileWidth;
             this.coordinate.row -= dy / this.provider.tileHeight;
 
             this.coordinate = this.enforceLimits(this.coordinate);
 
             // Defer until the browser is ready to draw.
-            MM.getFrame(function() { theMap.draw(); });
+            MM.getFrame(this.getRedraw());
             this.dispatchCallback('panned', [dx, dy]);
             return this;
         },
 
         /*
         panZoom: function(dx, dy, zoom) {
-            var theMap = this;
             this.coordinate.column -= dx / this.provider.tileWidth;
             this.coordinate.row -= dy / this.provider.tileHeight;
             this.coordinate = this.coordinate.zoomTo(zoom);
 
             // Defer until the browser is ready to draw.
-            MM.getFrame(function() { theMap.draw()});
+            MM.getFrame(this.getRedraw());
             this.dispatchCallback('panned', [dx, dy]);
             return this;
         },
@@ -1715,6 +1707,23 @@ if (!com) {
             // if we're in between zoom levels, we need to choose the nearest:
             var baseZoom = Math.round(this.coordinate.zoom);
 
+            // if we don't have dimensions, check the parent size
+            if (this.dimensions.x <= 0 || this.dimensions.y <= 0) {
+                if (this.autoSize) {
+                    // maybe the parent size has changed?
+                    var w = this.parent.offsetWidth,
+                        h = this.parent.offsetHeight
+                    this.dimensions = new MM.Point(w,h);
+                    if (w <= 0 || h <= 0) {
+                        return;
+                    }
+                }
+                else {
+                    // the issue can only be corrected with setSize
+                    return;
+                }
+            }
+
             // these are the top left and bottom right tile coordinates
             // we'll be loading everything in between:
             var startCoord = this.pointCoordinate(new MM.Point(0, 0)).zoomTo(baseZoom).container();

diff --git a/modestmaps.min.js b/modestmaps.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "modestmaps",
   "description": "a display and interaction library for tile-based maps",
-  "version": "0.18.4",
+  "version": "0.18.5",
   "author": {
     "name": "Tom Carden",
     "email": "tom@tom-carden.co.uk",

diff --git a/src/map.js b/src/map.js
@@ -39,7 +39,7 @@
             dimensions = new MM.Point(
                 this.parent.offsetWidth,
                 this.parent.offsetHeight);
-
+            this.autoSize = true;
             // FIXME: listeners like this will stop the map being removed cleanly?
             // when does removeEvent get called?
             var theMap = this;
@@ -52,6 +52,7 @@
             });
         }
         else {
+            this.autoSize = false;
             this.parent.style.width = Math.round(dimensions.x) + 'px';
             this.parent.style.height = Math.round(dimensions.y) + 'px';
         }
@@ -122,6 +123,8 @@
 
         callbackManager: null,
         eventHandlers: null,
+
+        autoSize: null,
 
         toString: function() {
             return 'Map(#' + this.parent.id + ')';
@@ -143,10 +146,8 @@
 
         // zooming
         zoomBy: function(zoomOffset) {
-            var theMap = this;
             this.coordinate = this.enforceLimits(this.coordinate.zoomBy(zoomOffset));
-
+            MM.getFrame(this.getRedraw());
-            MM.getFrame(function() { theMap.draw(); });
             this.dispatchCallback('zoomed', zoomOffset);
             return this;
         },
@@ -167,27 +168,25 @@
 
         // panning
         panBy: function(dx, dy) {
-            var theMap = this;
             this.coordinate.column -= dx / this.provider.tileWidth;
             this.coordinate.row -= dy / this.provider.tileHeight;
 
             this.coordinate = this.enforceLimits(this.coordinate);
 
             // Defer until the browser is ready to draw.
-            MM.getFrame(function() { theMap.draw(); });
+            MM.getFrame(this.getRedraw());
             this.dispatchCallback('panned', [dx, dy]);
             return this;
         },
 
         /*
         panZoom: function(dx, dy, zoom) {
-            var theMap = this;
             this.coordinate.column -= dx / this.provider.tileWidth;
             this.coordinate.row -= dy / this.provider.tileHeight;
             this.coordinate = this.coordinate.zoomTo(zoom);
 
             // Defer until the browser is ready to draw.
-            MM.getFrame(function() { theMap.draw()});
+            MM.getFrame(this.getRedraw());
             this.dispatchCallback('panned', [dx, dy]);
             return this;
         },
@@ -427,6 +426,23 @@
             // if we're in between zoom levels, we need to choose the nearest:
             var baseZoom = Math.round(this.coordinate.zoom);
 
+            // if we don't have dimensions, check the parent size
+            if (this.dimensions.x <= 0 || this.dimensions.y <= 0) {
+                if (this.autoSize) {
+                    // maybe the parent size has changed?
+                    var w = this.parent.offsetWidth,
+                        h = this.parent.offsetHeight
+                    this.dimensions = new MM.Point(w,h);
+                    if (w <= 0 || h <= 0) {
+                        return;
+                    }
+                }
+                else {
+                    // the issue can only be corrected with setSize
+                    return;
+                }
+            }
+
             // these are the top left and bottom right tile coordinates
             // we'll be loading everything in between:
             var startCoord = this.pointCoordinate(new MM.Point(0, 0)).zoomTo(baseZoom).container();

diff --git a/src/start.js b/src/start.js
@@ -1,5 +1,5 @@
 /*!
- * Modest Maps JS v0.18.4
+ * Modest Maps JS v0.18.5
  * http://modestmaps.com/
  *
  * Copyright (c) 2011 Stamen Design, All Rights Reserved.