From OpenStreetMap Wiki
(Redirected from Khtml)
Jump to: navigation, search

For neuest Version see: khtml.maplib

khtmlib (on github) is a javascript library that brings osm tiles to the browser. It is one of several ways to Deploy a Slippy Map on your website. It has a very fast zoom and has also a basic interface for markers and vector data. This library is a piece of code, that puts tiles on the screen and enables the programmer to forget screen coordinates. The API talks WGS84 (GPS).


khtml.maplib is still beta software. The API still may change.

The API ist described at: [1]

For some examples see: [2] (best viewed with webkit browsers as Chromium, Chrome, iOS Safari, Android browser)

The rest of this page is outdated.


how to use it

There are different ways to use the map.


If you press the <shift>-key you can draw a rectangle on the screen. If you release the mouse the selected area will be zoomed in.


Doubleclick will zoom you in to the next integer zoomlevel. On integer zoomlevel the images are very clear.


It's possible to do ALL the navigation with the mousewheel. To find a nearby place zoom out some zoomlevels and zoom in again at the place you want to be. If the cursor is directly on top of you target while zooming in, the place will be on the same spot of the screen and gets bigger. If you have the cursor a little bit right of it, the place will go to left side. To be fast it needs an excellent internet connection and some training. You should be able to zoom in from zoomlevel 1 to your house in about 10 seconds. If you have problems with the wheel speel, leave a message here. write "faster" or "slower". If you are good at physics you could also write about acceleration, maxspeed, minspeed, usersettings...

Keyboard support

Missing, should not be too difficult.

iphone usage

one finger press: zoom out (on android is without multitouch no other possibility) Rest: same as google maps

What can you do with this lib

Video at youtube

The library has an intuitive usability.

Isues: 2 finger doubleclick on iphone not supported jet; parameter tuning on mousewheel needed.

You can use this lib instead of static map images on html pages - but ie is not supported.

You can make iPhone web applications. Like this GPX tracker:

Iphone map with gps tracker.png


This lib has on API similar to google maps, but there is only a minimum of methods.

To extend this API it should be possible to use methods of this lib to do all the thing you need on the map. There is no need to think other than WGS84 if you use this lib. The core component (that's what you see now) should stay very slim because of very tricky programming to opimize speed.

For animation loops you should have a 10ms between the calls. That will result in an animation that is as smooth as the hardware and software is able to. On slow browsers und slow hardware the framerate will be at about 2/s and on Gamerscomputer the full 100 frames should be possible. To reduce this value below 10ms will result in a not not optimized animation.

How to make animations? Just give the coordinates to the setCenter methods. You can hammer it with 100 requests per second.

Supported browsers

It's normal javascript and should run on all browsers. It runs best on webkit (except android), followed by opera 10.50, and firefox. IE does not work.

browser version os status comment
Chrome 5.0 Linux ok developed on chrome
Opera 10.51 10.51 Windows ok very good speed
Firefox linux 3.5.8 ok neares neighbour image zoom
iPhone iPhone OS 3.1 ok perfect multitouch, one finger zoom out
Android Browser Android 2.1 tested on htc legend please try the simple page:
Internet Explorer Windows >= 6.0 ok VML needs more testing and code cleanup
Konqueror Linux 4.4 ok

In the highscore list there are is an overview of browsers that enabled the users to use the map: [3]

Combination with other software:

software version status comment
jquery - - -
prototype - - -
iui - - -
phonegap - - -
wordpress - - -