-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
251 lines (214 loc) · 11.1 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>OpenStreetMap India</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js">
</script>
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
rel="stylesheet" />
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/js/uikit-icons.min.js"></script>
<!-- Mastodon Embed -->
<!-- https://gitlab.com/idotj/mastodon-embed-feed-timeline -->
<link rel="stylesheet" href="src/mastodon-timeline.min.css" />
<script async src="src/mastodon-timeline.min.js"></script>
<style>
#map {
height: 100vh;
}
@media only screen and (max-width: 960px) {
#map {
height: 80vh;
margin: 20px;
}
}
#sidebar {
max-height: 100vh;
overflow: auto;
}
@media only screen and (max-width: 960px) {
#sidebar {
max-height: inherit;
/* overflow: auto; */
}
}
#map-overlay {
z-index: 10;
visibility: hidden;
}
.mapboxgl-ctrl-styles button {
width: auto;
display: flex;
align-items: center;
padding: 0 8px;
}
</style>
</head>
<body>
<div class="uk-grid uk-grid-collapse">
<div id="sidebar" class="uk-width-1-3@m">
<div class="uk-padding-small">
<div>
<h2 class='uk-margin-remove-bottom'><img style='width:40px'
src='https://wiki.openstreetmap.org/w/images/0/07/OpenStreetMap-India.svg'>OpenStreetMap <b>India</b></h2>
</div>
<p>Join the volunteer community of citizens crowdsourcing a free and open source map of India using the <a
href='https://www.openstreetmap.org/export#map=15/18.9325/72.8407' taget="_blank">OpenStreetMap Project</a>.
</p>
<p>
<button id='edit-map' class="uk-button uk-button-primary uk-button-small" type="button"><span
uk-icon="pencil"></span> Edit the
map</button>
<a href="https://wiki.openstreetmap.org/wiki/India"><button
class="uk-button uk-button-default uk-button-small" type="button"><span uk-icon="file-edit"></span>
Mapping wiki</button></a>
<a href="https://community.osm.be/resources/asia/india" taget="_blank"><button
class="uk-button uk-button-default uk-button-small" type="button"><span uk-icon="users"></span> Join
community</button></a>
</p>
<p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/d6n29CU2-Sg" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen uk-responsive></iframe>
</p>
<p> <button class="uk-button uk-button-default uk-button-small" type="button"
uk-toggle="target: #modal-about">About OpenStreetMap</button>
<button class="uk-button uk-button-default uk-button-small" type="button"
uk-toggle="target: #modal-download">Download India Data</button>
</p>
<div class="uk-card uk-card-primary uk-card-body uk-width-1-1 uk-padding-small">
<p>
Explore recent mapping activity in India<br>
<a href='https://osmlab.github.io/show-me-the-way/#bounds=6.7,67.7,36.4,97.4'><button
class="uk-button uk-button-default uk-button-small">Live map edits</button></a>
<a href='http://resultmaps.neis-one.org/osm-discussions?c=India#4/21.17/78.63'><button
class="uk-button uk-button-default uk-button-small">Map discussion</button></a>
<a
href='https://resultmaps.neis-one.org/osm-suspicious?country=124&hours=48&tsearch=&mappingdays=50&comp=%3E&value=10&action=d&obj=n&filterkey=#5/18.646/77.124'><button
class="uk-button uk-button-default uk-button-small">Recent edits</button></a>
<a
href='https://metrics.improveosm.org/navigable-roads/total-metrics-per-interval?duration=monthly&locationType=country&locationId=99&unit=km&from=2016-02-14&to=2021-10-03'><button
class="uk-button uk-button-default uk-button-small">Data metrics</button></a>
</p>
<div class="mt-container">
<div id="mt-body" class="mt-body" role="feed">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<footer>
<p>
<a href='https://wiki.openstreetmap.org/wiki/India' target="_blank">Wiki</a> |
<a href='https://t.me/OSMIndia' target="_blank">Telegram</a> |
<a href='https://matrix.to/#/#osm-in-general:matrix.org' target="_blank">Matrix</a> |
<a href='https://github.com/osm-in/openstreetmap.in/' target="_blank">Github</a> |
<a href='https://en.osm.town/@OSMIndia' rel='me' target="_blank">Mastodon</a> |
<a href='https://twitter.com/osm_in' target="_blank">Twitter</a>
</p>
</footer>
</div>
</div>
<div class="uk-width-2-3@m uk-inline">
<div id='map' class='uk-height-1-1 '></div>
<div id="map-overlay" class="uk-overlay uk-position-bottom">
<div id="map-overlay-content" class="uk-card uk-card-body uk-card-default uk-width-1-2@m">
<h3 class="uk-card-title">Click locations for details</h3>
</div>
</div>
</div>
</div>
<!-- This is the modal -->
<div id="modal-about" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Why create an open map?</h2>
<p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Phwrgb16oEM" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</p>
<h3>Users of OpenStreetMap data in India</h3>
<ul>
<li><a href="https://wiki.openstreetmap.org/wiki/Ola_-_Organised_Editing">Ola</a></li>
<li><a href="https://wiki.openstreetmap.org/wiki/Swiggy_-_Organised_Editing">Swiggy</a></li>
<li><a href="https://en.wikipedia.org/wiki/Budge_Budge#/maplink/0">Wikipedia</a></li>
<li><a href="https://wiki.openstreetmap.org/wiki/Tips_for_new_(Pokemon_Go)_mappers">Pokemon Go</a></li>
<li><a href='https://wiki.openstreetmap.org/wiki/Mapathon_Keralam'>Kerala State IT Mission</a></li>
<li><a href='https://onemapggm.mcg.gov.in/citizenportal/'>OneMap Gurugram - Municipal Corporation of
Gurugram</a></li>
<li><a href='https://iisc.ac.in/about/general-information/campus-map/'>IISc - Indian Institute of Science</a></li>
<li><a href="https://wiki.openstreetmap.org/wiki/Organised_Editing/Activities/Apple">Apple</a></li>
<li><a href="https://wiki.openstreetmap.org/wiki/Organised_Editing/Activities/Facebook">Facebook</a></li>
<li><a href="https://wiki.openstreetmap.org/wiki/Organised_Editing/Activities/Amazon">Amazon</a></li>
<li>Justdial</li>
<li>Zomato</li>
<li>Pinterest</li>
<li>TravelGuru</li>
<li>Yatra.com</li>
<li>NHAI - National Highways Authority of India</li>
</ul>
and many more!
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
</p>
</div>
</div>
<!-- This is the modal -->
<div id="modal-download" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Using OpenStreetMap India map data</h2>
<img src='./img/vivekananda-rock-memorial-map-data.gif'>
<p>OpenStreetMap data is available for free download and use per <a
href='https://www.openstreetmap.org/copyright'>Open Data Commons Open Database License (ODbL)</a>. Various
data download and export formats based on user needs. Check the <a
href='https://wiki.openstreetmap.org/wiki/Downloading_data'>wiki for more details.</a></p>
<p>For a map in Indic languages, check the <a href='https://osm-in.github.io/indic-map/'>Indic OpenStreetMap
demo</a> and the <a href='https://wiki.openstreetmap.org/wiki/Map_internationalization_(India)'>wiki</a> for
more resources for local language maps</p>
<h3>Download free India map data</h3>
<h4>APIs</h4>
<ul>
<li>Query the live map data for specific objects using Overpass API. Updated minutely. `.geojson` `.csv`
`.gpx` `google earth .kml`
<uL>
<li><a href="https://overpass-turbo.eu/s/YoV">Bus stops and bus stations in Chennai</a></li>
<li><a href="http://overpass-turbo.eu/s/YJB">All forts and castles in India</a></li>
<li><a href="http://overpass-turbo.eu/s/YJG">CSV list of all railway stations in India</a></li>
</uL>
</li>
</ul>
<h4>Downloads</h4>
<ul>
<li>Request custom data extracts from <a href="https://export.hotosm.org/en/v3/">Humanitarian OpenStreetMap
Team (HOTOSM)</a>. Updated 2-3 days. `geopackage .gpkg` `shapefiles .shp` `garmin .img` `google earth
.kml` `.mbtiles` `maps.me .mwm` `osmand .obf`</li>
<li>India OSM data extract from <a href="https://download.geofabrik.de/asia/india.html">Geofabrik.de</a>.
Updated daily. `osm pbf` `shapefiles`</li>
<li>Raw OSM data from <a href="https://www.openstreetmap.org/export#map=15/18.9325/72.8407">OSM.org</a>.
Limited area. Updated minutely. `osm xml`</li>
<li>Administrative boundaries clipped to land area from <a href="https://osm-boundaries.com/Map">OSM
Boundaries</a>. Updated monthly. `.geojson`</li>
<li>Snapshot of full India outline as per Survey of India from <a
href="https://github.com/datameet/maps/blob/master/Country/india-osm.geojson">Datameet Maps</a>. Limited
area. Not updated. `.geojson`</li>
</ul>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
</p>
</div>
</div>
<script>
function editMap() {
console.log(this)
}
</script>
<script src="./dist/main.js"></script>
</body>
</html>