]> git.openstreetmap.org Git - rails.git/blob - public/javascripts/tile.js
Changed the account page to have the editing functionality built in.
[rails.git] / public / javascripts / tile.js
1 // June 20th 2005 http://civicactions.net anselm@hook.org public domain version 0.5
2
3 //
4 // miscellaneous
5 //
6
7 var netscape = ( document.getElementById && !document.all ) || document.layers;
8 var defaultEngine = null; // xxx for firefox keyboard events.
9
10 var PI = 3.14159265358979323846;
11
12 var lat_range = PI, lon_range = PI;
13
14 //
15 // Utility - get div position - may not be accurate
16 //
17
18 function getCSSPositionX(parent) 
19 {
20     var offset = parent.x ? parseInt(parent.x) : 0;
21     offset += parent.style.left ? parseInt(parent.style.left) : 0;
22     for(var node = parent; node ; node = node.offsetParent ) 
23         { 
24                 offset += node.offsetLeft; 
25         }
26     return offset;
27 }
28
29 function getCSSPositionY(parent) 
30 {
31     var offset = parent.y ? parseInt(parent.y) : 0;
32     offset += parent.style.top ? parseInt(parent.style.top) : 0;
33     for(var node = parent; node ; node = node.offsetParent ) 
34         { 
35                 offset += node.offsetTop; 
36         }
37     return offset;
38 }
39
40 ///
41 /// initialize a new tile engine object
42 /// usage: var engine = new tile_engine_new(parentdiv,stylehints,wmssource,lon,lat,zoom,optional width, optional height)
43 ///
44 function tile_engine_new(parentname,hints,feedurl,url,lon,lat,zoom,w,h) 
45 {
46     // NW geocoder removed for now
47
48         this.timestamp = new Date().getTime();
49         this.urlAttr = new Array();
50
51     // NW Removed navigation buttons entirely for flexibility    
52
53     this.lonPerPixel = function()
54             { return (this.lon_quant/this.scale)/this.tilewidth; }
55
56     this.latPerPixel = function()
57             { return (this.lat_quant/this.scale)/this.tileheight; }
58
59     this.xToLon = function(x)
60             { return this.lon + (x-this.thewidth/2)*this.lonPerPixel(); } 
61
62     this.yToLat = function(y)
63             { return normallat(this.lat - (y-this.theheight/2)
64                                 *this.latPerPixel()); } 
65
66         this.lonToX = function (lon)
67                         { return ((lon-this.lon)/this.lonPerPixel()) + this.thewidth/2;}
68
69         this.latToY = function(lat)
70                         { return ((this.lat-mercatorlat(lat))/this.latPerPixel()) + 
71                                                         this.theheight/2; }
72
73
74     //
75     // it is possible that this collection is already in use - clean it
76     //
77     this.clean = function() 
78     { 
79                 /*
80         while( this.parent.hasChildNodes() ) 
81             this.parent.removeChild( this.parent.firstChild );
82                         */
83
84                 for(var ct=0; ct<this.parent.childNodes.length; ct++)
85                 {
86                         if(this.parent.childNodes[ct].id != "controls")
87                                 this.parent.removeChild(this.parent.childNodes[ct]);
88                 }
89
90         //
91         // build inner tile container for theoretical speed improvement?
92         // center in parent for simplicity of math
93         // size of inner container is irrelevant since overflow is enabled
94         //
95
96         if( this.dragcontainer ) 
97         {
98             this.tiles = document.createElement('div');
99             this.tiles.style.position = 'absolute';
100             this.tiles.style.left = this.displaywidth/2 + 'px';
101             this.tiles.style.top = this.displayheight/2 + 'px';
102             this.tiles.style.width = '16px';
103             this.tiles.style.height = '16px';
104             if( this.debug ) 
105             {
106                 this.tiles.style.border = 'dashed green 1px';
107             }
108             this.tiles.tile_engine = this;
109             this.parent.appendChild(this.tiles);
110
111         } 
112         else 
113         {
114             this.tiles = this.parent;
115         }
116     }
117
118     /// focus over specified lon/lat and zoom
119     /// user should call this.drag(0,0) after this to force an initial refresh
120     ///
121
122     this.performzoom = function(lon,lat,z) 
123     {
124         // setup for zoom
125         // this engine operates at * scale to try avoid tile errors thrashing 
126         // server cache
127         
128         this.scale = 1000000;
129         this.lon_min_clamp = -180 * this.scale;
130         this.lon_max_clamp = 180 * this.scale;
131         this.lat_min_clamp = -180 * this.scale; //t
132         this.lat_max_clamp = 180 * this.scale; //t
133         this.lon_start_tile = 180 * this.scale;
134         this.lat_start_tile = 90 * this.scale; //t
135         this.zoom_power = 2;
136         this.lon_quant = this.lon_start_tile;
137         this.lat_quant = this.lat_start_tile;
138         this.lon = lon;
139         this.lat = lat;
140
141         // operational lat - = lat due to quirks in our engine and quirks in o
142         // lon/lat design
143         lat = -lat;
144
145         // divide tile size until reach requested zoom
146         // trying to guarantee consistency so as to not thrash the server side tile cache
147         while(z > 0) 
148         {
149             this.lon_quant = this.lon_quant / this.zoom_power;
150             this.lat_quant = this.lat_quant / this.zoom_power;
151             z--;
152         }
153         this.lon_quant = Math.round( this.lon_quant );
154         this.lat_quant = Math.round( this.lat_quant );
155     
156         // get user requested exact lon/lat
157         this.lon_scaled = Math.round( lon * this.scale );
158         this.lat_scaled = Math.round( lat * this.scale );
159     
160
161
162         // convert requested exact lon/lat to quantized lon lat (rounding down 
163         // or up as best suits)
164         this.lon_round = Math.round( this.lon_scaled / this.lon_quant ) * 
165                 this.lon_quant;
166         this.lat_round = Math.round( this.lat_scaled / this.lat_quant ) * 
167                 this.lat_quant;
168     
169         //alert('lon_round=' + this.lon_round+ ' lat_round='+this.lat_round);
170
171         // calculate world extents [ this is the span of all tiles in lon/lat ]
172         this.lon_min = this.lon_round - this.lon_quant;
173         this.lon_max = this.lon_round + this.lon_quant;
174         this.lat_min = this.lat_round - this.lat_quant;
175         this.lat_max = this.lat_round + this.lat_quant;
176     
177         // set tiled region details [ this is the span of all tiles in pixels ]
178         this.centerx = 0;
179         this.centery = 0;
180         this.tilewidth = 256;
181         this.tileheight = 128;
182         this.left = -this.tilewidth;
183         this.right = this.tilewidth;
184         this.top = -this.tileheight;
185         this.bot = this.tileheight;
186
187
188         // adjust the current center position slightly to reflect exact lat/lon
189         // not rounded
190         this.centerx -= (this.lon_scaled-this.lon_round)/
191             (this.lon_max-this.lon_min)*(this.right-this.left);
192         this.centery -= (this.lat_scaled-this.lat_round)/
193             (this.lat_max-this.lat_min)*(this.bot-this.top);
194     }
195
196         this.update_perma_link = function() {
197                 // because we're using mercator
198                 updatelinks(this.lon,normallat(this.lat),this.zoom);
199         }
200
201     ///
202     /// draw the spanning lon/lat range
203     /// drag is simply the mouse delta in pixels
204     ///
205
206     this.drag = function(dragx,dragy) 
207     {
208                 var fred=true;
209
210         // move the drag offset
211         this.centerx += dragx;
212         this.centery += dragy;
213
214         // update where we think the user is actually focused
215         this.lon = ( this.lon_round - ( this.lon_max - this.lon_min ) / 
216             ( this.right - this.left ) * this.centerx ) / this.scale;
217         this.lat = - ( this.lat_round - ( this.lat_max - this.lat_min ) / 
218             ( this.bot - this.top ) * this.centery ) / this.scale;
219
220                 this.update_perma_link();
221
222         // show it
223         var helper = this.navhelp; 
224
225          // extend exposed sections
226         var dirty = false;
227         while( this.left + this.centerx > -this.displaywidth/2 && 
228                 this.lon_min > this.lon_min_clamp ) 
229         {
230             this.left -= this.tilewidth;
231             this.lon_min -= this.lon_quant;
232             dirty = true;
233         }
234         while( this.right + this.centerx < this.displaywidth/2 && 
235                 this.lon_max < this.lon_max_clamp ) 
236         {
237             this.right += this.tilewidth;
238             this.lon_max += this.lon_quant;
239             dirty = true;
240         }
241         while( this.top + this.centery > -this.displayheight/2 && 
242         this.lat_min > this.lat_min_clamp ) 
243         {
244             this.top -= this.tileheight;
245             this.lat_min -= this.lat_quant;
246             dirty = true;
247         }
248
249         while( this.bot + this.centery < this.displayheight/2 && 
250         this.lat_max < this.lat_max_clamp ) 
251         {
252             this.bot += this.tileheight;
253             this.lat_max += this.lat_quant;
254             dirty = true;
255         }
256
257
258         // prepare to walk the container and assure that all nodes are correct
259         var containerx;
260         var containery;
261
262         // in drag container mode we do not have to move the children all the 
263         // time
264         if( this.dragcontainer ) 
265         {
266             this.tiles.style.left = this.displaywidth / 2 + this.centerx + 'px';
267             this.tiles.style.top = this.displayheight / 2 + this.centery + 'px';
268             if( !dirty && this.tiles.hasChildNodes() ) 
269             {
270                 return;
271             }
272             containerx = this.left;
273             containery = this.top;
274         } 
275         else 
276         {
277             containerx = this.left + this.centerx;
278             containery = this.top + this.centery;
279         }
280
281         // walk all tiles and repair as needed
282         // xxx one bug is that it walks the _entire_ width and height... 
283         // not just visible.
284         // xxx this makes cleanup harder and perhaps a bitmap is better
285
286         var removehidden = 1;
287         var removecolumn = 0;
288         var removerow = 0;
289         var containeryreset = containery;
290
291         for( var x = this.lon_min; x < this.lon_max ; x+= this.lon_quant ) 
292         {
293             // will this row be visible in the next round?
294             if( removehidden ) 
295             {
296                 var rx = containerx + this.centerx;
297                 if( rx > this.displaywidth / 2 ) 
298                 {
299                     removerow = 1;
300                     // ideally i would truncate max width here
301                 } 
302                 else if( rx + this.tilewidth < - this.displaywidth / 2 ) 
303                 {
304                     removerow = 1;
305                 } 
306                 else 
307                 {
308                     removerow = 0;
309                 }
310             }
311
312             for( var y = this.lat_min; y < this.lat_max ; y+= this.lat_quant ) 
313             {
314                 // is this column visible?
315                 if( removehidden ) 
316                 {
317                     var ry = containery + this.centery;
318                     if( ry > this.displayheight / 2 ) 
319                     {
320                         removecolumn = 1;
321                     } 
322                     else if( ry + this.tileheight < - this.displayheight/2) 
323                     {
324                         removecolumn = 1;
325                     } 
326                     else 
327                     {
328                         removecolumn = 0;
329                     }
330                 }
331
332                 // convert to WMS compliant coordinate system
333                 var lt = x / this.scale;
334                 var rt = lt + this.lon_quant / this.scale;
335                 var tp = y / this.scale;
336                 var bt = tp + this.lat_quant / this.scale;
337                 var temp = bt;
338                 var bt = -tp;
339                 var tp = -temp;
340
341                 // modify for mercator-projected tiles: 
342                 tp = 180/PI * (2 * Math.atan(Math.exp(tp * PI / 180)) - PI / 2);
343                 bt = 180/PI * (2 * Math.atan(Math.exp(bt * PI / 180)) - PI / 2);
344                 
345                 // make a key
346                 var key = this.url + "?WIDTH="+(this.tilewidth)+"&HEIGHT="+
347                     (this.tileheight)+"&BBOX="+lt+","+tp+","+rt+","+bt;
348
349                 // see if our tile is already present
350                 var node = document.getElementById(key);
351
352                 // create if not present
353                 if(!node) 
354                 {
355                     if( this.debug > 0) 
356                     {
357                         node = document.createElement('div');
358                     } 
359                     else 
360                     {
361                         node = document.createElement('img');
362                     }
363                     node.id = key;
364                     node.className = 'tile';
365                     node.style.position = 'absolute';
366                     node.style.width = this.tilewidth + 'px';
367                     node.style.height = this.tileheight + 'px';
368                     node.style.left = containerx + 'px';
369                     node.style.top = containery + 'px';
370                     node.style.zIndex = 10; // to appear under the rss elements
371                     node.tile_engine = this;
372                     if( this.debug > 0) 
373                     {
374                         node.style.border = "1px solid yellow";
375                         node.innerHTML = key;
376                         if( this.debug > 1 ) 
377                         {
378                             var img = document.createElement('img');
379                             img.src = key;
380                             node.appendChild(img);
381                         }
382                     }
383
384                     var goURL = key + "&zoom=" + this.zoom; 
385                                                         
386                                     for(var k in this.urlAttr) 
387                                         {
388                                                 goURL += "&"+k+"="+this.urlAttr[k];
389                                         }
390                                 
391                                         node.src = goURL;
392
393                     node.alt = "loading tile..";
394                     node.style.color = "#ffffff";
395                     this.tiles.appendChild(node);
396                 }
397                 // adjust if using active style
398                 else if( !this.dragcontainer ) {
399                     node.style.left = containerx + 'px';
400                     node.style.top = containery + 'px';
401                 }
402
403                 containery += this.tileheight;
404             }
405             containery = containeryreset;
406             containerx += this.tilewidth;
407         }
408     }
409
410     this.zoomTo = function(zoom) 
411     {
412
413         this.zoom  = zoom;
414     
415         if (this.zoom < this.minzoom) { this.zoom = this.minzoom; }
416         if (this.zoom > this.maxzoom) { this.zoom = this.maxzoom; }
417
418
419
420
421         ///
422         /// immediately draw and or fit to feed
423         ///
424         this.performzoom(this.lon,this.lat,zoom);
425         this.drag(0,0);
426
427         ///
428     } // CLOSE ZOOM FUNCTION
429
430     this.setLatLon = function(lat,lon)
431     { 
432         this.lon=lon; 
433         this.lat=mercatorlat(lat); 
434         this.clean(); 
435         this.performzoom(lon,mercatorlat(lat),this.zoom);
436         this.drag(0,0); 
437     }
438
439         this.forceRefresh = function()
440         {
441                 this.clean();
442         this.performzoom(this.lon,this.lat,this.zoom);
443         this.drag(0,0); 
444         }
445
446     ///
447     /// zoom a tile group
448     ///
449     this.tile_engine_zoomout = function() 
450     {
451         this.clean();
452         this.zoomTo(this.zoom-1);
453
454         return false; // or safari falls over
455     }
456
457     ///
458     /// zoom a tile group
459     ///
460     this.tile_engine_zoomin = function() 
461     {
462         
463         this.clean();
464         this.zoomTo(this.zoom+1);
465   
466         return false; // or safari falls over
467     }
468
469     this.setURL=function(url) { this.url=url; }
470
471
472
473     ///
474     /// intercept context events to minimize out-of-browser interruptions
475     ///
476     
477     this.event_context = function(e) 
478     {
479         return false;
480     }
481
482     ///
483     /// keys
484     ///
485
486     this.event_key = function(e) 
487     {
488         var key = 0;        
489
490         var hostengine = defaultEngine;
491
492         if( window && window.event && window.event.srcElement ) {
493             hostengine = window.event.srcElement.tile_engine;
494         } else if( e.target ) {
495             hostengine = e.target.tile_engine;
496         } else if( e.srcElement ) {
497             hostengine = e.srcElement.tile_engine;
498         }
499
500         if( hostengine == null ) {
501             hostengine = defaultEngine;
502             if( hostengine == null ) {
503                 return;
504             }
505         }
506
507
508         if( e == null && document.all ) {
509             e = window.event;
510         }
511
512         if( e ) {
513             if( e.keyCode ) {
514                 key = e.keyCode;
515             }
516             else if( e.which ) {
517                 key = e.which;
518             }
519
520             switch(key) {
521             case 97: // a = left
522                 hostengine.drag(16,0);
523                 break;
524             case 100: // d = right
525                 hostengine.drag(-16,0);
526                 break;
527             case 119: // w = up
528                 hostengine.drag(0,16);
529                 break;
530             case 120: // x = dn
531                 hostengine.drag(0,-16);
532                 break;
533             case 115: // s = center
534                 new tile_engine_new(hostengine.parentname,
535                             "FULL",
536                             hostengine.feedurl, // xxx hrm, cache this?
537                             hostengine.url,
538                             hostengine.lon,
539                             hostengine.lat,
540                             hostengine.zoom,
541                             0,0
542                             );
543                 break;
544             case 122: // z = zoom
545                 new tile_engine_new(hostengine.parentname,
546                             "FULL",
547                             hostengine.feedurl, // xxx hrm, cache this?
548                             hostengine.url,
549                             hostengine.lon,
550                             hostengine.lat,
551                             hostengine.zoom + 1,
552                             0,0
553                             );
554                 break;
555             case  99: // c = unzoom
556                 new tile_engine_new(hostengine.parentname,
557                             "FULL",
558                             hostengine.feedurl, // xxx hrm, cache this?
559                             hostengine.url,
560                             hostengine.lon,
561                             hostengine.lat,
562                             hostengine.zoom - 1,
563                             0,0
564                             );
565                 break;
566             }
567         }    
568     }
569
570     ///
571     /// catch mouse move events
572     /// this routine _must_ return false or else the operating system outside-of-browser-scope drag and drop handler will interfere
573     ///
574
575     this.event_mouse_move = function(e) {
576
577         var hostengine = null;
578         if( window && window.event && window.event.srcElement ) {
579             hostengine = window.event.srcElement.tile_engine;
580         } else if( e.target ) {
581             hostengine = e.target.tile_engine;
582         } else if( e.srcElement ) {
583             hostengine = e.srcElement.tile_engine;
584         }
585
586
587         if( hostengine && hostengine.drag ) {
588             if( hostengine.mousedown ) {
589                 if( netscape ) {
590                     hostengine.mousex = parseInt(e.pageX) + 0.0;
591                     hostengine.mousey = parseInt(e.pageY) + 0.0;
592                 } else {
593                     hostengine.mousex = parseInt(window.event.clientX) + 0.0;
594                     hostengine.mousey = parseInt(window.event.clientY) + 0.0;
595                 }
596                 hostengine.drag(hostengine.mousex-hostengine.lastmousex,hostengine.mousey-hostengine.lastmousey);
597             }
598             hostengine.lastmousex = hostengine.mousex;
599             hostengine.lastmousey = hostengine.mousey;
600         }
601
602         // must return false to prevent operating system drag and drop from handling events
603         return false;
604     }
605
606     ///
607     /// catch mouse down
608     ///
609
610     this.event_mouse_down = function(e) {
611
612         var hostengine = null;
613         if( window && window.event && window.event.srcElement ) {
614             hostengine = window.event.srcElement.tile_engine;
615         } else if( e.target ) {
616             hostengine = e.target.tile_engine;
617         } else if( e.srcElement ) {
618             hostengine = e.srcElement.tile_engine;
619         }
620
621
622         if( hostengine ) {
623             if( netscape ) {
624                 hostengine.mousex = parseInt(e.pageX) + 0.0;
625                 hostengine.mousey = parseInt(e.pageY) + 0.0;
626             } else {
627                 hostengine.mousex = parseInt(window.event.clientX) + 0.0;
628                 hostengine.mousey = parseInt(window.event.clientY) + 0.0;
629             }
630             hostengine.lastmousex = hostengine.mousex;
631             hostengine.lastmousey = hostengine.mousey;
632             hostengine.mousedown = 1;
633         }
634
635         // must return false to prevent operating system drag and drop from handling events
636         return false;
637     }
638
639     ///
640     /// catch double click (use to center map)
641     ///
642
643     this.event_double_click = function(e) {
644
645         var hostengine = null;
646         if( window && window.event && window.event.srcElement ) {
647             hostengine = window.event.srcElement.tile_engine;
648         } else if( e.target ) {
649             hostengine = e.target.tile_engine;
650         } else if( e.srcElement ) {
651             hostengine = e.srcElement.tile_engine;
652         }
653
654
655         if( hostengine ) {
656             if( netscape ) {
657                 hostengine.mousex = parseInt(e.pageX) + 0.0;
658                 hostengine.mousey = parseInt(e.pageY) + 0.0;
659             } else {
660                 hostengine.mousex = parseInt(window.event.clientX) + 0.0;
661                 hostengine.mousey = parseInt(window.event.clientY) + 0.0;
662             }
663             var dx = hostengine.mousex-(hostengine.displaywidth/2)-hostengine.parent_x;
664             var dy = hostengine.mousey-(hostengine.displayheight/2)-hostengine.parent_y;
665             hostengine.drag(-dx,-dy); // TODO smooth
666         }
667
668         // must return false to prevent operating system drag and drop from handling events
669         return false;
670
671     }
672
673     ///
674     /// catch mouse up
675     ///
676
677     this.event_mouse_up = function(e) {
678
679         var hostengine = null;
680         if( window && window.event && window.event.srcElement ) {
681             hostengine = window.event.srcElement.tile_engine;
682         } else if( e.target ) {
683             hostengine = e.target.tile_engine;
684         } else if( e.srcElement ) {
685             hostengine = e.srcElement.tile_engine;
686         }
687         
688
689         if( hostengine ) {
690             if( netscape ) {
691                 hostengine.mousex = parseInt(e.pageX) + 0.0;
692                 hostengine.mousey = parseInt(e.pageY) + 0.0;
693             } else {
694                 hostengine.mousex = parseInt(window.event.clientX) + 0.0;
695                 hostengine.mousey = parseInt(window.event.clientY) + 0.0;
696             }
697             hostengine.mousedown = 0;
698         }
699
700         // must return false to prevent operating system drag and drop from handling events
701         return false;
702     }
703
704     ///
705     /// catch mouse out
706     ///
707
708     this.event_mouse_out = function(e) {
709
710         var hostengine = null;
711         if( window && window.event && window.event.srcElement ) {
712             hostengine = window.event.srcElement.tile_engine;
713         } else if( e.target ) {
714             hostengine = e.target.tile_engine;
715         } else if( e.srcElement ) {
716             hostengine = e.srcElement.tile_engine;
717         }
718
719
720         if( hostengine ) {
721             if( netscape ) {
722                 hostengine.mousex = parseInt(e.pageX) + 0.0;
723                 hostengine.mousey = parseInt(e.pageY) + 0.0;
724             } else {
725                 hostengine.mousex = parseInt(window.event.clientX) + 0.0;
726                 hostengine.mousey = parseInt(window.event.clientY) + 0.0;
727             }
728             hostengine.mousedown = 0;
729         }
730
731         // must return false to prevent operating system drag and drop from handling events
732         return false;
733     }
734
735
736     ///
737     /// register new handlers to catch desired events
738     ///
739
740     // NW removed parameter - always use parent
741     this.event_catch = function() {
742
743         this.parent.style.cursor = 'move';
744
745         if( netscape ) {
746             window.captureEvents(Event.MOUSEMOVE);
747             window.captureEvents(Event.KEYPRESS);
748         }
749
750         this.parent.onmousemove = this.event_mouse_move;
751         this.parent.onmousedown = this.event_mouse_down;
752         this.parent.onmouseup = this.event_mouse_up;
753         this.parent.onkeypress = this.event_key;
754         window.ondblclick = this.event_double_click;
755
756         if( window ) {
757             window.onmousemove = this.event_mouse_move;
758             window.onmouseup = this.event_mouse_up;
759             window.ondblclick = this.event_double_click;
760         }
761
762     }
763
764         this.setURLAttribute = function(k,v)
765         {
766                 this.urlAttr[k] = v; 
767         }
768
769         this.getURLAttribute = function(k)
770         {
771                 return this.urlAttr[k];
772         }
773
774         this.getDownloadedTileBounds = function()
775         {
776                 var bounds = new Array();
777                 bounds.w=this.lon_min; 
778                 bounds.s=normallat(this.lat_min);
779                 bounds.e=this.lon_max;
780                 bounds.n=normallat(this.lat_max);
781                 return bounds;
782         }
783
784         this.getVisibleBounds = function()
785         {
786                 var bounds = new Array();
787                 bounds.w = this.xToLon(0);
788                 bounds.s = this.yToLat(this.theheight);
789                 bounds.e = this.xToLon(this.thewidth);
790                 bounds.n = this.yToLat(0);
791                 return bounds;
792         }
793         
794         // navout and navin stuff - START
795         // draw navigation buttons into the parent div
796
797     // ENTRY CODE BEGINS HERE....
798
799
800     // get parent div or fail
801     this.parent = document.getElementById(parentname);
802     if( this.parent == null ) {
803         alert('The tile map engine cannot find a parent container named ['
804                 +parentname+']');
805         return;
806     }
807
808     //
809     // store for later
810     //
811
812     this.parentname = parentname;
813     this.hints = hints;
814     this.feedurl = feedurl;
815     this.url = url;
816     this.lon = lon;
817     this.lat = mercatorlat(lat);
818     this.thewidth = w;
819     this.theheight = h;
820     this.dragcontainer = 1;
821     this.debug = 0;
822
823     // for firefox keyboard
824     defaultEngine = this;
825     document.engine = this;
826
827
828     //
829     // decide on display width and height
830     //
831     if( !w || !h ) 
832         {
833         w = parseInt(this.parent.style.width);
834         h = parseInt(this.parent.style.height);
835         if(!w || !h) 
836                 {
837             w = 512;
838             h = 256;
839             this.parent.style.width = w + 'px';
840             this.parent.style.height = h + 'px';
841         }
842     } 
843         else 
844         {
845         this.parent.style.width = parseInt(w) + 'px';
846         this.parent.style.height = parseInt(h) + 'px';
847     }
848     this.displaywidth = w;
849     this.displayheight = h;
850
851     this.minzoom = 0;
852     this.maxzoom = 20;
853
854     //
855     // enforce parent div style?
856     // position absolute is really only required for firefox
857     // http://www.quirksmode.org/js/findpos.html
858     //
859
860     this.parent_x = getCSSPositionX(this.parent);
861     this.parent_y = getCSSPositionY(this.parent);
862
863     this.parent.style.position = 'relative';
864     this.parent.style.overflow = 'hidden';
865     this.parent.style.backgroundColor = '#000036';
866
867
868         // attach event capture parent div
869         this.event_catch();
870
871     this.clean();
872         //this.makeZoom();
873
874     this.zoomTo(zoom);
875 }
876
877
878 function normallat(mercatorlat)
879 {
880     var tp = 180/PI*(2 * Math.atan(Math.exp(mercatorlat * PI / 180)) - PI / 2);
881     return tp;
882 }
883
884 function mercatorlat(normallat)
885 {
886   var lpi =  3.14159265358979323846;
887   return  Math.log( Math.tan( (lpi / 4.0) + (normallat / 180.0 * lpi / 2.0))) * 
888                       180.0 / lpi ;
889 }