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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<title>ka-Map!</title>
<script type="text/javascript" src="../../htdocs/DHTMLapi.js"></script>
<script type="text/javascript" src="../../htdocs/xhr.js"></script>
<script type="text/javascript" src="../../htdocs/kaMap.js"></script>
<script type="text/javascript" src="../../htdocs/kaTool.js"></script>
<script type="text/javascript" src="../../htdocs/wz_dragdrop.js"></script>
<script type="text/javascript" src="../../htdocs/kaZoomer.js"></script>
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();
function myOnLoad()
{
initDHTMLAPI();
myKaMap = new kaMap( 'viewport' );
myKaMap.server = '../../htdocs/';
var kaNav = new kaNavigator( myKaMap );
kaNav.activate();
myKaZoomer = new kaZoomer(myKaMap);
drawPage();
myKaMap.initialize();
printMyTips();
}
function drawPage()
{
var browserWidth = getInsideWindowWidth();
var browserHeight = getInsideWindowHeight();
var viewport = getRawObject('viewport');
viewport.style.width = browserWidth + "px";
viewport.style.height = browserHeight + "px";
myKaMap.resize();
}
</script>
<script type="text/javascript">
var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');
var canvas = null;
function printMyTips () {
var idx = 50; canvas = myKaMap.createDrawingCanvas(idx);
for(i=0;i<aPoints.length;i++){
var div = document.createElement('div');
var img = document.createElement('img');
img.src = myKaMap.server + 'images/tip-red.png';
img.mylabel = aPoints[i][2];
img.style.position='absolute';
img.style.left='-6px';
img.style.top='-19px';
img.onclick=myTipClicked;
div.appendChild(img);
var lon = aPoints[i][0];
var lat = aPoints[i][1];
myKaMap.addObjectGeo(canvas,lat,lon,div);
}
}
function myTipClicked(){
alert(this.mylabel);
}
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #d9d9d9;
overflow: hidden;
}
#viewport {
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
overflow: hidden;
border: 1px solid #000000;
cursor: move;
-moz-box-sizing: border-box;
}
</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"></div>
</div>
</body>
</html> |