forked from osm-in/osm-in.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (87 loc) · 3.5 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
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
<!DOCTYPE html>
<html>
<head>
<title>OpenStreetMap India</title>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
line-height: 20px;
font-family: 'Slabo 27px', serif;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.intro {
z-index: 1;
top: 10px;
right: 10px;
position: absolute;
box-sizing: border-box;
box-shadow: 3px 3px 3px #BCBABA;
background: #f9f9f9;
border-radius: 5px;
padding: 10px;
width: 500px;
opacity: 0.9;
}
</style>
</head>
<body>
<div class='intro'>
<p><b>Welcome to OpenStreetMap India.</b> OpenStreetMap is the free editable map of the world. Join the conversation in India on <a href="https://lists.openstreetmap.org/listinfo/talk-in">talk-in</a>. <a href="https://github.com/geohacker/openstreetmap.in#using-this-map">Learn how to use this map</a>. <a href="http://learnosm.org/">Join the project and edit the map</a>
</p>
</div>
<div id='map'></div>
<script>
// Lock to India bounds
var southWest = L.latLng(7.319, 61.523),
northEast = L.latLng(36.774, 100.635),
bounds = L.latLngBounds(southWest, northEast);
// Provide your access token
L.mapbox.accessToken = 'pk.eyJ1Ijoib3BlbnN0cmVldG1hcCIsImEiOiJhNVlHd29ZIn0.ti6wATGDWOmCnCYen-Ip7Q';
// Definte tile urls of each layer
var indiaMap = L.mapbox.tileLayer('openstreetmap.1b68f018'),
bhuvanSatellite = L.tileLayer('http://tile1.nrsc.gov.in/tilecache/tilecache.py/1.0.0/bhuvan_imagery2/{z}/{x}/{y}.jepg', {
attribution: 'NRSC/ISRO'
}),
postalMap = L.mapbox.tileLayer('planemad.9acc2036'),
// truemarbleSatellite = L.mapbox.tileLayer('planemad.e76fee83'),
highwaysMap = L.mapbox.tileLayer('planemad.66359ac0'),
connectivityGraph = L.mapbox.tileLayer('planemad.5504651b'),
railwayMap = L.mapbox.tileLayer('planemad.e5dd1290');
var baseLayers = {
"Railway Map":railwayMap,
"Bhuvan Satellite": bhuvanSatellite,
// "NASA Satellite": truemarbleSatellite,
"OpenStreetMap India": indiaMap
};
var overlayMaps = {
"Highway": highwaysMap,
"Postal Codes": postalMap,
"Connectivity": connectivityGraph
};
// Create a map in the div #map
var map = L.map('map', {
layers: indiaMap
}, {
maxBounds: bounds,
})
.addControl(L.mapbox.geocoderControl('mapbox.places', {
autocomplete: true
}))
.setView([22.14980, 79.08060], 5);
L.hash(map);
//Add layer control
L.control.layers(baseLayers, overlayMaps, {position: 'topleft'}).addTo(map);
</script>
</body>
</html>