|
30
|
1 |
// A source of tile images of a specific width/height, zoom level range, and some other attributes
|
|
|
2 |
var Source = Class.create({
|
|
|
3 |
initialize: function (path, tile_width, tile_height, zoom_min, zoom_max) {
|
|
|
4 |
this.path = path;
|
|
|
5 |
this.tile_width = tile_width;
|
|
|
6 |
this.tile_height = tile_height;
|
|
|
7 |
this.zoom_min = zoom_min;
|
|
|
8 |
this.zoom_max = zoom_max;
|
|
|
9 |
|
|
|
10 |
this.refresh = false;
|
|
|
11 |
this.opt_key = this.opt_value = null;
|
|
|
12 |
},
|
|
|
13 |
|
|
|
14 |
// build a URL for the given tile image
|
|
|
15 |
build_url: function (col, row, zl, sw, sh) {
|
|
|
16 |
// two-bit hash (0-4) based on the (col, row)
|
|
|
17 |
var hash = ( (col % 2) << 1 | (row % 2) ) + 1;
|
|
|
18 |
|
|
|
19 |
// the subdomain to use
|
|
|
20 |
var subdomain = "";
|
|
|
21 |
|
|
|
22 |
if (0)
|
|
|
23 |
subdomain = "tile" + hash + ".";
|
|
|
24 |
|
|
|
25 |
// the (x, y) co-ordinates
|
|
|
26 |
var x = col * this.tile_width;
|
|
|
27 |
var y = row * this.tile_height;
|
|
|
28 |
|
|
34
|
29 |
var url = this.path + "?x=" + x + "&y=" + y + "&zoom=" + zl + "&sw=" + sw + "&sh=" + sh;
|
|
30
|
30 |
|
|
|
31 |
if (this.refresh)
|
|
|
32 |
url += "&ts=" + new Date().getTime();
|
|
|
33 |
|
|
|
34 |
if (this.opt_key && this.opt_value)
|
|
|
35 |
url += "&" + this.opt_key + "=" + this.opt_value;
|
|
|
36 |
|
|
|
37 |
return url;
|
|
|
38 |
},
|
|
|
39 |
});
|
|
|
40 |
|
|
|
41 |
// a viewport that contains a substrate which contains several zoom layers which contain many tiles
|
|
|
42 |
var Viewport = Class.create({
|
|
|
43 |
initialize: function (source, viewport_id) {
|
|
|
44 |
this.source = source;
|
|
|
45 |
|
|
|
46 |
this.id = viewport_id;
|
|
|
47 |
this.div = $(viewport_id);
|
|
|
48 |
this.substrate = this.div.down("div.substrate");
|
|
|
49 |
|
|
|
50 |
// the stack of zoom levels
|
|
|
51 |
this.zoom_layers = [];
|
|
|
52 |
|
|
|
53 |
// pre-populate the stack
|
|
|
54 |
for (var zoom_level = source.zoom_min; zoom_level <= source.zoom_max; zoom_level++) {
|
|
|
55 |
var zoom_layer = new ZoomLayer(source, zoom_level);
|
|
|
56 |
|
|
|
57 |
this.substrate.appendChild(zoom_layer.div);
|
|
|
58 |
this.zoom_layers[zoom_level] = zoom_layer;
|
|
|
59 |
}
|
|
|
60 |
|
|
|
61 |
// make the substrate draggable
|
|
|
62 |
this.draggable = new Draggable(this.substrate, {
|
|
|
63 |
onStart: this.on_scroll_start.bind(this),
|
|
|
64 |
onDrag: this.on_scroll_move.bind(this),
|
|
|
65 |
onEnd: this.on_scroll_end.bind(this),
|
|
|
66 |
});
|
|
|
67 |
|
|
|
68 |
// event handlers
|
|
|
69 |
Event.observe(this.substrate, "dblclick", this.on_dblclick.bindAsEventListener(this));
|
|
|
70 |
Event.observe(this.substrate, "mousewheel", this.on_mousewheel.bindAsEventListener(this));
|
|
|
71 |
Event.observe(this.substrate, "DOMMouseScroll", this.on_mousewheel.bindAsEventListener(this)); // mozilla
|
|
|
72 |
Event.observe(document, "resize", this.on_resize.bindAsEventListener(this));
|
|
32
|
73 |
|
|
|
74 |
// set viewport size
|
|
30
|
75 |
this.update_size();
|
|
32
|
76 |
|
|
|
77 |
// initial location?
|
|
|
78 |
if (document.location.hash) {
|
|
|
79 |
// x:y:z tuple
|
|
|
80 |
var pt = document.location.hash.substr(1).split(":");
|
|
|
81 |
|
|
|
82 |
// unpack
|
|
|
83 |
var cx = 0, cy = 0, z = 0;
|
|
|
84 |
|
|
|
85 |
if (pt.length) cx = parseInt(pt.shift());
|
|
|
86 |
if (pt.length) cy = parseInt(pt.shift());
|
|
|
87 |
if (pt.length) z = parseInt(pt.shift());
|
|
30
|
88 |
|
|
32
|
89 |
// initial view
|
|
|
90 |
this.zoom_center_to(cx, cy, z);
|
|
|
91 |
|
|
|
92 |
} else {
|
|
|
93 |
// this sets the scroll offsets, zoom level, and loads the tiles
|
|
|
94 |
this.zoom_to(0, 0, 0);
|
|
|
95 |
}
|
|
30
|
96 |
},
|
|
|
97 |
|
|
|
98 |
/* event handlers */
|
|
|
99 |
|
|
|
100 |
// window resized
|
|
|
101 |
on_resize: function (ev) {
|
|
|
102 |
this.update_size();
|
|
|
103 |
this.update_tiles();
|
|
|
104 |
},
|
|
|
105 |
|
|
|
106 |
// double-click handler
|
|
|
107 |
on_dblclick: function (ev) {
|
|
|
108 |
var offset = this.event_offset(ev);
|
|
|
109 |
|
|
|
110 |
this.zoom_center_to(
|
|
|
111 |
this.scroll_x + offset.x,
|
|
|
112 |
this.scroll_y + offset.y,
|
|
|
113 |
1 // zoom in
|
|
|
114 |
);
|
|
|
115 |
},
|
|
|
116 |
|
|
|
117 |
// mousewheel handler
|
|
|
118 |
on_mousewheel: function (ev) {
|
|
|
119 |
// this works in very weird ways, so it's based on code from http://adomas.org/javascript-mouse-wheel/
|
|
|
120 |
// (it didn't include any license, so this is written out manually)
|
|
|
121 |
var delta;
|
|
|
122 |
|
|
|
123 |
// this is browser-dependant...
|
|
|
124 |
if (ev.wheelDelta) {
|
|
|
125 |
// IE + Opera
|
|
|
126 |
delta = ev.wheelDelta;
|
|
|
127 |
|
|
|
128 |
if (window.opera) {
|
|
|
129 |
// Opera, but apparently not newer versions?
|
|
|
130 |
//delta = -delta;
|
|
|
131 |
}
|
|
|
132 |
|
|
|
133 |
} else if (ev.detail) {
|
|
|
134 |
// Mozilla
|
|
|
135 |
delta = -ev.detail;
|
|
|
136 |
|
|
|
137 |
} else {
|
|
|
138 |
// mousewheel not supported...
|
|
|
139 |
return;
|
|
|
140 |
|
|
|
141 |
}
|
|
|
142 |
|
|
|
143 |
// don't scroll the page
|
|
|
144 |
if (ev.preventDefault)
|
|
|
145 |
ev.preventDefault();
|
|
|
146 |
|
|
|
147 |
// delta > 0 : scroll up, zoom in
|
|
|
148 |
// delta < 0 : scroll down, zoom out
|
|
|
149 |
delta = delta < 0 ? -1 : 1;
|
|
|
150 |
|
|
|
151 |
// Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work
|
|
|
152 |
|
|
|
153 |
// absolute location of the cursor
|
|
|
154 |
var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX);
|
|
|
155 |
var y = parseInt(ev.target.style.top) + (ev.layerY ? ev.layerY : ev.offsetY);
|
|
|
156 |
|
|
|
157 |
// zoom \o/
|
|
|
158 |
this.zoom_center_to(x, y, delta);
|
|
|
159 |
},
|
|
|
160 |
|
|
|
161 |
// substrate scroll was started
|
|
|
162 |
on_scroll_start: function (ev) {
|
|
|
163 |
|
|
|
164 |
},
|
|
|
165 |
|
|
|
166 |
// substrate was scrolled, update scroll_{x,y}, and then update tiles after 100ms
|
|
|
167 |
on_scroll_move: function (ev) {
|
|
|
168 |
this.update_scroll();
|
|
|
169 |
this.update_after_timeout();
|
|
|
170 |
},
|
|
|
171 |
|
|
|
172 |
// substrate scroll was ended, update tiles now
|
|
|
173 |
on_scroll_end: function (ev) {
|
|
|
174 |
this.update_now();
|
|
|
175 |
},
|
|
|
176 |
|
|
|
177 |
/* get state */
|
|
|
178 |
|
|
|
179 |
// return the absolute (x, y) coords of the given event inside the viewport
|
|
|
180 |
event_offset: function (ev) {
|
|
|
181 |
var offset = this.div.cumulativeOffset();
|
|
|
182 |
|
|
|
183 |
return {
|
|
|
184 |
x: ev.pointerX() - offset.left,
|
|
|
185 |
y: ev.pointerY() - offset.top
|
|
|
186 |
};
|
|
|
187 |
},
|
|
|
188 |
|
|
|
189 |
/* modify state */
|
|
|
190 |
|
|
|
191 |
// scroll the view to place the given absolute (x, y) co-ordinate at the top left
|
|
|
192 |
scroll_to: function (x, y) {
|
|
|
193 |
// update it via the style
|
|
|
194 |
this.substrate.style.top = "-" + y + "px";
|
|
|
195 |
this.substrate.style.left = "-" + x + "px";
|
|
|
196 |
|
|
|
197 |
// update these as well
|
|
|
198 |
this.scroll_x = x;
|
|
|
199 |
this.scroll_y = y;
|
|
|
200 |
},
|
|
|
201 |
|
|
|
202 |
// scroll the view to place the given absolute (x, y) co-ordinate at the center
|
|
|
203 |
scroll_center_to: function (x, y) {
|
|
|
204 |
return this.scroll_to(
|
|
|
205 |
x - this.center_offset_x,
|
|
|
206 |
y - this.center_offset_y
|
|
|
207 |
);
|
|
|
208 |
},
|
|
|
209 |
|
|
|
210 |
// zoom à la delta such that the given (zoomed) absolute (x, y) co-ordinates will be at the top left
|
|
|
211 |
zoom_scaled: function (x, y, delta) {
|
|
|
212 |
if (!this.update_zoom(delta))
|
|
|
213 |
return false;
|
|
|
214 |
|
|
|
215 |
// scroll to the new position
|
|
|
216 |
this.scroll_to(x, y);
|
|
|
217 |
|
|
|
218 |
// update view
|
|
|
219 |
// XXX: ...
|
|
|
220 |
this.update_after_timeout();
|
|
|
221 |
|
|
|
222 |
return true;
|
|
|
223 |
},
|
|
|
224 |
|
|
|
225 |
// zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the top left
|
|
|
226 |
zoom_to: function (x, y, delta) {
|
|
|
227 |
return this.zoom_scaled(
|
|
|
228 |
scaleByZoomDelta(x, delta),
|
|
|
229 |
scaleByZoomDelta(y, delta),
|
|
|
230 |
delta
|
|
|
231 |
);
|
|
|
232 |
},
|
|
|
233 |
|
|
|
234 |
// zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the center
|
|
|
235 |
zoom_center_to: function (x, y, delta) {
|
|
|
236 |
return this.zoom_scaled(
|
|
|
237 |
scaleByZoomDelta(x, delta) - this.center_offset_x,
|
|
|
238 |
scaleByZoomDelta(y, delta) - this.center_offset_y,
|
|
|
239 |
delta
|
|
|
240 |
);
|
|
|
241 |
},
|
|
|
242 |
|
|
|
243 |
|
|
|
244 |
/* update view/state to reflect reality */
|
|
|
245 |
|
|
|
246 |
// figure out the viewport dimensions
|
|
|
247 |
update_size: function () {
|
|
|
248 |
this.view_width = this.div.getWidth();
|
|
|
249 |
this.view_height = this.div.getHeight();
|
|
|
250 |
|
|
|
251 |
this.center_offset_x = Math.floor(this.view_width / 2);
|
|
|
252 |
this.center_offset_y = Math.floor(this.view_height / 2);
|
|
|
253 |
},
|
|
|
254 |
|
|
|
255 |
// figure out the scroll offset as absolute pixel co-ordinates at the top left
|
|
|
256 |
update_scroll: function() {
|
|
|
257 |
this.scroll_x = -parseInt(this.substrate.style.left);
|
|
|
258 |
this.scroll_y = -parseInt(this.substrate.style.top);
|
|
|
259 |
},
|
|
|
260 |
|
|
|
261 |
// wiggle the ZoomLevels around to match the current zoom level
|
|
|
262 |
update_zoom: function(delta) {
|
|
|
263 |
if (!this.zoom_layer) {
|
|
|
264 |
// first zoom operation
|
|
|
265 |
|
|
|
266 |
// is the new zoom level valid?
|
|
|
267 |
if (!this.zoom_layers[delta])
|
|
|
268 |
return false;
|
|
|
269 |
|
|
|
270 |
// set the zoom layyer
|
|
|
271 |
this.zoom_layer = this.zoom_layers[delta];
|
|
|
272 |
|
|
|
273 |
// enable it
|
|
|
274 |
this.zoom_layer.enable(11);
|
|
|
275 |
|
|
|
276 |
// no need to .update_tiles or anything like that
|
|
|
277 |
|
|
|
278 |
} else {
|
|
|
279 |
// is the new zoom level valid?
|
|
|
280 |
if (!this.zoom_layers[this.zoom_layer.level + delta])
|
|
|
281 |
return false;
|
|
|
282 |
|
|
|
283 |
var zoom_old = this.zoom_layer;
|
|
|
284 |
var zoom_new = this.zoom_layers[this.zoom_layer.level + delta];
|
|
|
285 |
|
|
|
286 |
// XXX: ugly hack
|
|
|
287 |
if (this.zoom_timer) {
|
|
|
288 |
clearTimeout(this.zoom_timer);
|
|
|
289 |
this.zoom_timer = null;
|
|
|
290 |
}
|
|
|
291 |
|
|
|
292 |
// get other zoom layers out of the way
|
|
|
293 |
this.zoom_layers.each(function (zl) {
|
|
|
294 |
zl.disable();
|
|
|
295 |
});
|
|
|
296 |
|
|
|
297 |
// update the zoom layer
|
|
|
298 |
this.zoom_layer = zoom_new;
|
|
|
299 |
|
|
|
300 |
// apply new z-indexes, preferr the current one over the new one
|
|
|
301 |
zoom_new.enable(11);
|
|
|
302 |
zoom_old.enable(10);
|
|
|
303 |
|
|
|
304 |
// resize the tiles in the two zoom layers
|
|
|
305 |
zoom_new.update_tiles(zoom_new.level);
|
|
|
306 |
zoom_old.update_tiles(zoom_old.level);
|
|
|
307 |
|
|
|
308 |
// XXX: ugly hack
|
|
|
309 |
this.zoom_timer = setTimeout(function () { zoom_old.disable()}, 1000);
|
|
|
310 |
}
|
|
|
311 |
|
|
|
312 |
return true;
|
|
|
313 |
},
|
|
|
314 |
|
|
|
315 |
// ensure that all tiles that are currently visible are loaded
|
|
|
316 |
update_tiles: function() {
|
|
|
317 |
// short names for some vars...
|
|
|
318 |
var x = this.scroll_x;
|
|
|
319 |
var y = this.scroll_y;
|
|
|
320 |
var sw = this.view_width;
|
|
|
321 |
var sh = this.view_height;
|
|
|
322 |
var tw = this.source.tile_width;
|
|
|
323 |
var th = this.source.tile_height;
|
|
|
324 |
var zl = this.zoom_layer.level;
|
|
|
325 |
|
|
|
326 |
// figure out what set of columns are visible
|
|
|
327 |
var start_col = Math.max(0, Math.floor(x / tw));
|
|
|
328 |
var start_row = Math.max(0, Math.floor(y / th));
|
|
|
329 |
var end_col = Math.floor((x + sw) / tw);
|
|
|
330 |
var end_row = Math.floor((y + sh) / th);
|
|
|
331 |
|
|
|
332 |
// loop through all those tiles
|
|
|
333 |
for (var col = start_col; col <= end_col; col++) {
|
|
|
334 |
for (var row = start_row; row <= end_row; row++) {
|
|
|
335 |
// the tile's id
|
|
|
336 |
var id = "tile_" + this.zoom_layer.level + "_" + col + "_" + row;
|
|
|
337 |
|
|
|
338 |
// does the element exist already?
|
|
|
339 |
var t = $(id);
|
|
|
340 |
|
|
|
341 |
if (!t) {
|
|
|
342 |
// build a new tile
|
|
|
343 |
t = Builder.node("img", {
|
|
|
344 |
src: this.source.build_url(col, row, zl, sw, sh),
|
|
|
345 |
id: id,
|
|
|
346 |
title: "(" + col + ", " + row + ")",
|
|
|
347 |
// style set later
|
|
|
348 |
}
|
|
|
349 |
);
|
|
|
350 |
|
|
|
351 |
// set the CSS style stuff
|
|
|
352 |
t.style.top = th * row;
|
|
|
353 |
t.style.left = tw * col;
|
|
|
354 |
t.style.display = "none";
|
|
|
355 |
|
|
|
356 |
// wait for it to load
|
|
|
357 |
Event.observe(t, "load", _tile_loaded.bindAsEventListener(t));
|
|
|
358 |
|
|
|
359 |
// store the col/row
|
|
|
360 |
t.__col = col;
|
|
|
361 |
t.__row = row;
|
|
|
362 |
|
|
|
363 |
// add it to the zoom layer
|
|
|
364 |
this.zoom_layer.add_tile(t);
|
|
|
365 |
|
|
|
366 |
} else if (this.source.reload) {
|
|
|
367 |
// force the tile to reload
|
|
|
368 |
touch_tile(t, col, row);
|
|
|
369 |
|
|
|
370 |
}
|
|
|
371 |
}
|
|
|
372 |
}
|
|
|
373 |
|
|
|
374 |
// update the link-to-this-page thing
|
|
32
|
375 |
document.location.hash = "#" + (this.scroll_x + this.center_offset_x) + ":" + (this.scroll_y + this.center_offset_y) + ":" + this.zoom_layer.level;
|
|
30
|
376 |
},
|
|
|
377 |
|
|
|
378 |
// do update_tiles after 100ms, unless we are called again
|
|
|
379 |
update_after_timeout: function () {
|
|
|
380 |
this._update_idle = false;
|
|
|
381 |
|
|
|
382 |
if (this._update_timeout)
|
|
|
383 |
clearTimeout(this._update_timeout);
|
|
|
384 |
|
|
|
385 |
this._update_timeout = setTimeout(this._update_timeout_trigger.bind(this), 100);
|
|
|
386 |
},
|
|
|
387 |
|
|
|
388 |
_update_timeout_trigger: function () {
|
|
|
389 |
this._update_idle = true;
|
|
|
390 |
|
|
|
391 |
this.update_tiles();
|
|
|
392 |
},
|
|
|
393 |
|
|
|
394 |
// call update_tiles if it hasn't been called due to update_after_timeout
|
|
|
395 |
update_now: function () {
|
|
|
396 |
if (this._update_timeout)
|
|
|
397 |
clearTimeout(this._update_timeout);
|
|
|
398 |
|
|
|
399 |
if (!this._update_idle)
|
|
|
400 |
this.update_tiles();
|
|
|
401 |
},
|
|
|
402 |
|
|
|
403 |
});
|
|
|
404 |
|
|
|
405 |
// used by Viewport.update_tiles to make a tile visible after it has loaded
|
|
|
406 |
function _tile_loaded (ev) {
|
|
|
407 |
this.style.display = "block";
|
|
|
408 |
}
|
|
|
409 |
|
|
|
410 |
// a zoom layer containing the tiles for one zoom level
|
|
|
411 |
var ZoomLayer = Class.create({
|
|
|
412 |
initialize: function (source, zoom_level) {
|
|
|
413 |
this.source = source;
|
|
|
414 |
this.level = zoom_level;
|
|
|
415 |
this.div = Builder.node("div", { id: "zl_" + this.level, style: "position: relative; display: none;"});
|
|
|
416 |
|
|
|
417 |
// our tiles
|
|
|
418 |
this.tiles = [];
|
|
|
419 |
},
|
|
|
420 |
|
|
|
421 |
// add a tile to this zoom layer
|
|
|
422 |
add_tile: function (tile) {
|
|
|
423 |
this.div.appendChild(tile);
|
|
|
424 |
this.tiles.push(tile);
|
|
|
425 |
},
|
|
|
426 |
|
|
|
427 |
// make this zoom layer visible with the given z-index
|
|
|
428 |
enable: function (z_index) {
|
|
|
429 |
this.div.style.zIndex = z_index;
|
|
|
430 |
this.div.show();
|
|
|
431 |
},
|
|
|
432 |
|
|
|
433 |
// hide this zoom layer
|
|
|
434 |
disable: function (z_index) {
|
|
|
435 |
this.div.hide();
|
|
|
436 |
},
|
|
|
437 |
|
|
|
438 |
// update the tiles in this zoom layer so that they are in the correct position and of the correct size when
|
|
|
439 |
// viewed with the given zoom level
|
|
|
440 |
update_tiles: function (zoom_level) {
|
|
|
441 |
var zd = zoom_level - this.level;
|
|
|
442 |
|
|
|
443 |
var tw = scaleByZoomDelta(this.source.tile_width, zd);
|
|
|
444 |
var th = scaleByZoomDelta(this.source.tile_height, zd);
|
|
|
445 |
|
|
|
446 |
var tiles = this.tiles;
|
|
|
447 |
var tiles_len = tiles.length;
|
|
|
448 |
var t, ts;
|
|
|
449 |
|
|
|
450 |
for (var i = 0; i < tiles_len; i++) {
|
|
|
451 |
t = tiles[i];
|
|
|
452 |
ts = t.style;
|
|
|
453 |
|
|
|
454 |
ts.width = tw;
|
|
|
455 |
ts.height = th;
|
|
|
456 |
ts.top = th*t.__row;
|
|
|
457 |
ts.left = tw*t.__col;
|
|
|
458 |
}
|
|
|
459 |
},
|
|
|
460 |
|
|
|
461 |
|
|
|
462 |
|
|
|
463 |
});
|
|
|
464 |
|
|
|
465 |
// scale the given co-ordinate by a zoom delta. If we zoom in (dz > 0), n will become larger, and if we zoom
|
|
|
466 |
// out (dz < 0), n will become smaller.
|
|
|
467 |
function scaleByZoomDelta (n, dz) {
|
|
|
468 |
if (dz > 0)
|
|
|
469 |
return n << dz;
|
|
|
470 |
else
|
|
|
471 |
return n >> -dz;
|
|
|
472 |
}
|
|
|
473 |
|