forked from maptimeLA/osm_io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (59 loc) · 1.76 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet OSM</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position:absolute;
top: 55px;
bottom: 0;
width: 100%;
}
h1.title {
margin: 10px;
font-family: Arial;
}
</style>
</head>
<body>
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-osm/v0.1.0/leaflet-osm.js'></script>
<script src='osmtogeojson.js'></script>
<h1 class="title">Map of <YOUR NICHE HERE></h1>
<div id='map'>
</div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGltZWxhb21hciIsImEiOiJjaWd3MWVxYzYwcnpzdmttNXF0YnMyNGNpIn0.j-U_d3YrKY3uXqmVXN2RWA';
var map = L.mapbox.map('map', 'mapbox.streets');
// Center on Los Angeles and zoom in a bit.
map.setView([34.0537, -118.2427], 11);
$.ajax({
url: "export.json",
success: function(osmjson) {
// Overpass uses a different format of json than leaflet expects.
// Here we transform it using osmtogeojson
var geojson = osmtogeojson(osmjson);
L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
// Make a popup for each feature containing the tags for that feature
var popupContent = "<b>Tags:<b><br />";
for (var key in feature.properties.tags) {
popupContent += key + "=" + feature.properties.tags[key] + "<br />";
}
layer.bindPopup(popupContent);
}
}).addTo(map);
}
});
</script>
</body>
</html>