Permalink
Browse files

add show-hide example, address #59

  • Loading branch information...
1 parent 5e1066e commit 2ecff7904eb7f1308d886bd4866ec072ecd84e11 @RandomEtc RandomEtc committed Oct 7, 2011
Showing with 122 additions and 31 deletions.
  1. +6 −0 CHANGELOG
  2. +60 −0 examples/show-hide/index.html
  3. +28 −19 modestmaps.js
  4. +2 −2 modestmaps.min.js
  5. +1 −1 package.json
  6. +24 −8 src/map.js
  7. +1 −1 src/start.js
View
@@ -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
@@ -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>
View
@@ -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;
- var h = this.parent.offsetHeight;
- if (!w) {
- w = 640;
- this.parent.style.width = w + 'px';
- }
- if (!h) {
- h = 480;
- this.parent.style.height = h + 'px';
- }
- dimensions = new MM.Point(w, h);
+ 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;
@@ -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(function() { theMap.draw(); });
+ MM.getFrame(this.getRedraw());
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();
View
Oops, something went wrong.
View
@@ -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",
View
@@ -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(function() { theMap.draw(); });
+ MM.getFrame(this.getRedraw());
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();
View
@@ -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.

0 comments on commit 2ecff79

Please sign in to comment.