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

API Documentation

API DOC

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.

The Files

khtml.js Base Lib
kvector.js Vector Extension (SVG, VML, Canvas Backend) - work in progress
gpx.js GPX Extension (needs vector.js)
osm.js Experimental OSM Extension allows to display OSM XML Files from API(needs vector.js)
debug.js Debug Extension. This displays the image loading process
kml.js Experimental KML support
measure.js Distance Measurment (needs kvector)
all in one file All the files put together in one file

Simple Examples

Speed

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="http://khtml.org/osm/v0.83/alljs.php" ></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="http://khtml.org/osm/v0.83/alljs.php" ></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";    //<---  offset depends on your marker
        img.style.left="-4px";    //<---  offset depends on your marker
        img.style.width="8px";   
        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.2,15.6));
        points.push(new kPoint(48.4,15.6));
        points.push(new kPoint(48.4,15.3));
        points.push(new kPoint(48.2,15.3));
        points.push(new kPoint(48.2,15.6));
        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,true);
        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