khtmlcore map library

Licence: LGPL
Author: Bernhard Zwischenbrugger
email: lbzwischenbrugger(at)fhstp(dot)ac(dot)at
Comercial Support by author available
wiki: http://wiki.openstreetmap.org/wiki/Khtmlib

Introduction

khtml.js is a map library for web browsers and openstreetmap tiles. Target of this project is, to build a map library that is faster than google, bing, openlayers... librarys.

It's optimized for speed and uses browser features like 3D CSS (webkit).

It's a low level library that allows you to make librarys with more features or web application on top of it. A central feature is multitouch support for iphone.

At the moment the lib has 40kByte and is one file.

Why not use Google Maps API?

Open the map in normal Browser

open map

Please use mousewheel.

Open the map in iPhone


or type the link address in iPhone URL.
http://www.khtml.org/ (If you connect witch iPhone you will be redirected to the iphone page)



For iPhone fullscreen:

Status

API

All maps are active.
Mouse: drag/drop, mousewheel for zoom;
touchscreen:one finger move map, two finger monkey grip for zoom,
Initialize with setCenter
...
<script type="text/javascript" src="khtml.js"> </script>
<script type="text/javascript">
function init(){
        map1=new kmap(document.getElementById("map1"));
        var center=new kPoint(48.2,15.633);
        map1.setCenter(center,9);

}
</script>
</head>
<body onload="init()">
<div id="map1" style="widht:100px;height:100px"> </div>
...
Initialize with setBounds
...
<script type="text/javascript" src="khtml.js"> </script>
<script type="text/javascript">
function init(){
        map2=new kmap(document.getElementById("map2"));
        var sw=new kPoint(48.2,16.4);
        var ne=new kPoint(48.4,16.8);
        var b=new kBounds(sw,ne);
        map2.setBounds(b);


}
</script>
</head>
<body onload="init()">
<div id="map1" style="widht:100px;height:100px"> </div>
...
Markers
	...	
        map3=new kmap(document.getElementById("map3"));
        var center=new kPoint(48.2,15.633);
        map3.setCenter(center,9);

        var flagcenter1=new kPoint(48.197231,15.645451);

        var img=document.createElement("img");
        img.setAttribute("src","images/dot_green.png");
        img.style.position="absolute";
        img.style.top="-3px";    //<---  flag
        img.style.left="-4px";    //<---  flag
        img.style.width="8px";    //<---  flag
        img.style.height="8px";
        img2=img.cloneNode(true);

        var m=new kMarker(flagcenter1,img);
        map3.addOverlay(m);
        var flagcenter1=new kPoint(48.290231,15.605451);
        var m=new kMarker(flagcenter1,img2);
        map3.addOverlay(m);

	...
Status
  • Marker is not clickable
Path
        var lat=centerLat -0.2;
        var lng=centerLon -0.2;
        var points=new Array();
        for(var i=0; i < 20; i++){
                lat=lat+Math.random()/10 -0.02;
                lng=lng+Math.random()/10 -0.02;
                var point=new kPoint(lat,lng);
                points.push(point);
        }
        var style=new kStyle();
        style.addStyle("stroke","red");
        style.addStyle("stroke-dasharray","8,4,3,4");
        style.addStyle("stroke-width",4);
        var line=new kPolyline(points,style);
        map4.addOverlay(line);
Area
        ...
        var points=new Array();
        points.push(new kPoint(48.290231,15.605451));
        points.push(new kPoint(48.490231,15.605451));
        points.push(new kPoint(48.490231,15.305451));
        points.push(new kPoint(48.290231,15.305451));
        points.push(new kPoint(48.290231,15.605451));
        var style=new kStyle();
        style.addStyle("stroke","black");
        style.addStyle("fill","yellow");
        style.addStyle("fill-opacity","0.4");
        style.addStyle("stroke-width",2);
        var line=new kPolyline(points,style);
        map5.addOverlay(line);

	...
Status
JSON style parameters for style would be maybe nice.



More methodes
map.renderOverlays();   //for refreshing overlays if your app needs


map.setCenter(point,zoom);


