-
Notifications
You must be signed in to change notification settings - Fork 5
/
greenmap.html
120 lines (99 loc) · 5.07 KB
/
greenmap.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
<!DOCTYPE html>
<html>
<head>
<title>Green TransforMap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="assets/favicon.png" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="leaflet-search.min.css" />
<link rel="stylesheet" href="Leaflet.EditInOSM.css" />
<link rel="stylesheet" href="transformap.css" />
<link rel="stylesheet" href="demomaps.css" />
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.geo-1.0.0-b1.5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="PruneCluster.js"></script>
<script src="leaflet-hash.js"></script>
<script src="leaflet-search.min.js"></script>
<script src="Leaflet.EditInOSM.js"></script>
<script src='L.Control.Locate.mine.js'></script>
<script>
var hostname = window.parent.document.location.origin ? window.parent.document.location.origin : window.parent.document.location.protocol + "//" + window.parent.document.location.hostname;
var assethost = hostname + window.parent.document.location.pathname.replace(/\/[^/]*$/,'/');
</script>
<script src="sidebar.js"></script>
<script src="filters.js"></script>
<script src="map.js"></script>
<script>
/*
* overpass syntax:
* [out:json][timeout:180][bbox:BBOX];
* first OR-CLAUSE: node[param1][param2];out;(way[param1][param2];node(w));out;rel[param1][param2];out;
* n'th OR-Clause: node[param3][param4];out;(way[param3][param4];node(w));out;rel[param3][param4];out;
*
* human readable length of query is not important, query speed is!
*/
// var query_array = [ [ 'query1', "and-key2" ] , /*OR*/ ["and-key3", "and-key4" ] ]; // query may be all what goes inside [], e.g. '~"full?fill?s_needs:.*"~".*"' or '"addr:housenumber"'
var overpass_config = {
minzoom: 14,
q_array: [ [ '"leisure"~"^park|garden|playground|dog_park"', '"access"!~"no|private|customers"' ] ],
icon_folder : "pois",
icon_tags : [ "garden:type", "leisure" ]
}
buildOverpassQuery();
var about_text = '<p>This is a demo map displaying green places around you, where you can relax and enjoy nature.</p>'
+ '<p>The <dfn title="Point of Interest">POIs</dfn> displayed are directly taken from the <a href="https://www.openstreetmap.org/">OpenStreetMap</a> database. For an item to be displayed, it must have one of the <a href="https://wiki.openstreetmap.org/wiki/Key:leisure">leisure</a> = <a href="https://wiki.openstreetmap.org/wiki/Tag:leisure%3Dpark">park</a> | <a href="https://wiki.openstreetmap.org/wiki/Tag:leisure%3Dgarden">garden</a> | <a href="https://wiki.openstreetmap.org/wiki/Tag:leisure%3Dplayground">playground</a> | <a href="https://wiki.openstreetmap.org/wiki/Tag:leisure%3Ddog_park">dog_park</a> set and be accessible to the public.</p>'
+ about.overpass
+ about.osm_edit
+ about.export_opendata ;
var mapkey =
'<li title="leisure=park"><img src="assets/transformap/pngs/pois/' + 24 + '/leisure=park.png" /> Park</li>'
+ '<li title="leisure=garden, garden:type=community"><img src="assets/transformap/pngs/pois/' + 24 + '/garden:type=community.png" />Community Garden</li>'
+ '<li title="leisure=garden"><img src="assets/transformap/pngs/pois/' + 24 + '/leisure=garden.png" /> Garden</li>'
+ '<li title="leisure=playground"><img src="assets/transformap/pngs/pois/' + 24 + '/leisure=playground.png" /> Playground</li>'
+ '<li title="leisure=dog_park"><img src="assets/transformap/pngs/pois/' + 24 + '/leisure=dog_park.png" /> Dog Park</li>';
$(function () {
map = initMap(null, null, null, 48.2084, 16.3733, 15);
var hash = new L.Hash(map); // Leaflet persistent Url Hash function
loadPoi();
map.on('moveend', loadPoi);
map.on('viewreset', loadPoi);
setTimeout(addSearch,500); //seems to break with prunecluster when loaded instantly, this fix helps
addLocate();
L.control.scale({imperial: false}).addTo(map);
L.control.mousePosition().addTo(map);
});
</script>
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
</head>
<body class="marker-backgroundless">
<nav class="mmmnavbar">
<ul>
<li id="mmmnavtitle" class="mmmactive">
<a href="http://transformap.co"><img src=logo_white.png height=30px></a>
</li>
<li>
<a href="http://transformap.co">Overview</a>
</li>
<li>
<a href="http://discourse.transformap.co">Forum</a>
</li>
<li>
<a href="http://blog.14mmm.org">Activities</a>
</li>
<li class=last>
<a href="http://transformap.co/about">About</a>
</li>
</ul>
</nav>
<noscript>
<br><hr><br>
<h3>Thanks for your privacy-awareness and disabled JavaScript!</h3>
<p>Unfortunately, this interactive map only works with JavaScript enabled - please add an exception for transformap.co!</p>
</noscript>
<div id="tmapcontent">
<div id="map"></div>
</div>
</body>
</html>