-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (129 loc) · 5.32 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
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
<!DOCTYPE html>
<html lang=en><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>OpenStreetMap GPX extractor</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<style>
.blur {
width: 100%;
height: 100%;
z-index: 500;
top: 0;
left: 0;
position: fixed;
display: block;
background-color:white;
filter: alpha(opacity=75);
opacity: 0.75;
}
#mySpinner {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
}
@keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #000;
animation: spinner .6s linear infinite;
z-index:502;
}
#area input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#area button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#area button:hover {
background-color:#000;
}
</style>
<body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="osmtogeojson.js"></script>
<script src="togpx.js"></script>
<script src="FileSaver.js"></script>
<script src="gpx.js"></script>
<script src="url.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">OpenStreetMap GPX extractor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item presets active">
<a class="nav-link" href="#" id="presets">Presets</a>
</li>
<li class="nav-item advanced">
<a class="nav-link" href="#" id="advanced">Advanced</a>
</li>
</ul>
</div>
</nav>
<div id="mySpinner"></div>
<div id="blurbackground"></div>
<div class="container border">
<div class="mt-3 mb-3">Choose an area that has an article name on the english Wikipedia with the exact same spelling and case.<br />E.g. "Sweden" or "Västernorrland County".</div>
<form id="form" action="javascript:void(0);">
<label for="area"><b>Area: </b></label><input id="area" type="text" class="searchbox">
<div class="presets">
<p><b>Data to include: </b><span id="choices"></span></p>
</div>
<div class="advanced">
<p>Custom queries follows <a href="https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL" target="_blank">OverpassQL syntax</a>. Only include the statement that selects the nodes, ways and relations.</p>
<p class="font-weight-bold">Example 1:</p>
<pre>nwr["tourism"="hostel"](area.searchArea);</pre>
<p class="font-weight-bold">Example 2, which utilizes the "()" union syntax that works like an OR: </p>
<pre>(nwr["tourism"="hostel"](area.searchArea);nwr["tourism"="motel"](area.searchArea););</pre>
<p class="font-weight-bold">Example 3, which utilizes regex instead: </p>
<pre>nwr["tourism"~"^(hostel|motel)$"](area.searchArea);</pre>
<p class="font-weight-bold">Custom query: </p>
<textarea id="custom" rows="4"></textarea>
</div>
</form>
<div class="mt-3"><small>This tool will lookup the right relation id from the Wikidata API and then query Overpass-API for the choosen data in the area. If the area is missing an OpenStreetMap relation id property you will get an error. Overpass is quite slow so you might have to wait a minute or two for big countries or queries that select a lot of POIs</small></div>
</div>
</body></html>