forked from ocsidlab/treemap
-
Notifications
You must be signed in to change notification settings - Fork 1
/
map-satellite.html
102 lines (86 loc) · 2.56 KB
/
map-satellite.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Open Tree Map - Bengaluru</title>
<meta name="description" content="OpenStreetMap Bengaluru Tree Map">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel='shortcut icon' href='http://www.gubbilabs.in/sites/default/files/nitobe_favicon_0_0.ico' type='image/x-icon'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.css' type='text/css' />
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet">
</head>
<style type="text/css">
.mapname{
position: absolute;
top: 0;
left: 0;
text-align: left;
z-index: 6;
margin: 20px;
width: 30%;
}
.mapname h3 {
font-size: 18px;
line-height: 20px;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#sidebar{
background:rgba(40, 53, 61, 0.23);
}
.toggles {
width: 320px;
}
.info {
width: 320px;
color: white;
}
.fill-darkblue-opaque {
background-color: rgba(34, 59, 83, 0.4);
}
.button.stroke:hover {
background-color: #3887be !important;
color: rgb(255, 255, 255) !important;
}
.button.stroke {
box-shadow: 0px 0px 0px 2px #223b53 inset !important;
color: white;
}
.micro{
font-weight: bold;
}
.mapboxgl-popup-close-button{
font-size: x-large;
}
.mapboxgl-popup {
width: auto;;
}
</style>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class='mapname'>
<div class="dark">
<h3 class='fancy' style="color:#fff;" >Open Tree Map - Bengaluru</h3>
</div>
<div class='pad1y left'>
<a href='index.html' class='icon home button'>Home</a> <br/><br/>
<a href='map-streets.html' class='icon marker button'>Streets</a>
</div>
</div>
<div class='col12 clearfix'>
<div id='map' class=''></div>
</div>
<script src="build-satellite.js"></script>
</body>
</html>