--- a/pngtile/wsgi.py Wed Jan 06 16:45:33 2010 +0200
+++ b/pngtile/wsgi.py Wed Jan 06 17:07:24 2010 +0200
@@ -61,6 +61,11 @@
<body>
<div id="wrapper">
<div id="viewport" style="width: 100%%; height: 100%%">
+ <div class="overlay">
+ <input type="button" id="btn-zoom-in" value="Zoom In" />
+ <input type="button" id="btn-zoom-out" value="Zoom Out" />
+ </div>
+
<div class="substrate"></div>
</div>
</div>
--- a/static/style.css Wed Jan 06 16:45:33 2010 +0200
+++ b/static/style.css Wed Jan 06 17:07:24 2010 +0200
@@ -18,13 +18,23 @@
background-color: #E5E3DF;
}
-#substrate {
- position: absolute;
- top: 0px; left: 0px;
-}
-
#viewport img {
position: absolute;
border: none;
}
+/** XXX: doesn't apply? * /
+#substrate {
+ position: absolute;
+ top: 0px; left: 0px;
+} */
+
+
+.overlay {
+ position: absolute;
+
+ padding: 15px;
+
+ z-index: 1000;
+}
+
--- a/static/tiles2.js Wed Jan 06 16:45:33 2010 +0200
+++ b/static/tiles2.js Wed Jan 06 17:07:24 2010 +0200
@@ -70,6 +70,16 @@
Event.observe(this.substrate, "mousewheel", this.on_mousewheel.bindAsEventListener(this));
Event.observe(this.substrate, "DOMMouseScroll", this.on_mousewheel.bindAsEventListener(this)); // mozilla
Event.observe(document, "resize", this.on_resize.bindAsEventListener(this));
+
+ // zoom buttons
+ this.btn_zoom_in = $("btn-zoom-in");
+ this.btn_zoom_out = $("btn-zoom-out");
+
+ if (this.btn_zoom_in)
+ Event.observe(this.btn_zoom_in, "click", this.zoom_in.bindAsEventListener(this));
+
+ if (this.btn_zoom_out)
+ Event.observe(this.btn_zoom_out, "click", this.zoom_out.bindAsEventListener(this));
// set viewport size
this.update_size();
@@ -244,6 +254,24 @@
);
},
+ // zoom à la delta, keeping the view centered
+ zoom_centered: function (delta) {
+ return this.zoom_center_to(
+ this.scroll_x + this.center_offset_x,
+ this.scroll_y + this.center_offset_y,
+ delta
+ );
+ },
+
+ // zoom in one level, keeping the view centered
+ zoom_in: function () {
+ return this.zoom_centered(+1);
+ },
+
+ // zoom out one leve, keeping the view centered
+ zoom_out: function () {
+ return this.zoom_centered(-1);
+ },
/* update view/state to reflect reality */
@@ -313,8 +341,20 @@
this.zoom_timer = setTimeout(function () { zoom_old.disable()}, 1000);
}
+ // update UI
+ this.update_zoom_ui();
+
return true;
},
+
+ // keep the zoom buttons, if any, updated
+ update_zoom_ui: function () {
+ if (this.btn_zoom_in)
+ (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable();
+
+ if (this.btn_zoom_out)
+ (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable();
+ },
// ensure that all tiles that are currently visible are loaded
update_tiles: function() {