├── testcases ├── basics │ ├── favicon.png │ ├── ui │ │ ├── scrollbar.png │ │ ├── scrollbar2.png │ │ ├── scrollbar3.png │ │ ├── scrollhandle3.png │ │ ├── scrollhandle4.png │ │ ├── copyright.html │ │ ├── scroller2.php │ │ ├── scroller.php │ │ ├── aa.xml │ │ ├── zoom4.html │ │ ├── zoom5.html │ │ ├── aa2.svg │ │ ├── zoom3.html │ │ ├── aa.svg │ │ └── scroller.svg │ ├── center │ │ ├── .simple.html.swp │ │ └── simple.html │ ├── marker │ │ ├── .mapmarker.html.swp │ │ ├── animatedMarkers │ │ │ ├── images │ │ │ │ └── star.png │ │ │ └── index.html │ │ ├── index.html │ │ ├── simple.html │ │ └── mapmarker.html │ ├── userinterface │ │ ├── scrollbar.png │ │ ├── scrollbar2.png │ │ ├── scrollbar3.png │ │ ├── scrollhandle3.png │ │ ├── scrollhandle4.png │ │ ├── copyright.html │ │ ├── scroller2.php │ │ ├── scroller.php │ │ ├── aa.xml │ │ ├── zoom4.html │ │ ├── zoom5.html │ │ ├── aa2.svg │ │ ├── aa.svg │ │ ├── zoom3.html │ │ └── scroller.svg │ ├── css │ │ ├── margin_padding │ │ │ ├── images │ │ │ │ ├── bild1.jpg │ │ │ │ └── images?q=tbn:TZcufLDwMaDjuM:http:%2F%2Fblende-10.de%2Fwp-content%2Fgallery%2Ffrauen%2Fbild2.jpg │ │ │ ├── index.html │ │ │ ├── bilder.html │ │ │ ├── test.css │ │ │ └── karten.html │ │ ├── index.html │ │ ├── mapinmap.html │ │ ├── design2.html │ │ ├── design.html │ │ └── design3.html │ ├── tiles │ │ ├── index.html │ │ ├── cyclemap.html │ │ ├── labels.html │ │ ├── openseaAndShade.html │ │ ├── hikebike.html │ │ ├── openseamap.html │ │ ├── i18n.html │ │ └── shade.html │ ├── animation │ │ ├── index.html │ │ ├── move.html │ │ └── zoom_resize.html │ ├── base │ │ ├── index.html │ │ ├── bounds.html │ │ ├── test.html │ │ ├── simple.html │ │ ├── smoothzoom.html │ │ ├── fullscreen.html │ │ ├── fullscreen2.html │ │ ├── iphone.html │ │ ├── callback.html │ │ └── randommap.html │ ├── first.html │ ├── showsrc.php │ ├── style.xslt │ ├── list.php │ └── index.html └── vector │ ├── start │ ├── line.html │ ├── line3.html │ └── line2.html │ ├── hole │ ├── simple.html │ ├── simplecss.html │ └── witharray.html │ ├── dyn │ ├── line.html │ ├── line2.html │ └── line3.html │ └── index.html ├── README ├── index.html └── js ├── keyboard.js ├── kgpx.js ├── zoombar.js ├── kmarker.js └── vector.js /testcases/basics/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/favicon.png -------------------------------------------------------------------------------- /testcases/basics/ui/scrollbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/ui/scrollbar.png -------------------------------------------------------------------------------- /testcases/basics/ui/scrollbar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/ui/scrollbar2.png -------------------------------------------------------------------------------- /testcases/basics/ui/scrollbar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/ui/scrollbar3.png -------------------------------------------------------------------------------- /testcases/basics/ui/scrollhandle3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/ui/scrollhandle3.png -------------------------------------------------------------------------------- /testcases/basics/ui/scrollhandle4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/ui/scrollhandle4.png -------------------------------------------------------------------------------- /testcases/basics/center/.simple.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/center/.simple.html.swp -------------------------------------------------------------------------------- /testcases/basics/marker/.mapmarker.html.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/marker/.mapmarker.html.swp -------------------------------------------------------------------------------- /testcases/basics/userinterface/scrollbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/userinterface/scrollbar.png -------------------------------------------------------------------------------- /testcases/basics/userinterface/scrollbar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/userinterface/scrollbar2.png -------------------------------------------------------------------------------- /testcases/basics/userinterface/scrollbar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/userinterface/scrollbar3.png -------------------------------------------------------------------------------- /testcases/basics/userinterface/scrollhandle3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/userinterface/scrollhandle3.png -------------------------------------------------------------------------------- /testcases/basics/userinterface/scrollhandle4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/userinterface/scrollhandle4.png -------------------------------------------------------------------------------- /testcases/basics/css/margin_padding/images/bild1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/css/margin_padding/images/bild1.jpg -------------------------------------------------------------------------------- /testcases/basics/tiles/index.html: -------------------------------------------------------------------------------- 1 |

tiles

2 | The map is made of millions of 256x256 pixel images. 3 | There are many maps in this format. 4 | 5 | -------------------------------------------------------------------------------- /testcases/basics/marker/animatedMarkers/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/marker/animatedMarkers/images/star.png -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | Project discontinued. Leaflet is perfect. 2 | 3 | This version is outdated. Please visit the new repository at: 4 | https://github.com/robotnic/khtml.maplib 5 | -------------------------------------------------------------------------------- /testcases/basics/marker/index.html: -------------------------------------------------------------------------------- 1 |

Markers

2 | Markers are bound to geographic coordinates. If the map is moved or zoomed, the marker will stick on the same geographic place. 3 | -------------------------------------------------------------------------------- /testcases/basics/animation/index.html: -------------------------------------------------------------------------------- 1 |

Animations

2 | Animations are done with loops and setTimeout. 3 | The lib should drop frames if the animation is too fast for the computer browser combination. 4 | -------------------------------------------------------------------------------- /testcases/basics/css/index.html: -------------------------------------------------------------------------------- 1 |

CSS styling

2 |

It should be possible to use the map in the same way as an image. 3 | margin, padding and border have the same effect as on images

4 |

It is possible to use the map positioned absolute and relative.

5 | -------------------------------------------------------------------------------- /testcases/basics/base/index.html: -------------------------------------------------------------------------------- 1 |

base API

2 |

This is the core of the library.

3 |

A slippy map is bound to a html div element. 4 | The size and position of the map is given by CSS. 5 | The longitude, latitude and zoom must be set to get visible map. 6 |

7 | 8 | -------------------------------------------------------------------------------- /testcases/basics/first.html: -------------------------------------------------------------------------------- 1 |

khtml lib test files

