-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (63 loc) · 2.86 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Zoning Map</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'>body{margin:0;padding:0;overflow:hidden}</style>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id='printoutPanel'></div>
<div class="w3-bottom" style="min-height: 100px;min-width: 100px;max-width: 200px;">
<div class="w3-black w3-margin w3-padding" id='legend' style="z-index:1000;">
</div>
</div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(19.1041680452729,72.90505469372974),
zoom: 13,
maxZoom: 19,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
var ZoneTileSource = new Microsoft.Maps.TileSource({
uriConstructor: 'tiles/{quadkey}.jpg',
});
var ZoneTileLayer = new Microsoft.Maps.TileLayer({
mercator: ZoneTileSource,
opacity:0.6,
});
map.layers.insert(ZoneTileLayer);
Microsoft.Maps.Events.addHandler(map, 'click', function (e) { set_latitudes_and_longitude(e); });
}
function set_latitudes_and_longitude(map)
{
console.log(map.location.latitude);
console.log(map.location.longitude);
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=AhPe4ojD-5t0igIhrWqKo00EP35zbC3TqlosYmJpgLJGxJ1pXgav2C8NH8zbGwLq&callback=loadMapScenario' async defer></script>
<script type='text/javascript'>
leg = document.getElementById('legend')
colors = [
[204, 255, 255],
[204, 102, 0],
[51, 204, 51],
[0, 102, 0],
[0, 204, 102],
[0, 0, 0],
[255, 204, 0],
[102, 255, 102],
[255, 153, 255],
[255, 0, 0],
[51, 51, 153],
[102, 204, 255]
]
index = ['airport', 'commercial', 'farmland', 'forest', 'green', 'highways','industrial', 'open', 'railway', 'residential', 'slums', 'water']
for (var i = 0; i < 12; i++) {
leg.innerHTML += '<span style="height: 20px;width:50px;background-color: rgb('+colors[i][0]+', '+colors[i][1]+', '+colors[i][2]+');"> </span> '+index[i]+'<br>'
}
</script>
</body>
</html>