[ka-Map-dev] Converting ka-map to prototype

[Ben Nolan]

Here's an excerpt of this weekends work. I can't put up a live demo yet 
- but I'll try and sort something soonish. It looks like kaMap is going 
to be about 1/4 the size by the time I'm done (if we ignore the size of 
prototype).

;)

Ben

GMap.prototype = {
   ...,

   getZoom : function(){
     return this.zoomLevel;
   },

   setCenter : function(center, zoom){
     this.lat = center.lat();
     this.lng = center.lng();

     if (zoom == this.zoomLevel){
       //this.checkWrap();
     }else{
     	this.zoomLevel = zoom;
     }

     this.redrawAllTiles();
   },

   zoomIn : function(){
   	if (this.zoomLevel>1){
   	  this.zoomLevel--;
       this.triggerEvent('zoomend');
       this.redrawAllTiles();
     }
   },
   zoomOut : function(){
   	if (this.zoomLevel<13){
     	this.zoomLevel++;
       this.triggerEvent('zoomend');
       this.redrawAllTiles();
     }
   },
   getRelativeMouseLocation : function(e){
     var offset = Position.cumulativeOffset(this.domObj);
     return new GPoint(e.clientX - offset.shift(), e.clientY - 
offset.shift());
   },
   getCenter : function(){
     return new GLatLng(this.lat, this.lng);
   },
   getSize : function(){
     return new GSize(parseInt(this.domObj.style.width), 
parseInt(this.domObj.style.height));
   },
   onMouseDown : function(e){
     this.onFocus();

     if (!this.onMouseMoveHandle){
       this.lastX=e.clientX;
       this.lastY=e.clientY;

       Event.observe(window, 'mousemove', this.onMouseMoveHandle = 
this.onMouseMove.bindAsEventListener(this), false);
       Event.stop(e);
     }
   },
   onDoubleClick : function(e){
     var clickLocation = this.getRelativeMouseLocation(e),
       size = this.getSize();

     this.slideBy(new GPoint(size.width/2-clickLocation.x, 
size.height/2-clickLocation.y));
     Event.stop(e);
   },
   onMouseMove : function(e){
     this.translateMap(new GPoint(e.clientX - this.lastX, e.clientY - 
this.lastY));

     this.lastX=e.clientX;
     this.lastY=e.clientY;
   },
   onMouseUp : function(e){
     Event.stopObserving(window, 'mousemove', this.onMouseMoveHandle, 
false);
     delete this.onMouseMoveHandle;
   },
   onFocus : function(){
     if (!this.onKeyDownHandle){
       Event.observe(window, 'keydown', this.onKeyDownHandle = 
this.onKeyDown.bindAsEventListener(this), false);
     }
   },
   onBlur : function(){
     Event.stopObserving(window, 'keydown', this.onKeyDownHandle, false);
     delete this.onKeyDownHandle;
   },
   onKeyDown : function(e){
     var c = (e.charCode)?e.charCode:e.keyCode,
       d = 256;

     switch (c){
       case Event.KEY_UP:
         this.slideBy(new GPoint(0,d));
         break;

       case Event.KEY_DOWN:
         this.slideBy(new GPoint(0,-d));
         break;

       case Event.KEY_LEFT:
         this.slideBy(new GPoint(d, 0));
         break;

       case Event.KEY_RIGHT:
         this.slideBy(new GPoint(-d, 0));
         break;

       case 107:
         this.zoomIn();
         break;

       case 109:
         this.zoomOut();
         break;

       default:
         return;
     }

     Event.stop(e);
   },
   createLayers : function(){
     this.theInsideLayer = document.createElement('div');
     this.theInsideLayer.id = 'theInsideLayer';
     this.theInsideLayer.style.position = 'absolute';
     this.theInsideLayer.style.left = '0px';
     this.theInsideLayer.style.top = '0px';
     this.theInsideLayer.style.zIndex = 0;
     this.theInsideLayer.kaMap = this;
     this.theInsideLayer.style.cursor = 'move';

     this.domObj.appendChild(this.theInsideLayer);

     Event.observe(this.domObj, 'mousedown', 
this.onMouseDown.bindAsEventListener(this), false);
     Event.observe(this.domObj, 'dblclick', 
this.onDoubleClick.bindAsEventListener(this), false);

     Event.observe(window, 'mouseup', 
this.onMouseUp.bindAsEventListener(this), false);
     Event.observe(window, 'mouseout', 
this.onMouseUp.bindAsEventListener(this), false);
     Event.observe(window, 'mousedown', this.onBlur.bind(this), false);
   },
   createMap : function(){
     var d = document.createElement( 'div' );
     d.style.position = 'absolute';
     d.style.visibility = 'visible';
     d.style.left = '0px';
     d.style.top = '0px';
     d.style.width= '3000px';
     d.style.height = '3000px';
     d.style.zIndex = 1;
     d.className = 'mapLayer';
     d.innerHTML = '';
     this.theInsideLayer.appendChild(d);


     var layer = new GTileLayer;
     layer.map = this;
     layer.domObj = d;

     this.layers = [];
     this.layers.push(layer);

     this.resize();

     return true;
   },
   translateMap : function(p){
     var newTop = safeParseInt(this.theInsideLayer.style.top) + 
parseInt(p.y),
         newLeft = safeParseInt(this.theInsideLayer.style.left) + 
parseInt(p.x);

     this.theInsideLayer.style.top=newTop + 'px';
     this.theInsideLayer.style.left=newLeft + 'px';

     this.lat += this.pixToGeo(0, p.y)[1];
     this.lng += this.pixToGeo(p.x, 0)[0];

     this.checkWrap();
     this.triggerEvent("moveend");
   },
   slideByCallback : function(p){
     var factor = Math.cos(this.slidePos*6.3+3.1) / 18 + 0.05;

     this.translateMap(new GPoint(p.x * factor, p.y * factor));

     this.slidePos+=0.05;
     if (this.slidePos > 1){
       this.slideByHandle.stop();
       delete this.slideByHandle;
     }
   },
   slideBy : function(p){
     if (!this.slideByHandle){
       this.slidePos = 0;
       this.slideByHandle = new 
PeriodicalExecuter(this.slideByCallback.bind(this, p), 0.01);
     }

     return;
   },

Ben Nolan
Director
Projectx Technology Ltd.
http://www.projectx.co.nz
Ph:    +64 4 381 4484
Fax:  +64 4 803 3347

Zoomin.co.nz - Street maps for all New Zealand.


On 21/05/2006, at 4:04 AM, Paul Spencer wrote:

> Cool :)  I've been planning to do this for quite a while but never 
> seem to find the time to take it on.  I'm using prototype in a number 
> of other projects now and really like it.  I'll certainly support this 
> in cvs, although we may want to release a 0.3 version before migrating 
> to prototype.
>
> Congrats on zoomin, very nice :)
>
> Cheers
>
> Paul
>
> On 20-May-06, at 4:44 AM, Ben Nolan wrote:
>
>> Hi,
>>
>> I posted a long time ago about porting ka-map to prototype. I haven't 
>> had the opportunity to do so until just very recently. I've started 
>> work on this - and I'll post my progress.
>>
>> I'm also copying the google maps v2 api as i refactor the ka-map code.
>>
>> Ben Nolan
>> Director
>> Projectx Technology Ltd.
>> http://www.projectx.co.nz
>> Ph:    +64 4 381 4484
>> Fax:  +64 4 803 3347
>>
>> Zoomin.co.nz - Street maps for all New Zealand.
>>
>> _______________________________________________
>> ka-Map-dev mailing list
>> ka-Map-dev at lists.maptools.org
>> http://lists.maptools.org/mailman/listinfo/ka-map-dev
>
> +-----------------------------------------------------------------+
> |Paul Spencer                           pspencer at dmsolutions.ca   |
> +-----------------------------------------------------------------+
> |Applications & Software Development                              |
> |DM Solutions Group Inc                 http://www.dmsolutions.ca/|
> +-----------------------------------------------------------------+
>
>
>
>