2 | This is the first part of test files. It includes base API and marker API. 3 |
4 | For API definition see : 5 | http://wiki.openstreetmap.org/wiki/Simple_map_API 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |

Welcome to khtml.maplib

2 | Please use the mouse wheel.
3 | Touchpads are even better usable.
4 |
5 |
6 | To see eamples go to the testcases
7 | Vector: to the testcases
8 | -------------------------------------------------------------------------------- /testcases/basics/showsrc.php: -------------------------------------------------------------------------------- 1 | importStylesheet($xslt); 7 | $html=$proc->transformToDoc($dom); 8 | echo $html->saveXML(); 9 | ?> 10 | -------------------------------------------------------------------------------- /testcases/basics/css/margin_padding/images/images?q=tbn:TZcufLDwMaDjuM:http:%2F%2Fblende-10.de%2Fwp-content%2Fgallery%2Ffrauen%2Fbild2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robotnic/khtmlib/HEAD/testcases/basics/css/margin_padding/images/images?q=tbn:TZcufLDwMaDjuM:http:%2F%2Fblende-10.de%2Fwp-content%2Fgallery%2Ffrauen%2Fbild2.jpg -------------------------------------------------------------------------------- /testcases/basics/css/margin_padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 9 |

Styling with CSS - compare image and map styling

10 | 12 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /testcases/basics/css/margin_padding/bilder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /testcases/basics/ui/copyright.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 |
khtml 6 | Creative Commons Lizenzvertrag 8 | openstreetmap.org 9 |
10 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/copyright.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 |
khtml 6 | Creative Commons Lizenzvertrag 8 | openstreetmap.org 9 |
10 | -------------------------------------------------------------------------------- /testcases/basics/base/bounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /testcases/basics/base/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 21 | 22 | 23 |

Have a look at the html source to see what's going on

24 | This is the most often used map 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /testcases/basics/base/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 21 | 22 | 23 |

Have a look at the html source to see what's going on

24 | This is the most often used map 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /testcases/basics/base/smoothzoom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 22 | 23 | 24 |

Have a look at the html source to see what's going on

25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /testcases/basics/base/fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /testcases/basics/base/fullscreen2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /testcases/basics/tiles/cyclemap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 29 | 30 | 31 |

Cyclemap

32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /testcases/basics/css/margin_padding/test.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | .image{ 5 | display:inline; 6 | background-color:white; 7 | border:1px solid black; 8 | height:200px; 9 | width:200px; 10 | padding:10px; 11 | margin:10px; 12 | display:block; 13 | } 14 | 15 | #bild2{ 16 | border:1px solid #efefef; 17 | background-color:white; 18 | -moz-box-shadow: 1px 1px 14px #dfdfdf; 19 | -webkit-box-shadow: 1px 1px 14px #dfdfdf; 20 | box-shadow: 1px 1px 14px #dfdfdf; 21 | position:absolute; 22 | top:0px; 23 | left:260px; 24 | } 25 | 26 | 27 | #bild3{ 28 | border:1px solid #efefef; 29 | background-color:white; 30 | -moz-box-shadow: 1px 1px 14px #dfdfdf; 31 | -webkit-box-shadow: 1px 1px 14px #dfdfdf; 32 | box-shadow: 1px 1px 14px #dfdfdf; 33 | width:400px; 34 | } 35 | 36 | 37 | #bild4{ 38 | border:1px solid #efefef; 39 | background-color:white; 40 | -moz-box-shadow: 1px 1px 14px #dfdfdf; 41 | -webkit-box-shadow: 1px 1px 14px #dfdfdf; 42 | box-shadow: 1px 1px 14px #dfdfdf; 43 | padding:2px; 44 | width:100px; 45 | height:100px; 46 | } 47 | -------------------------------------------------------------------------------- /testcases/basics/center/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 36 | 37 | 38 |

Have a look at the html source to see what's going on

39 | This is the most often used map 40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /testcases/vector/start/line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 35 | 36 | 37 |

Polyline on map

38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /testcases/basics/tiles/labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 34 | 35 | 36 |

Openseamap

37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /testcases/basics/css/mapinmap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 23 | 44 | 45 | 46 |

Map with small overview map

47 |
48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /testcases/basics/marker/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 31 | 32 | 33 |

Simple Marker

34 | Markers are normal html things. They are mounted to GPS (wgs84) coordinates. Markers are normal html dom elements. 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /testcases/basics/style.xslt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | < 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | =" 24 | 25 | 26 | 27 | " 28 | 29 | > 30 | 31 | 32 | 
33 | 			
34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | </ 42 | 43 | 44 | 45 | > 46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /testcases/basics/base/iphone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | GPS Map 5 | 6 | 7 | 8 | 9 | 23 | 24 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /testcases/basics/tiles/openseaAndShade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 41 | 42 | 43 |

Openseamap

44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /testcases/vector/start/line3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 39 | 40 | 41 |

Have a look at the html source to see what's going on

42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /testcases/basics/marker/mapmarker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 38 | 39 | 40 |

Map as Marker

41 | The marker is a complete slippy map. 42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /testcases/vector/hole/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 39 | 40 | 41 |

Have a look at the html source to see what's going on

