forked from plepe/overpass-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
90 lines (81 loc) · 2.3 KB
/
example.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
<html>
<head>
<meta charset="utf-8">
<title>OverpassFrontendFrontend example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<style>
.leaflet-popup-content {
max-height: 250px;
overflow: auto;
}
.leaflet-popup-content pre {
font-size: 8px;
}
</style>
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<script src="node_modules/escape-html/index.js"></script>
<script src="dist/overpass-frontend.js"></script>
<script type='text/javascript'>
var map
var overpass
var request
var current_objects = {}
function check_update_map () {
var bounds = new BoundingBox(map.getBounds())
// Hide loaded but non-visible objects
for (var k in current_objects) {
var ob = current_objects[k]
if (!ob.intersects(bounds)) {
map.removeLayer(ob.feature)
delete(current_objects[k])
}
}
// Abort current requests (in case they are long-lasting - we don't need them
// anyway). Data which is being submitted will still be loaded to the cache.
if (request) {
request.abort()
}
// Query all trees in the current view
overpass.BBoxQuery('node[natural=tree];', bounds,
{
properties: OverpassFrontend.ALL
},
function (err, ob) {
if (!ob.feature) {
ob.feature = ob.leafletFeature({
nodeFeature: 'CircleMarker',
color: 'red',
fillColor: 'red',
fillOpacity: 0.1,
weight: 1,
radius: 6
})
ob.feature.bindPopup('<pre>' + escapeHtml(JSON.stringify(ob.GeoJSON(), null, ' ')) + '</pre>')
}
ob.feature.addTo(map)
current_objects[ob.id] = ob
},
function (err) {
}
)
}
window.onload = function() {
map = L.map('map').setView([51.505, -0.09], 18)
overpass = new OverpassFrontend('//www.overpass-api.de/api/interpreter')
var osm_mapnik = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
)
osm_mapnik.addTo(map)
map.on('moveend', check_update_map)
check_update_map()
}
</script>
</head>
<body>
<div id='map' style='position: absolute; left: 0; top: 0; bottom: 0; right: 0'></div>
</body>
</html>