-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.php
145 lines (122 loc) · 4.99 KB
/
index.php
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
<html>
<head>
<title>OpenStreetMap Notes as KML</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<style>
html, body, #map { width:100%; height: 100%; margin:0; padding:0; }
body { font-family: Verdana, Helvetica, Arial, sans-serif; }
#msg { padding:5px; }
#map { display:none; }
#panel { padding:3px; position: absolute; bottom:2px; left:2px; background: LIGHTGREY; z-index:9999; }
#getbtn { font-size:1.3em; padding: 10px 12px; text-align: center; }
#proceedbtn { font-size:1.3em; padding: 10px 12px; }
.lshape { position: absolute; border-width:2px; border-color: BLACK; z-index:9999; }
</style>
<script>
var map;
function init() {
$('#msg').hide();
$('#map').show();
map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 15
}).addTo(map);
map.attributionControl.setPrefix('');
// Add the keys method if missing (help with browser compat)
if(!Object.keys) Object.keys = function(o){
if (o !== Object(o))
throw new TypeError('Object.keys called on non-object');
var ret=[],p;
for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(p);
return ret;
}
// map view before we get the location
map.setView(new L.LatLng(51.505, -0.09), 3);
map.on('move', mapMove);
map.fire('move');
getLocation();
}
function mapMove() {
var bounds = map.getBounds();
var area = (bounds.getEast() - bounds.getWest()) * (bounds.getNorth() - bounds.getSouth());
console.log('area:' + area);
if (area > 25) {
$('#zoomalert').show();
$('#getbtn').hide();
} else {
$('#zoomalert').hide();
$('#getbtn').show();
}
}
// http://stackoverflow.com/a/901144/338265
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function getKML() {
if (confirm('Requesting notes for the visible area up to a limit of 1000')) {
var bounds = map.getBounds();
var colour = getParameterByName('colour'); // TODO: settings interface to control this
if (colour == null) colour = 'none';
url = "./api.kml.php?" +
"bbox=" + bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth() +
"&limit=1000" +
"&closed=0" +
"&colour=" + colour;
$('#map').hide();
$('#msg').html('<h1>Generating KML download</h1>' +
'<p>"open" the download using the Organic Maps app when prompted</p>');
$('#msg').show();
window.location = url;
}
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
// Geolocation is not supported by this browser
}
}
function showPosition(position) {
map.setView(new L.LatLng(position.coords.latitude, position.coords.longitude), 13);
}
</script>
</head>
<body>
<div id="msg">
<h1>OpenStreetMap Notes as KML</h1>
<p>This let's you grab all the OpenStreetMap Notes in an area and
download them as KML. Such a download might be useful for various things,
but mostly the idea is to easily load notes into Organic Maps</p>
<p>Don't have Organic Maps? Install it
<a href="https://apps.apple.com/app/organic-maps/id1567437057">for iPhone</a>
or
<a href="https://play.google.com/store/apps/details?id=app.organicmaps&hl=en">for Android</a>
and get it set up showing maps before proceeding.</p>
<input id='proceedbtn' type="button" value="Pick an area" onclick="init();">
<p>
<a href="https://harrywood.co.uk/blog/2017/03/12/notes-in-organic-maps/">Blog post</a> |
<a href="https://github.com/harry-wood/osm-notes-kml">Code on github</a>
</p>
</div>
<div id="map">
<div class="lshape" style="left:52; top:52; border-left:solid; border-top:solid; width:10%; height:10%;"> </div>:
<div class="lshape" style="right:52; top:52; border-right:solid; border-top:solid; width:10%; height:10%;"> </div>:
<div class="lshape" style="left:52; bottom:52; border-left:solid; border-bottom:solid; width:10%; height:10%;"> </div>:
<div class="lshape" style="right:52; bottom:52; border-right:solid; border-bottom:solid; width:10%; height:10%;"> </div>:
<div id="panel">
<div id='zoomalert'>Zoom in for a smaller area</div>
<input id='getbtn' type="button" value="Generate Notes KML" onclick="getKML();">
</div>
</div>
</body>