42 | This is the most often used map 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /js/keyboard.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | khtml.maplib.Map.prototype.keydown=function(evt){ 4 | //alert(evt.keyCode); 5 | switch(evt.keyCode){ 6 | case 37: 7 | this.moveit(30,0); 8 | break; 9 | 10 | case 38: 11 | this.moveit(0,30); 12 | break; 13 | 14 | case 39: 15 | this.moveit(-30,0); 16 | break; 17 | case 40: 18 | this.moveit(0,-30); 19 | break; 20 | case 187: //plus 21 | case 61: //plus 22 | var dz=Math.ceil(this.getZoom() + 0.01) - this.getZoom(); 23 | this.autoZoomIn(this.mapsize.width/2,this.mapsize.height/2,dz); 24 | break; 25 | case 189: //minus 26 | case 109: //minus 27 | var dz=Math.floor(this.getZoom() - 0.01) - this.getZoom(); 28 | this.autoZoomIn(this.mapsize.width/2,this.mapsize.height/2,dz); 29 | break; 30 | } 31 | } 32 | 33 | khtml.maplib.Map.prototype.keyup=function(evt){ 34 | // alert(77); 35 | } 36 | 37 | khtml.maplib.Map.prototype.moveit=function(x,y){ 38 | var steps=20; 39 | var dx=x/steps; 40 | var dy=y/steps; 41 | for(var i=0; i < steps;i++){ 42 | var f=Math.cos(3*(-steps/2+i)/steps)*5; 43 | this.moveitexec(dx*f,dy*f,i); 44 | } 45 | } 46 | 47 | khtml.maplib.Map.prototype.moveitexec=function(dx,dy,i){ 48 | 49 | var that=this; 50 | var tempFunc=function(){ 51 | that.moveXY(dx,dy); 52 | } 53 | setTimeout(tempFunc,20*i); 54 | 55 | } 56 | -------------------------------------------------------------------------------- /testcases/basics/tiles/hikebike.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | OpenStreetMap Hike & Bike Map 4 | 5 | 6 | 7 | 8 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /testcases/vector/dyn/line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 | 50 | 51 | 52 |

Dancing Polyline

53 |

Move Points of existing Polyline

54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /testcases/vector/start/line2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 20 | 21 | 22 | 23 | 49 | 50 | 51 |

Have a look at the html source to see what's going on

52 |
53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /testcases/vector/dyn/line2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 | 49 | 50 | 51 |

Have a look at the html source to see what's going on

52 |
53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /testcases/vector/hole/simplecss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 47 | 48 | 49 |

CSS Styling

50 | Vectors styled by css 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /testcases/basics/css/margin_padding/karten.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 34 | 35 | 36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /testcases/basics/marker/animatedMarkers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 54 | 55 | 56 |
57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /testcases/basics/css/design2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 51 | 52 | 63 | 64 | 65 |
66 |
67 |
68 |
69 |

HTML inside Map

70 |
71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /testcases/basics/tiles/openseamap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 41 | 42 | 43 |

Openseamap

44 | The wonderful seamap!!
45 | One of the coolest OSM Projects!!! 46 |
47 |
48 | Zoom in to see spezial openseamap overlay. 49 |
50 |

The tiles needs better antialiazing. 51 | No idea how the tiles are generated, but try to user invisible background: alpha=0, transparenzy=nada, white=no, color=no, nothing=yes
52 | Antializing = prevent Augenkrebs 53 |

54 | 55 | 56 | -------------------------------------------------------------------------------- /testcases/basics/tiles/i18n.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 44 | 45 | 46 |

Deutsche Bezeichungen

47 | Ich mag die internationale Karte. Es gibt aber auch alles auf deutsch.
48 | Man beachte, dass selbst Hauptstädte noch keinen deutschen Eintrag haben (laos, cambodia). 49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /testcases/basics/base/callback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 42 | 43 | 44 |
45 |

Center of Map

46 |
lat: 0
47 |
lng: 0
48 |
zoom: 0
49 |

Coordinats at mouse position

50 |
lat: 0
51 |
lng: 0
52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /testcases/vector/dyn/line3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 24 | 67 | 68 | 69 |

1 deg grid

70 |
71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /testcases/basics/ui/scroller2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | scroller 4 | 12 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/scroller2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | scroller 4 | 12 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /testcases/basics/base/randommap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 52 | 53 | 54 |

30 active maps on a single page

55 |

Page should scroll without performance problems. The maps will take the mousescroll event

56 | 57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /testcases/vector/hole/witharray.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 57 | 58 | 59 |

Coordinates are stored in array

60 | This is the most often used map 61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /testcases/basics/ui/scroller.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /testcases/basics/tiles/shade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 45 | 46 | 47 |

Hill Shade

48 | This very cool Overlay is provided by:
49 | Please email me the copyright conditions. 50 |
51 | For higher to medium zoom levels it's perfect. For other zoomlevels maybe supercomputer power whould be cool. 52 | And the satelite data from twin sats.
53 | This map lib is lgpl - feel free to use. 54 |
55 |
56 | And please add the holy planet - at least the Himalaya. 57 | 58 | 59 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/scroller.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /testcases/basics/animation/move.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 50 | 51 | 52 |
53 |

Center of Map

54 |
lat: 0
55 |
lng: 0
56 |
zoom: 0
57 |

Coordinats at mouse position

58 |
lat: 0
59 |
lng: 0
60 |
61 | 62 |

move by pixel

63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /testcases/basics/ui/aa.xml: -------------------------------------------------------------------------------- 1 | 2 | scroller 3 | 11 | 49 | 50 | 51 | 051015 52 | 53 | 54 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/aa.xml: -------------------------------------------------------------------------------- 1 | 2 | scroller 3 | 11 | 49 | 50 | 51 | 051015 52 | 53 | 54 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /testcases/basics/animation/zoom_resize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 20 | 21 | 87 | 88 | 89 |

Frame based Animations

90 |

The map libaray should automaticaly drop frames if the load is too high to prevent stall. Before loosing animation, slow overlays are dropped. Firefox has weak support for that. 91 |

92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /testcases/basics/ui/zoom4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 68 | 69 | 70 |
71 | 72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 |

Center of Map

80 |
lat: 0
81 |
lng: 0
82 |
zoom: 0
83 |

Coordinats at mouse position

84 |
lat: 0
85 |
lng: 0
86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /testcases/basics/ui/zoom5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 68 | 69 | 70 |
71 | 72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 |

Center of Map

80 |
lat: 0
81 |
lng: 0
82 |
zoom: 0
83 |

Coordinats at mouse position

84 |
lat: 0
85 |
lng: 0
86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /testcases/basics/ui/aa2.svg: -------------------------------------------------------------------------------- 1 | 2 | scroller 3 | 11 | 49 | 50 | 51 | 52 | 53 | 54 | 051015 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/zoom4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 68 | 69 | 70 |
71 | 72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 |

Center of Map

80 |
lat: 0
81 |
lng: 0
82 |
zoom: 0
83 |

Coordinats at mouse position

84 |
lat: 0
85 |
lng: 0
86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/zoom5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 68 | 69 | 70 |
71 | 72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 |

Center of Map

80 |
lat: 0
81 |
lng: 0
82 |
zoom: 0
83 |

Coordinats at mouse position

84 |
lat: 0
85 |
lng: 0
86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /testcases/basics/ui/zoom3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 68 | 69 | 70 |
71 |
72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 |

Center of Map

80 |
lat: 0
81 |
lng: 0
82 |
zoom: 0
83 |

Coordinats at mouse position

84 |
lat: 0
85 |
lng: 0
86 |
87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /testcases/basics/ui/aa.svg: -------------------------------------------------------------------------------- 1 | 2 | scroller 3 | 11 | 49 | 50 | 51 | 52 | 53 | 54 | 051015 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/aa2.svg: -------------------------------------------------------------------------------- 1 | 2 | scroller 3 | 11 | 49 | 50 | 51 | 52 | 53 | 54 | 051015 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/aa.svg: -------------------------------------------------------------------------------- 1 | 2 | scroller 3 | 11 | 49 | 50 | 51 | 52 | 53 | 54 | 051015 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/zoom3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 68 | 69 | 70 |

Sehr oft findet man ein User Interface auf Web-Karten.

71 | 72 |
73 |
74 |
75 | 76 |
77 |
78 | 79 | 80 |
81 |

Center of Map

82 |
lat: 0
83 |
lng: 0
84 |
zoom: 0
85 |

Coordinats at mouse position

86 |
lat: 0
87 |
lng: 0
88 |
89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /testcases/basics/ui/scroller.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 0510152005101520 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /testcases/basics/userinterface/scroller.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 0510152005101520 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /js/kgpx.js: -------------------------------------------------------------------------------- 1 | // 2 | // This object takes an XML DOM Object or an XML String 3 | // The second parameter is an optional className for styling 4 | // 5 | 6 | khtml.maplib.Gpx=function(gpx,classname) { 7 | 8 | //privat helper function - makes a dom Object from string 9 | function MyParseXml(xmlString) 10 | { 11 | var xmlDoc; 12 | //for IE 13 | if (window.ActiveXObject) 14 | { 15 | xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 16 | xmlDoc.async = false; 17 | xmlDoc.loadXML(xmlString); 18 | } 19 | //for Mozilla, Firefox, Opera, etc. 20 | else if (document.implementation && document.implementation.createDocument) 21 | { 22 | var parser = new DOMParser(); 23 | xmlDoc = parser.parseFromString(xmlString,"text/xml"); 24 | } 25 | return xmlDoc; 26 | } 27 | 28 | 29 | // 30 | // START 31 | // 32 | 33 | if(typeof(gpx)=="string"){ //test if parameter is a string or dom object 34 | this.dom=MyParseXml(gpx); 35 | }else{ 36 | this.dom=gpx; 37 | } 38 | 39 | this.layer=new khtml.maplib.Vector() 40 | if(classname){ 41 | this.classname=classname; 42 | } 43 | 44 | this.minlat=90; 45 | this.maxlat=-90; 46 | this.minlng=180; 47 | this.maxlng=-180; 48 | 49 | 50 | var trksegs=this.dom.getElementsByTagName("trkseg"); 51 | //iterate all track segments 52 | for(var i=0; i < trksegs.length;i++){ 53 | var pointArray=new Array(); 54 | 55 | var trkseg=trksegs.item(i); 56 | var trkpts=trkseg.getElementsByTagName("trkpt"); 57 | //iterate all trackpoints 58 | for(var j=0; j < trkpts.length;j++){ 59 | var trkpt=trkpts.item(j); 60 | var lat=parseFloat(trkpt.getAttribute("lat")); 61 | var lng=parseFloat(trkpt.getAttribute("lon")); 62 | pointArray.push(new khtml.maplib.Point(lat,lng)); 63 | 64 | //calulate bounds 65 | if(this.minlat > lat) this.minlat=lat; 66 | if(this.maxlat < lat) this.maxlat=lat; 67 | if(this.minlng > lng) this.minlng=lng; 68 | if(this.maxlng < lng) this.maxlng=lng; 69 | } 70 | var line=this.layer.createPolyline(pointArray); 71 | if(this.classname){ 72 | line.className=classname; 73 | }else{ 74 | line.style.fill="none"; 75 | line.style.stroke="blue"; 76 | line.style.strokeWidth="2"; 77 | } 78 | } 79 | 80 | 81 | this.init=function(mapObj){ 82 | // call method in kvector.js 83 | this.layer.init(mapObj); 84 | } 85 | this.render=function(){ 86 | // call method in kvector.js 87 | this.layer.render(); 88 | } 89 | this.bounds=function(){ 90 | var sw=new khtml.maplib.Point(this.minlat,this.minlng); 91 | var ne=new khtml.maplib.Point(this.maxlat,this.maxlng); 92 | var bounds=new khtml.maplib.Bounds(sw,ne); 93 | return bounds; 94 | } 95 | this.clear=function(){ 96 | this.layer.clear(); 97 | } 98 | 99 | 100 | 101 | 102 | } 103 | 104 | -------------------------------------------------------------------------------- /testcases/basics/css/design.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 39 | 40 | 57 | 58 | 59 |
60 |

float design

61 |

62 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 63 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 64 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 65 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 66 |

67 |
68 |

69 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 70 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 71 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 72 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 73 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 74 |

75 |
76 |

77 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 78 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 79 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 80 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 81 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 82 |

83 | 84 |
85 | 86 | 87 | -------------------------------------------------------------------------------- /js/zoombar.js: -------------------------------------------------------------------------------- 1 | //zoombar 2 | //licence LGPL 3 | //Author: Bernhard Zwischenbrugger 2010 4 | 5 | //this class expect 2 elements with specific classes in the map div 6 | //zoombar and scrollhandle 7 | /* 8 |
9 |
10 |
11 | 12 |
13 | */ 14 | 15 | 16 | khtml.maplib.ZoomUI=function(){ 17 | 18 | //called by maplib once 19 | this.init=function(themap){ 20 | this.themap=themap; 21 | var els=themap.mapParent.getElementsByTagName("*"); 22 | for(var i=0;i < els.length; i++){ 23 | var el=els.item(i); 24 | if(el.className=="scrollhandle"){ 25 | this.scrollhandle=el; 26 | } 27 | if(el.className=="zoombar"){ 28 | this.zoombar=el; 29 | } 30 | } 31 | Event.attach(this.zoombar, "mousedown", this.down, this, false); 32 | Event.attach(this.zoombar, "mousemove", this.move, this, false); 33 | Event.attach(this.zoombar, "mouseup", this.up, this, false); 34 | 35 | } 36 | //called by maplib on every map change 37 | this.render=function(){ 38 | var top=(22 -this.themap.zoom() )*10 ; 39 | var height=220 -top; 40 | this.scrollhandle.style.marginTop=top+"px"; 41 | } 42 | 43 | this.down=function(evt){ 44 | if (evt.preventDefault) { 45 | evt.preventDefault(); // The W3C DOM way 46 | } else { 47 | evt.returnValue = false; // The IE way 48 | } 49 | this.moving=true; 50 | var y=this.themap.pageY(evt); 51 | var z=(22-y/10); 52 | this.themap.zoom(z); 53 | evt.cancelBubble = true; 54 | if (evt.stopPropagation) evt.stopPropagation(); 55 | } 56 | this.move=function(evt){ 57 | if (evt.preventDefault) { 58 | evt.preventDefault(); // The W3C DOM way 59 | } else { 60 | evt.returnValue = false; // The IE way 61 | } 62 | if(this.moving){ 63 | var y=this.themap.pageY(evt); 64 | var z=(22-y/10); 65 | this.themap.zoom(z); 66 | evt.cancelBubble = true; 67 | if (evt.stopPropagation) evt.stopPropagation(); 68 | } 69 | 70 | } 71 | this.up=function(evt){ 72 | if (evt.preventDefault) { 73 | evt.preventDefault(); // The W3C DOM way 74 | } else { 75 | evt.returnValue = false; // The IE way 76 | } 77 | this.moving=false; 78 | evt.cancelBubble = true; 79 | if (evt.stopPropagation) evt.stopPropagation(); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /js/kmarker.js: -------------------------------------------------------------------------------- 1 | // 2 | // Marker Object - work in progress 3 | // There should be a possibility to add orbitrary html as marker 4 | // 5 | 6 | khtml.maplib.Marker=function(point, el,options) { 7 | 8 | var div = document.createElement("div"); 9 | div.appendChild(el); 10 | div.style.position = "absolute"; 11 | 12 | if(options){ 13 | if(options.dy){ 14 | div.style.top = options.dy; 15 | }else{ 16 | div.style.top = "0px"; 17 | } 18 | if(options.dx){ 19 | div.style.left = options.dx; 20 | }else{ 21 | div.style.left = "0px"; 22 | } 23 | }else{ 24 | div.style.top = "0px"; 25 | div.style.left = "0px"; 26 | } 27 | var div2=document.createElement("div"); 28 | div2.style.position = "absolute"; 29 | div2.appendChild(div); 30 | this.marker = div2; 31 | this.point = point; 32 | this.options = options; 33 | this.el=el 34 | 35 | this.init = function (mapObj) { 36 | this.mapObj=mapObj; 37 | mapObj.overlayDiv.appendChild(this.marker); 38 | //this.render(); 39 | } 40 | this.render = function () { 41 | if(!this.marker)return; 42 | if(!this.point)return; 43 | if(isNaN(this.point.lat()))return; 44 | if(isNaN(this.point.lng()))return; 45 | var xy = this.mapObj.latlngToXY(this.point); 46 | if (xy["x"] < 0 || xy["y"] < 0) { // <---- flag ; workaround for overflow:hidden bug 47 | this.marker.style.display = "none"; 48 | } else { 49 | this.marker.style.display = ""; 50 | this.marker.style.left = xy["x"] + "px"; 51 | this.marker.style.top = (xy["y"] ) + "px"; 52 | } 53 | if(!this.marker.parentNode){ 54 | this.mapObj.overlayDiv.appendChild(this.marker); 55 | } 56 | } 57 | this.position=function(pos){ 58 | if(pos){ 59 | this.point=pos; 60 | this.render(); 61 | } 62 | return this.point; 63 | } 64 | 65 | this.clear=function(){ 66 | if(this.marker){ 67 | if(this.marker.parentNode){ 68 | try{ 69 | this.mapObj.overlayDiv.removeChild(this.marker); 70 | }catch(e){} 71 | } 72 | } 73 | } 74 | /* 75 | this.moveTo = function (point) { 76 | this.point = point; 77 | this.render(); 78 | } 79 | */ 80 | 81 | 82 | /* Moveable extension */ 83 | 84 | this.makeMoveable=function(){ 85 | Event.attach(this.marker,"mousedown",this.down,this,false); 86 | Event.attach(window,"mousemove",this.move,this,true); 87 | Event.attach(window,"mouseup",this.up,this,true); 88 | } 89 | this.moving=false; 90 | this.dx=0; 91 | this.dy=0; 92 | this.down=function(evt){ 93 | this.moving=true; 94 | this.dx=this.marker.offsetLeft - this.mapObj.pageX(evt) 95 | this.dy=this.marker.offsetTop - this.mapObj.pageY(evt) 96 | } 97 | this.move=function(evt){ 98 | if(this.moving){ 99 | var x=this.mapObj.pageX(evt) +this.dx; 100 | var y=this.mapObj.pageY(evt) +this.dy; 101 | //this.marker.style.left=x+"px"; 102 | //this.marker.style.top=y+"px"; 103 | this.point=this.mapObj.XYTolatlng(x,y); 104 | this.render(); 105 | evt.stopPropagation(); 106 | } 107 | } 108 | this.up=function(){ 109 | this.moving=false; 110 | } 111 | } 112 | 113 | -------------------------------------------------------------------------------- /testcases/vector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 101 | 122 | 123 | 124 | 135 | 144 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /testcases/basics/list.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 112 | 133 | 134 | 135 | 172 | 181 | 184 | 185 | 186 | 191 | -------------------------------------------------------------------------------- /testcases/basics/css/design3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 61 | 62 | 91 | 92 | 93 |
94 |
95 |

Small maps are fast!!!

96 | Try to resize the browser window. 97 |

98 | The map tiles are positioned absolute. 99 | To have absolute positioning on float design is not easy. 100 | It is very likely to have problems here. 101 | The border width makes problems for example. 102 | quirx, standard, browser - bring testcases. 103 |

104 |
105 |

106 | Auf der nächsten Karte haben wir ein bild von der Kambodschanischen Provinz Seam Reap. 107 | Wenn man hinein zoomt, kann man deutlich Angkor Wat sehen. 108 | Sicher eines der Ziele die man eher in näherer Zukunft inspizieren sollte. 109 |

110 |

Die Palmeninsel!

111 |
112 |

113 | Für Kartographen ein gefundenes Fressen. 114 |

115 |
116 |
117 |

118 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 119 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 120 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 121 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 122 |

123 |
124 |

125 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 126 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 127 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 128 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 129 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 130 |

131 |
132 |

133 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 134 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 135 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 136 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 137 | Diese Karte wird vom Text umflossen. Das kann man per CSS und float:right. machen. 138 |

139 |
140 | 141 |
142 | 143 | 144 | -------------------------------------------------------------------------------- /testcases/basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 101 | 122 | 123 | 124 | 155 | 164 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /js/vector.js: -------------------------------------------------------------------------------- 1 | khtml.maplib.Vector=function(){ 2 | this.lineArray=new Array(); 3 | this.dropCount=0; 4 | this.stopit=false; 5 | this.backend="svg"; 6 | if (navigator.userAgent.indexOf("Android") != -1) { 7 | this.backend="canvas"; 8 | } 9 | this.svgStyleInterface=false; 10 | if (navigator.userAgent.indexOf("MSIE") != -1) { 11 | if(getInternetExplorerVersion() < 9){ 12 | this.backend="vml"; 13 | } 14 | } 15 | this.canvasClassStyles=new Array(); 16 | 17 | this.boundsSouth=90; 18 | this.boundsNorth=-90; 19 | this.boundsWest=180; 20 | this.boundsEast=-180; 21 | 22 | this.renderbackend=function(render){ 23 | 24 | this.backend=render; 25 | 26 | this.themap.overlayDiv.removeChild(this.vectorEl); 27 | this.vectorEl=this.createVectorElement(this.themap); 28 | this.themap.overlayDiv.appendChild(this.vectorEl); 29 | 30 | this.render(); 31 | } 32 | 33 | //create a svg, canvas or vml element 34 | this.createVectorElement=function(themap){ 35 | switch(this.backend){ 36 | case "canvas": 37 | vectorEl=document.createElement("canvas"); 38 | this.ctx=vectorEl.getContext("2d"); 39 | break; 40 | case "svg": 41 | vectorEl=document.createElementNS("http://www.w3.org/2000/svg","svg"); 42 | break; 43 | case "vml": 44 | if(document.namespaces['v'] == null) { 45 | document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); 46 | var stl = document.createStyleSheet(); 47 | stl.addRule("v\\:group", "behavior: url(#default#VML);"); 48 | stl.addRule("v\\:polyline", "behavior: url(#default#VML);"); 49 | } 50 | //vectorEl=document.createElement("v:group"); 51 | vectorEl=document.createElement("div"); 52 | //document.body.appendChild(vectorEl); 53 | //vectorEl.style.display="none"; 54 | break; 55 | default: 56 | alert("error: unknown vector backend"); 57 | 58 | } 59 | vectorEl.style.width=themap.mapsize.width+"px"; 60 | vectorEl.style.height=themap.mapsize.height+"px"; 61 | vectorEl.setAttribute("height",themap.mapsize.height+"px"); 62 | vectorEl.setAttribute("width",themap.mapsize.width+"px"); 63 | vectorEl.style.position="absolute"; 64 | vectorEl.style.top="0"; 65 | vectorEl.style.left="0"; 66 | return vectorEl; 67 | } 68 | this.init=function(themap){ 69 | this.themap=themap; 70 | this.vectorEl=this.createVectorElement(themap); 71 | themap.overlayDiv.appendChild(this.vectorEl); 72 | } 73 | this.createPolyline=function(pointArray){ 74 | 75 | var polyline=new Object; 76 | polyline.style=new Object; 77 | polyline.events=new Object; 78 | polyline.tags=new Array; 79 | polyline.className=null; 80 | polyline.close=false; 81 | polyline.id=null; 82 | polyline.holes=new Array; 83 | polyline.cutout=function(points){ 84 | var holePoints=parseLine(points); 85 | //console.log(holePoints.length); 86 | polyline.holes.push(holePoints); 87 | return polyline.holes[polyline.holes.length -1]; 88 | } 89 | polyline.points=parseLine(pointArray); 90 | 91 | this.lineArray.unshift(polyline); 92 | this.makeBounds(polyline.points); 93 | return polyline; 94 | 95 | } 96 | 97 | function parseLine(pointArray){ 98 | if(pointArray){ 99 | if(typeof(pointArray)=="string"){ 100 | points=new Array(); 101 | var pa=pointArray.split(" "); 102 | for(var i=0; i < pa.length;i++){ 103 | var point=pa[i].split(","); 104 | if(point.length !=2) continue; 105 | point[0]=parseFloat(point[0]); 106 | point[1]=parseFloat(point[1]); 107 | points.push(new khtml.maplib.Point(point[0],point[1])); 108 | } 109 | } 110 | if(typeof(pointArray)=="object"){ 111 | points=pointArray; 112 | } 113 | }else{ 114 | points=new Array(); 115 | } 116 | return points; 117 | } 118 | 119 | this.cancel=function(){ 120 | this.stopit = true; 121 | } 122 | this.render=function(a){ 123 | var intZoom=Math.floor(this.themap.zoom()); 124 | this.vectorEl.setAttribute("class","z"+intZoom); 125 | if(this.stopit){ 126 | //stop rendering vectors 127 | this.stopit=false; 128 | if(a!=null){ 129 | if(this.oldVectorEl && this.oldVectorEl.parentNode){ 130 | //draw not finished - go back to old version (move) 131 | try{ //ie workaround 132 | this.oldVectorEl.parentNode.removeChild(this.oldVectorEl); 133 | this.vectorEl=this.createVectorElement(this.themap); 134 | this.themap.overlayDiv.appendChild(this.vectorEl); 135 | }catch(e){ 136 | alert(this.oldVectorEl.tagName); 137 | alert(this.oldVectorEl.parentNode.tagName); 138 | 139 | } 140 | } 141 | return; 142 | } 143 | } 144 | if(a==null){ 145 | if(this.oldZoom==this.themap.zoom() &&(this.themap.moveX!=this.lastMoveX || this.themap.moveY!=this.lastMoveY)){ 146 | //this.oldVectorEl=this.vectorEl; 147 | //this.vectorEl=this.createVectorElement(this.themap); 148 | var dx=Math.round((this.themap.moveX - this.lastMoveX)*this.themap.faktor*this.themap.sc); 149 | var dy=Math.round((this.themap.moveY - this.lastMoveY)*this.themap.faktor*this.themap.sc); 150 | 151 | this.vectorEl.style.top=dy+"px"; 152 | this.vectorEl.style.left=dx+"px"; 153 | //alert(this.vectorEl.style.top); 154 | 155 | if(!this.themap.finalDraw){ 156 | return; 157 | } 158 | this.oldVectorEl=this.vectorEl; 159 | this.vectorEl=this.createVectorElement(this.themap); 160 | } 161 | this.oldZoom=this.themap.zoom(); 162 | this.clear(); 163 | var a=this.lineArray.length -1; 164 | } 165 | if(a < 0){ 166 | if(this.oldVectorEl && this.oldVectorEl.parentNode ){ 167 | this.oldVectorEl.parentNode.replaceChild(this.vectorEl,this.oldVectorEl); 168 | this.vectorEl.style.display=""; 169 | return; 170 | } 171 | return; 172 | } 173 | 174 | 175 | this.lastMoveX=this.themap.moveX; 176 | this.lastMoveY=this.themap.moveY; 177 | 178 | this.dropped=null; 179 | 180 | //set styles 181 | var l=this.lineArray[a].points; 182 | var className=this.lineArray[a].className; 183 | if(this.backend=="canvas"){ 184 | if(!className)className="khtmlDummyClassname9483"; //hopefully nobody will use this classname 185 | if(!this.canvasClassStyles[className]){ 186 | this.canvasClassStyles[className]=getCssStyles(className); 187 | } 188 | 189 | var style=this.lineArray[a].style; 190 | var close=this.lineArray[a].close; 191 | if(style.opacity){ 192 | var opacity=style.opacity; 193 | }else{ 194 | var opacity=this.canvasClassStyles[className].opacity; 195 | } 196 | if(style.fillOpacity){ 197 | var fillOpacity=style.fillOpacity; 198 | }else{ 199 | var fillOpacity=this.canvasClassStyles[className].fillOpacity; 200 | } 201 | if(style.strokeOpacity){ 202 | var strokeOpacity=style.strokeOpacity; 203 | }else{ 204 | var strokeOpacity=this.canvasClassStyles[className].strokeOpacity; 205 | } 206 | if(style.stroke){ 207 | var stroke=hex2rgba(style.stroke,opacity*strokeOpacity); 208 | }else{ 209 | var stroke=this.canvasClassStyles[className].stroke; 210 | } 211 | if(style.fill){ 212 | var fill=hex2rgba(style.fill,opacity*fillOpacity); 213 | }else{ 214 | var fill=this.canvasClassStyles[className].fill; 215 | } 216 | if(fill!="none"){ 217 | close=true; 218 | } 219 | if(style.strokeWidth){ 220 | var strokeWidth=style.strokeWidth; 221 | }else{ 222 | var strokeWidth=this.canvasClassStyles[className].strokeWidth; 223 | } 224 | } 225 | 226 | 227 | 228 | //initialize the polyline 229 | switch(this.backend){ 230 | case "canvas": 231 | this.ctx.beginPath(); 232 | this.ctx.strokeStyle = stroke; 233 | this.ctx.fillStyle = fill; 234 | this.ctx.lineWidth = strokeWidth; 235 | break; 236 | case "svg": 237 | var path=document.createElementNS("http://www.w3.org/2000/svg","path"); 238 | if(this.lineArray[a].className!=null){ 239 | path.setAttribute("class",this.lineArray[a].className); 240 | path.polyline=this.lineArray[a]; 241 | } 242 | if(this.lineArray[a].id!=null){ 243 | path.setAttribute("id",this.lineArray[a].id); 244 | } 245 | for(var ev in this.lineArray[a].events){ 246 | Event.attach(path, ev, this.lineArray[a].events[ev], this, false); 247 | } 248 | var ffStyleString=""; 249 | for(var prop in this.lineArray[a].style){ 250 | var name=""; 251 | for(var w=0;w < prop.length;w++){ 252 | var chr=prop[w]; 253 | if(chr.match(/[A-Z]/)){ 254 | name=name+"-"+chr.toLowerCase(); 255 | }else{ 256 | name=name+chr; 257 | } 258 | } 259 | //path.setAttribute(name,this.lineArray[a].style[prop]); 260 | if(this.svgStyleInterface){ 261 | path.style[name]=this.lineArray[a].style[prop]; 262 | }else{ 263 | ffStyleString=ffStyleString+name+":"+this.lineArray[a].style[prop]+";"; 264 | } 265 | } 266 | if(!this.svgStyleInterface){ 267 | if(ffStyleString!=""){ 268 | path.setAttribute("style",ffStyleString); 269 | } 270 | } 271 | /* 272 | path.setAttribute("stroke",stroke); 273 | path.setAttribute("stroke-width",strokeWidth); 274 | path.setAttribute("fill",fill); 275 | */ 276 | break; 277 | case "vml": 278 | var path=document.createElement("v:polyline"); 279 | path.setAttribute("fillcolor",fill); 280 | path.setAttribute("strokecolor",stroke); 281 | path.setAttribute("strokeweight",strokeWidth +"px"); 282 | break; 283 | 284 | 285 | } 286 | 287 | //calculate polyline path 288 | for(var i=0;i < l.length;i++){ 289 | var p=this.themap.latlngToXY(l[i]); 290 | 291 | switch(this.backend){ 292 | case "canvas": 293 | //this.ctx.globalCompositeOperation = 'source-over'; 294 | if(i==0){ 295 | this.ctx.moveTo(p["x"],p["y"]); 296 | }else{ 297 | var dropped=this.dropped; 298 | if(this.deside(p) || i==l.length -1){ 299 | if(dropped && i!=l.length -1){ 300 | this.ctx.lineTo(dropped["x"],dropped["y"]); 301 | } 302 | this.ctx.lineTo(p["x"],p["y"]); 303 | } 304 | } 305 | break; 306 | case "svg": 307 | if(i==0){ 308 | var d="M"+p["x"]+","+p["y"]; 309 | }else{ 310 | var dropped=this.dropped; 311 | if(this.deside(p) || i==l.length -1){ 312 | if(dropped && i!=l.length -1){ 313 | d+=" L"+dropped["x"]+","+dropped["y"]; 314 | } 315 | d+=" L"+p["x"]+","+p["y"]; 316 | } 317 | } 318 | break; 319 | case "vml": 320 | var x=Math.round(p["x"]); 321 | var y=Math.round(p["y"]); 322 | if(i==0){ 323 | //var d=" "+x+"px,"+y+"px "; 324 | var d=" "+x+","+y+" "; 325 | }else{ 326 | var dropped=this.dropped; 327 | if(this.deside(p) || i==l.length -1){ 328 | if(dropped && i!=l.length -1){ 329 | //d+=" "+parseInt(dropped["x"])+"px,"+parseInt(dropped["y"])+"px "; 330 | d+=" "+Math.round(dropped["x"])+","+Math.round(dropped["y"])+" "; 331 | } 332 | d+=" "+x+","+y+" "; 333 | //d+=" "+x+"px,"+y+"px "; 334 | } 335 | } 336 | break; 337 | 338 | 339 | } 340 | } 341 | if(this.lineArray[a].close){ 342 | d=d+" z"; 343 | } 344 | if(this.backend=="canvas"){ 345 | this.ctx.globalCompositeOperation = 'source-over'; 346 | if(close){ 347 | this.ctx.closePath(); 348 | this.ctx.fill(); 349 | } 350 | this.ctx.stroke(); 351 | } 352 | 353 | //holes 354 | for(var k=0; k < this.lineArray[a].holes.length;k++){ 355 | var hole=this.lineArray[a].holes[k]; 356 | if(this.backend=="canvas"){ 357 | this.ctx.beginPath(); 358 | this.ctx.fillStyle = "#000000"; 359 | this.ctx.globalCompositeOperation = 'destination-out'; 360 | } 361 | for( var m=0; m < hole.length;m++){ 362 | var p=this.themap.latlngToXY(hole[m]); 363 | var x=Math.round(p["x"]); 364 | var y=Math.round(p["y"]); 365 | 366 | switch(this.backend){ 367 | case "canvas": 368 | if(m==0){ 369 | this.ctx.moveTo(p["x"],p["y"]); 370 | }else{ 371 | this.ctx.lineTo(p["x"],p["y"]); 372 | } 373 | 374 | case "svg": 375 | if(m==0){ 376 | d+=" M"+x+","+y; 377 | }else{ 378 | d+=" L"+x+","+y; 379 | } 380 | break; 381 | } 382 | } 383 | if(this.backend=="canvas"){ 384 | this.ctx.fill(); 385 | this.ctx.globalCompositeOperation = 'source-over'; 386 | this.ctx.closePath(); 387 | this.ctx.stroke(); 388 | } 389 | d=d+" z"; 390 | } 391 | 392 | //show path 393 | switch(this.backend){ 394 | case "canvas": 395 | /* 396 | //this.ctx.globalCompositeOperation = 'source-over'; 397 | this.ctx.closePath(); 398 | this.ctx.fill(); 399 | this.ctx.stroke(); 400 | */ 401 | break; 402 | case "svg": 403 | if(this.lineArray[a].close){ 404 | d=d+" z"; 405 | } 406 | if(this.lineArray[a].holes.length >1000){ 407 | if(this.lastpath){ 408 | var d=this.lastpath.getAttribute("d")+" "+d; 409 | this.lastpath.setAttribute("d",d); 410 | this.lastpath.setAttribute("fill-rule","evenodd"); 411 | }else{ 412 | alert("cutout not possible"); 413 | } 414 | }else{ 415 | path.setAttribute("d",d); 416 | if(this.lineArray[a].holes.length >0){ 417 | path.setAttribute("fill-rule","evenodd"); 418 | } 419 | this.vectorEl.appendChild(path); 420 | this.lastpath=path; 421 | } 422 | break; 423 | case "vml": 424 | path.setAttribute("filled",style.close); 425 | //if(style.cutout){ 426 | /* do the holes 427 | if(this.lastpath){ 428 | this.lastpath.setAttribute("clip-rule","nonzero"); 429 | }else{ 430 | alert("cutout not possible"); 431 | } 432 | */ 433 | //}else{ 434 | this.vectorEl.appendChild(path); 435 | // alert(this.vectorEl.childNodes.length); 436 | //path.style.position="absolute"; 437 | //alert(d); 438 | if(!path.points){ 439 | path.setAttribute("points",d); 440 | }else{ 441 | path.points.value=d; 442 | } 443 | this.lastpath=path; 444 | //alert(d+" ---- "+path.points.value); 445 | /* 446 | alert(path.points.value); 447 | alert(path.strokecolor); 448 | alert(path.fillcolor); 449 | alert(path.strokeweight); 450 | */ 451 | //} 452 | break; 453 | 454 | } 455 | 456 | //cancel able after mod 100 lines 457 | if(a/100 ==Math.floor(a/100)){ 458 | var that=this; 459 | var tempFunction=function(){ 460 | that.render(a -1); 461 | } 462 | setTimeout(tempFunction,0); 463 | }else{ 464 | this.render(a -1); 465 | } 466 | } 467 | 468 | //draw only visible parts of polyline 469 | this.deside=function(p){ 470 | if(this.oldPoint){ 471 | this.dropped=p; 472 | if((Math.abs(this.oldPoint["x"] - p["x"]) <1)&&(Math.abs(this.oldPoint["y"] - p["y"]) <1)) { 473 | return false 474 | } 475 | if((this.oldPoint["x"] < 0)&&(p["x"]<0)){ 476 | return false 477 | } 478 | if((this.oldPoint["y"] < 0)&&(p["y"]<0)){ 479 | return false 480 | } 481 | if((this.oldPoint["x"] > this.themap.mapsize.width)&&(p["x"]>this.themap.mapsize.width)){ 482 | return false 483 | } 484 | if((this.oldPoint["y"] > this.themap.mapsize.height)&&(p["y"]>this.themap.mapsize.height)){ 485 | return false 486 | } 487 | } 488 | this.dropped=null; 489 | this.oldPoint=p; 490 | return true; 491 | } 492 | 493 | //calculate the extend of the polyline 494 | this.makeBounds=function(line){ 495 | for(var i=0;i < line.length;i++){ 496 | var lng=line[i].lng(); 497 | var lat=line[i].lat(); 498 | if(lat > this.boundsNorth){ 499 | this.boundsNorth=lat; 500 | } 501 | if(lat < this.boundsSouth){ 502 | this.boundsSouth=lat; 503 | } 504 | if(lng > this.boundsEast){ 505 | this.boundsEast=lng; 506 | } 507 | if(lng < this.boundsWest){ 508 | this.boundsWest=lng; 509 | } 510 | //console.log("s: ",this.boundsSouth,"n: ",this.boundsNorth,"w: ",this.boundsWest,"e: ",this.boundsEast); 511 | } 512 | 513 | } 514 | 515 | //readonly return bounds 516 | this.bounds=function(){ 517 | var sw=new khtml.maplib.Point(this.boundsSouth,this.boundsWest); 518 | var ne=new khtml.maplib.Point(this.boundsNorth,this.boundsEast); 519 | var b=new khtml.maplib.Bounds(sw,ne); 520 | return(b); 521 | } 522 | 523 | //remove polyline 524 | this.clear=function(){ 525 | if(this.ctx){ 526 | this.ctx.clearRect ( 0 , 0 , this.themap.mapsize.width , this.themap.mapsize.height ); 527 | } 528 | 529 | while(this.vectorEl.firstChild){ 530 | this.vectorEl.removeChild(this.vectorEl.firstChild); 531 | } 532 | 533 | } 534 | 535 | function getInternetExplorerVersion() { 536 | var rv = -1; // Return value assumes failure. 537 | if (navigator.appName == 'Microsoft Internet Explorer') { 538 | var ua = navigator.userAgent; 539 | var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 540 | if (re.exec(ua) != null) 541 | rv = parseFloat(RegExp.$1); 542 | } 543 | return rv; 544 | } 545 | 546 | //styling canvas with css 547 | 548 | function getCssStyles(klass){ 549 | var styleObj=new Object; 550 | styleObj.stroke="black"; 551 | styleObj.strokeWidth=1; 552 | styleObj.fill="none"; 553 | styleObj.opacity=1; 554 | styleObj.fillOpacity=1; 555 | styleObj.strokeOpacity=1; 556 | 557 | for(var i=0; i< document.styleSheets.length;i++){ 558 | var list=document.styleSheets[i]; 559 | if (list.cssRules){ 560 | var rules = list.cssRules; 561 | }else{ 562 | var rules = list.rules; 563 | } 564 | for (r = 0; r < rules.length; r++) 565 | { 566 | var csstext=rules[r].style.cssText; 567 | selectorText = rules[r].selectorText; 568 | if(selectorText!="."+klass)continue 569 | 570 | var cssAr=csstext.split(";"); 571 | for(var j=0;j