forked from species/transfor-map
-
Notifications
You must be signed in to change notification settings - Fork 4
/
organic.html
119 lines (98 loc) · 4.5 KB
/
organic.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
<!DOCTYPE html>
<html>
<head>
<title>Organic 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 = {
q_array: [ [ '"organic"~"yes|only|limited"' ] ],
icon_folder : "pois",
icon_tags : [ "farm_boxes", "garden:type", "shop","amenity","leisure" ],
class_selector_key : { key: "organic" }
}
buildOverpassQuery();
var about_text = '<p>This map displays places where you can get stuff organically produced.</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 the “<a href="https://wiki.openstreetmap.org/wiki/Key:organic">organic</a>” tag set.</p>'
+ about.overpass
+ about.osm_edit
+ about.export_opendata ;
var mapkey =
'<li title="organic=only"><img src="assets/transformap/pngs/pois/' + 24 + '/unknown.png" class="k-organic v-only" /> Organic only</li>'
+ '<li title="organic=yes"><img src="assets/transformap/pngs/pois/' + 24 + '/unknown.png" class="k-organic v-yes" /> Good organic selection</li>'
+ '<li title="organic=limited"><img src="assets/transformap/pngs/pois/' + 24 + '/unknown.png" class="k-organic v-limited" /> Limited organic selection</li>';
$(function () {
map = initMap(null, null, null, 48.1373, 11.5755, 13);
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>
<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>