LatLng

example

The LatLng Object is not visible. The LatLng Object handles all coordinates of all visible or invisible thing.

Bounds

constructor: point1, point2

methods: sw, ne, getDistance (returns the distance between the points in meter)

example

//the globe fits to the div

varmap=newmr.Map(document.getElementById("map"));varp1=newmr.LatLng(-70,-180);varp2=newmr.LatLng(70,180);varb=newmr.Bounds(p1,p2);map.bounds(b);alert("do you see the children all over the world?")//get southwest coordinatevarsw=b.sw();alert(sw.lat());//set a new coordinate to existing boundsvarp3=newmr.LatLng(34.5799,23.83);b.sw(p3);map.bounds(b);//content of map view is changed//get Distance in metervard=b.getDistance();alert(d+" meter");

getDistance does not really fit to the bounds. This function should maybe go to the LatLng object like:
var distance=p1.distance(p2);
alert(distance+" Meter");

Map

constructor: domElement - mounts the map to a div

Position and Zoomlevel

centerAndZoom:

mr.LatLng
Number
Return null (nothing)

center:

mr.LatLng
return mr.LatLng

zoom: zoomlevel

return number

bounds:

mr.LatLng
mr.LatLng
return mr.Bounds

moveXY: deltaX,deltaY (pixel)

Overlay Handling

addOverlay: vectors, markers, ui component

removeOverlay: overlay

simple callback function

addCallbackFunction: user defined function called if the map is moved or zoomed

removeCallbackFunction

workaround for slow browsers (offsetWidth,..)

redraw: has to be called if the div changes position or size is changing (offsetWidth, offsetHeigt are very slow in 2010 browsers)

for internal use

example

//initialize the mapvarmap=newmr.Map(document.getElementById("map"));varp=newmr.LatLng(48.2,15.6);map.centerAndZoom(p,12);

What's the difference between callbackfunction and overlay? Could the callbackfunction be an overlay to keep the core simple?removeAllOverlays is a stupid method. It would be more interesting to get a list of the layers.

varmr=newObject(khtml.maplib);varmap=null;//global map objectfunctioninit(){map=newmr.Map(document.getElementById("map"));varcenter=newmr.LatLng(48.2,15.6);map.centerAndZoom(center,12);//12 = zoomlevel//now the map is working, if you don't need overlays you are finished//marker at centervarimg=document.createElement("img");img.setAttribute("src","marker.png");varmarker=newmr.Marker(center,img);map.featureCollection.appendChild(marker);//add polylinevarpArray=newArray();pArray.push(newmr.LatLng(48.2,15.6);pArray.push(newmr.LatLng(48.21,15.8);pArray.push(newmr.LatLng(48.22,15.3);pArray.push(newmr.LatLng(48.24,15.2);varline=newmr.geometry.Feature({type:"LineString",coordinates:pArray);line.style.stroke="blue";line.style.fill="red";map.featureCollection.appendChil(line);}

User Interface

Mouse-, Touch-, Multitouch- events are handled by the lib.
Visible UI Parts are easy to implement and part of the extensions.

Keyboard Support

The map needs the focus for handling key events. The map must not eat <crtl>-r of tab event. Firefox needs tabindex to set focus on a div.

key

keycode

action

plus

187;61

zoom in

minus

189;109

zoom out

cursor left

37

short press moves 10px, long press starts animation

cursor right

39

cursor down

40

cursor up

38

home

36

map moves left 80%, ease in, ease out animation

end

35

page up

33

page down

34

<shift> + mouse

draw rect for zoom

<ctrl> +mouse

distance measure tool

Extensions

The Vector Class renders the vector data on diffent backends. Very common are SVG, VML and Canvas. It calculates all the WGS84 to pixel coordinate.
Markers are placing domElements on the map. Instead of doing on css:top/left you use WGS84 Coordinates.
The Vector and Marker Interface should be highly optimized for speed. Optimization for speed is the main goal of the lib and higher level functions provied from this speed. Extension Programmers have a reliable easy to use API.

For different coordinate system the point Class has to be extended.
Extensions should use the Vector and Marker Class.

Animations

example

Keyboard

There are some problems with focus finding if there are many maps on the same html page. Even to get the keyboard focus to the map is not an
easy task.

Integration

DOM

The map is mounted to a DOM Element.
The maplib must read the size and position of this DIV.
The DIV must be fully styleable by CSS.
Also the padding parameter must work same an with img-elements.

jquery

$(".map").makeMap(lat,lng,zoom);

//add the map to all div with class "map"$(".map").makeMap(48.2,16.54,14);

wordpress

Programming Overlays

functionSpline(...params...){//... your code ...this.init=function(themap){//... your code for intializing...}this.render(){//... is called if map is moved or zoomed ...}this.clear(){//... for canvas renderer, to clear the drawing...it's called only once per frame.}this.destroy(){//...remove all visible parts from map. Delete Variables.}}varsplines=newSpline(...params..);map.addOverlay(splines);

Discussion

There should be a prefix like in Google maps api v3 for all classes.

Units

Numbers without units are WGS84 Coordinates.
It should be possible to do nearly everything using "px" or "m" Units.

The moveXY or the circle radius could take parameters in m, px, und wgs84 .