var point=map.getCenter();


map.setBounds(point1,point2);


var bounds=map.getBouns();


var zoom=map.getZoom();


var lat=point.getLat();


var lng=point.getLng();


var pointNW=bounds.getNW();


var pointSE=bounds.getSE();


var centerPoint=bounds.getCenter();


var bounds=kBounds(pointNW,pointSE);


var distance=bounds.getDistance();  //distance from NW to SE in Meter

Browser support

Mouse wheel has different speed on different plattforms.
No idea how to solve this problem.

Webkit (chrome, safari)Very fast zoom if images are in cache. Image loading not optimizable (webkit bug details)
Firefox3D CSS missing, "zoom" function for div buggy and slow: not usable, normal image zoom in use
iPhonesee Webkit, excellent Moultitouch!!
Internet Explorer Should work for IE 6-8, VML not very well tested
Opera3D CSS missing -> slow
Konqueror3D CSS missing -> slow
Android Tested on Legend, there is a bug somewhere and it stops function after a while

What does it do

ToDo

What will not be part of this lib

This things can be made on top of this lib. This are all things that can be done outside of this lib.

The Code

Handling millions of images and place it highspeed on the browser window is not an easy task. Browsers do things in a diffent way and Browsers have bugs. Webkit has excellent image zoom but a bad image loading bug.

I tried to implement this library 5 times and started every time completly new. Many parts of the code are not easy readable.

Some parts of the code like marker handling should be readable by skilled javascript programers. The xy2latlng ,latlng2xy methods are a bit tricky and maybe buggy.

If you want to do the hardcore things and optimize speed, than welcome in hell. Documentation for programers

Feedback

Bernhard
Sunday 28th of February 2010 07:17:42 PM
So, thats all. Happy testing or what ever.
Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.222.5 Safari/532.2
Erik J
Friday 5th of March 2010 11:28:00 AM
That's fast! I really like the speed, the quality is so so since you never seem to beable to get a 1:1 pixel zoom level, so it's always abit fuzzy. This is a great step, I can actually use the scroll wheel to zoom in instead of using the shift click mark area method. It&s amazing.
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2) Gecko/20100222 Ubuntu/10.04 (lucid) Firefox/3.6
Erik J
Friday 5th of March 2010 11:28:24 AM
That's fast! I really like the speed, the quality is so so since you never seem to beable to get a 1:1 pixel zoom level, so it's always abit fuzzy. This is a great leap forward in UI responsiveness, I can actually use the scroll wheel to zoom in instead of using the shift click mark area method. It's amazing.
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2) Gecko/20100222 Ubuntu/10.04 (lucid) Firefox/3.6
Bernhard
Friday 5th of March 2010 01:04:09 PM
Yes it&apos;s fuzzy a bit. It's the same fuzzyness google maps on iPhone has. It' always a compromiss and I like it this way. For doubleclick it will jump to a sharp zoom level. I should implement this ;-) The shift click will also come again.
Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.222.5 Safari/532.2
Erik J
Sunday 7th of March 2010 01:08:06 AM
Works fine in Firefox btw. I got a hold of an iPhone (the first time I used one in quite a while). This "app" is better than the only other OSM app I tried (Mapzen POI). Though nice it's not really usable as an iPhone app since it doesn't keep state, I guess this could be solved by keeping state on the server side. It will be interesting to see how it fairs on an Android phone. Considering not all have multitouch it might be hard I guess..
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2) Gecko/20100222 Ubuntu/10.04 (lucid) Firefox/3.6
Bernhard
Sunday 7th of March 2010 05:00:14 AM
Keeping the state should be easy, but it's not part of the core lib. I will make an app that will save the current location in a cookie on page unload. The Android Browser on T-Mobile G1 und G2 is not really good. I will not support it. (3D CSS and SVG missing)
Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.222.5 Safari/532.2
New beta version available
Tuesday 9th of March 2010 08:11:26 AM
Please try: http://www.khtml.org/iphonemap/
Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/532.9 (KHTML, like Gecko) Chrome/5.0.307.11 Safari/532.9


Please leave your feedback here
name:
text:
page