Programmers dokumentation

This library has an API. If somebody want to do a faster map renderes, there are 2 way. Start a new project, this API would be a good startingpoint. If a new API would have the same API there could benchmark and compatibility tests could be made.
The other way to increase speed is to work on this API.

Software architecture

The OO syntax is like described in http://de.wikipedia.org/wiki/JavaScript#Objekte
Event handling for Objects is done by the Event function. I found it somewhere in cyberspace.

Layer


this.draw=function(map,lat,lng, moveX, moveY, intZoom,zoom){
...
}

This Method draws a layer. map is the div element where the map will be rendered. lat, lng defines the center of the map.

moveX, moveY

It's much faster to move a div than to move every single image. If the users moves the map with mouse the moveX, moveY will given to this function. It's for speedup and will be discused later. The moveX, moveY makes the formulas not easy to understand.

zoom, intZoom:

If zoom is set to 8.56 and intZoom is set to 10, the images for zoomlevel 10. For example this image:

But it would be rendered smoller because or the zoom level.

The map paramenter defines the DIV used for drawing the images. The result of this method is a map that has basic functionality. The moveX,moveY parameter makes it easy to move around this map. The zoom should also work and can for this example be set like:


zoom=Math.floor(zoom);

Layermanager

This method does the same as "draw" but desides the intZoom with an intelligent mechanism.


this.layer=function(map,lat,lng, moveX, moveY, zoom){
...
}

For every integer zoomlevel we create a layer (object draw) if needed. This Method handels the layers. It desides witch layer should be displayed and in witch layer the next images should be loaded.

It also handles the frequency layers are drawn. If a higher level method sends every millisecond that the map should move a bit moved a bit, this layer will ignor all requests if its busy. This is made with strange setTimeout semaphores. Using object variables as semaphores is not working.
To be more clear on that. Every mouse event can give a commando to the map. That means the program execution forks a new task. If there are many mouse events there are many tasks doing things that are not needed anymore. To avoid parallel threads there are semaphores nessessary.
A big problem here is the cheeting firefox. Firefox gives the image rendering to a seperat thread and continues in code. Firefox will get too much rendering requests and will be a bit slow if there are too many requests. Webkit Browsers work fine on that and they are really really fast.

3d css

webkit browsers including iPhone have support for 3d css. The 3D CSS uses hardware support for transforming things. 3D is faster than 2D but can be used for 2D.
All the layers are 3D layers and can be moved around very smooth. iPhone has full 3d css support and it would be possible to make a perspective view. It's just changing one parameter from 0 to an arbitray angle.

Cleanup

This library trys to avoid preload completly. If the user moves the map very fast (zoom!) he will request many images. Sometimes the server can not deliver in the short time. If the user does not need the image anymore, the request will be canceled. This task brings lots of performance. But the bad thing is, that webkit browsers don't honor my effort because of this bug: https://bugs.webkit.org/show_bug.cgi?id=6656