forked from tyrasd/overpass-turbo
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex_packaged.html
237 lines (231 loc) · 19.2 KB
/
index_packaged.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"></meta>
<meta name="viewport" content="width=device-width;" />
<title>overpass turbo</title>
<link rel="icon" href="turbo.png" type="image/png" />
<!--jQuery-->
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<!--CodeMirror-->
<!--leaflet-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<!--leaflet extensions-->
<!--jQuery UI-->
<link type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="Stylesheet" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<!--own scripts & styles-->
<link rel="stylesheet" type="text/css" href="turbo.min.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 700px), (max-device-width: 799px)" href="css/compact.css"/>
<script src="turbo.min.js"></script>
</head>
<body class="loading">
<!--layout-->
<div id="navs">
<div class="nav">
<div class="buttons">
<a class="t button group left" accesskey="1" onclick="ide.onRunClick();" title="execute this query on Overpass API" t="[title]nav.run_tt;nav.run" >Run</a>
<a class="t button group" accesskey="2" onclick="ide.onShareClick();" title="get a permalink for this query" t="[title]nav.share_tt;nav.share" >Share</a>
<a class="t button group right gap" accesskey="3" onclick="ide.onExportClick();" title="various export tools" t="[title]nav.export_tt;nav.export" >Export</a>
<a class="t button group left" accesskey="4" onclick="ide.onSaveClick();" title="save this query" t="[title]nav.save_tt;nav.save" >Save</a>
<a class="t button group right gap" accesskey="5" onclick="ide.onLoadClick();" title="load saved query or example" t="[title]nav.load_tt;nav.load" >Load</a>
<a class="t button group left" accesskey="9" onclick="ide.onSettingsClick();" title="various settings" t="[title]nav.settings_tt;nav.settings">Settings</a>
<a class="t button group right" accesskey="0" onclick="ide.onHelpClick();" title="help, about and attributions" t="[title]nav.help_tt;nav.help" >Help</a>
</div>
<div class="title"><a href="index.html" class="disabled">overpass turbo <img src="turbo.png" style="opacity:0.3; margin-left:2px;" /></a></div>
<div class="tabs">
<a class="t button active" title="map view" t="[title]tabs.map_tt;tabs.map" >Map</a>
<a class="t button" title="data view" t="[title]tabs.data_tt;tabs.data">Data</a>
</div>
</div>
</div>
<div id="editor">
<!--CodeMirror goes here-->
<textarea></textarea>
</div>
<div id="dataviewer">
<div id="map"></div>
<div id="data"></div>
</div>
<!--wait spinner-->
<div class="modal"><div class="wait-info"><h4>overpass turbo loading...</h4><ul class="plain"></ul></div></div>
<!--some dialogs-->
<!--welcome-->
<div id="welcome-dialog" title="Welcome" class="t dialog" t="[title]welcome.title">
<p class="t" t="[html]welcome.text.1">Hello, this is <i>overpass turbo</i>, a web-based data filtering tool for <a href="http://www.openstreetmap.org">OpenStreetMap</a>. Running <a href="http://wiki.openstreetmap.org/wiki/Overpass_API">Overpass API</a> queries, it makes the goodness of OSM's geo-data accessible to everyone.</p>
<p class="t" t="[html]welcome.text.2">You can go ahead with your Overpass queries, or take a look at the <a href="javascript:ide.onHelpClick();">help page</a> for a start.</p>
</div>
<!--help-->
<div id="help-dialog" title="Help" class="t dialog" t="[title]help.title">
<h3><a class="t" t="help.section.introduction">Introduction</a></h3>
<div>
<p class="t" t="[html]help.intro.1">With <a href="http://wiki.openstreetmap.org/wiki/Overpass_turbo">overpass turbo</a> you can run <a href="http://overpass-api.de">Overpass API</a> queries and analyse the resulting <a href="http://www.openstreetmap.org">OpenStreetMap</a> data interactively on a map.</p>
<p class="t" t="[html]help.intro.2">You can run xml styled or OverpassQL <a href="http://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide">queries</a>. Returned xml or json data is parsed and (if possible) shown on the map. For more information about <i>overpass turbo</i> take a look at the <a href="http://wiki.openstreetmap.org/wiki/Overpass_turbo">OSM wiki</a>.</p>
<p><span class="t" t="help.intro.shortcuts">One can use the following handy shortcuts in the query:</span>
<ul>
<li><i>{{bbox}}</i> - <span class="t" t="help.intro.shortcuts.bbox">bounding box coordinates of the current map view</span></li>
<li><i>{{center}}</i> - <span class="t" t="help.intro.shortcuts.center">map center coordinates</span></li>
<li class="t" t="[html]help.intro.shortcuts.custom">Arbitrary shortcuts can be defined by putting <i>{{shortcut=value}}</i> somewhere in the script.</li>
</ul></p>
</div>
<h3><a class="t" t="help.section.ide">IDE</a></h3>
<div>
<h4 class="t" t="help.ide.share.title">Sharing</h4>
<p class="t" t="[html]help.ide.share.expl">It is possible to send a permalink with the query you are currently working on to someone else. This is found in the <i>Share</i> tool and shows you a link which you can send to a friend or post online. (Note that others will work on their own copy of the query.)</p>
<h4 class="t" t="help.ide.save_load.title">Save and Load</h4>
<p class="t" t="[html]help.ide.save_load.expl">You can also save and load your queries. For a start, there are a few example queries preloaded. Take a look at them for a short glimpse of what overpass can do.</p>
<h4 class="t" t="help.ide.keyboard.title">Keyboard shortcuts:</h4>
<ul>
<li><i>Ctrl+Enter</i> - <span class="t" t="help.ide.keyboard.run">Run the current query.</span></li>
<li><i>Ctrl+O / Ctrl+S</i> - <span class="t" t="help.ide.keyboard.load_save">Load (open) / Save a query.</span></li>
<li><i>Ctrl+H</i> - <span class="t" t="help.ide.keyboard.help">Open this help dialog.</span></li>
</ul>
</div>
<h3><a class="t" t="help.section.key">Map Key</a></h3>
<div>
<img src="map-key.png" alt="various map features" class="t" t="[alt]help.key.example" />
<p class="t" t="help.key.description">Ways are shown as bold blue lines, Polygons as yellow areas with a thin blue outline, POIs (nodes with tags) as yellow circles with a thin blue outline. Circles with a red filling stand for polygons or ways that are too small to be displayed normally. Pink lines or outlines mean, that an object is part of at least one (loaded) relation. Dashed lines mean that a way or polygon has incomplete geometry (most likely because some of its nodes have not been loaded).</p>
</div>
<h3><a class="t" t="help.section.export">Export</a></h3>
<div>
<p class="t" t="[html]help.export">The <i>Export</i> tool holds a variety of options to do with the query and/or data loaded by the query.<br />
Options with this symbol:<span class="ui-icon ui-icon-extlink" style="display:inline-block;"></span> rely on or refer to external (online) tools.</p>
<h4 class="t" t="help.export.map.title">Map</h4>
<p class="t" t="help.export.map.expl">Convert the current map-with-data view to a static png image, or a (fullscreen) interactive map, etc.</p>
<h4 class="t" t="help.export.query_data.title">Query / Data</h4>
<p class="t" t="help.export.query_data.expl">This holds some things you can do with the raw query or data, like converting the query between the various query languages or exporting the data as geoJSON. A very usefull option is the possibility to send the query to JOSM.</p>
</div>
<h3><a class="t" t="help.section.about">About</a></h3>
<div>
<a href="http://overpass-api.de"><img style="float:right;" src="http://wiki.openstreetmap.org/w/images/b/b3/Powered_by_Overpass_API.png"/></a>
<p class="t" t="[html]help.about.maintained"><i>overpass turbo</i> (aka overpass-ide) is maintained by Martin Raifer (tyr.asd at gmail.com).</p>
<h4 class="t" t="help.about.feedback.title">Feedback, Bug Reports, Feature Requests</h4>
<p class="t" t="[html]help.about.feedback">If you would like to give feedback, report issues or ask for a particular feature, please use the <a href="https://github.com/tyrasd/overpass-ide/issues">issue tracker</a> on github or the <a href="http://wiki.openstreetmap.org/wiki/Talk:Overpass_turbo">discussion page</a> on the OSM-wiki.</p>
<h4 class="t" t="help.about.source.title">Source Code</h4>
<p class="t" t="[html]help.about.source">The <a href="https://github.com/tyrasd/overpass-ide">source code</a> of this application is released under the MIT <a href="LICENSE">license</a>.</p>
</div>
<h3><a class="t" t="help.section.attribution">Attribution</a></h3>
<div>
<h4 class="t" t="help.attr.data_sources">Data Sources</h4>
<ul class="plain">
<li class="t" t="[html]help.attr.data">Data © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors, <span style="font-size:smaller;"><a href="http://opendatacommons.org/licenses/odbl/1-0/">ODbL</a> (<a href="http://www.openstreetmap.org/copyright">Terms</a>)</span></li>
<li><span class="t" t="help.attr.mining">Data mining by</span> <a href="http://overpass-api.de/">Overpass API</a></li>
<li class="t" t="[html]help.attr.tiles">Map tiles © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" style="font-size:smaller;">CC-BY-SA</a></li>
<li><span class="t" t="help.attr.search">Search provided by</span> <a href="http://wiki.openstreetmap.org/wiki/Nominatim">Nominatim</a></li>
</ul>
<h4 class="t" t="help.attr.software">Software & Libraries</h4>
<ul class="plain">
<li><span class="t" t="help.attr.leaflet">Map powered by</span> <a href="http://leaflet.cloudmade.com">Leaflet</a></li>
<li><span class="t" t="help.attr.codemirror">Editor powered by</span> <a href="http://codemirror.net/">CodeMirror</a></li>
<li><span class="t" t="help.attr.jquery">Driven by</span> <a href="http://jquery.com/">jQuery</a></li>
<li><span class="t" t="help.attr.other_libs">Other libraries:</span> <a href="http://jqueryui.com/">jQuery UI</a>, <a href="http://html2canvas.hertzen.com/">html2canvas</a>, <a href="http://code.google.com/p/canvg/">canvg</a>, <a href="https://github.com/kajic/leaflet-locationfilter">leaflet-locationfilter</a>, <a href="http://mapbox.com/maki/">maki</a>, <a href="http://www.sjjb.co.uk/mapicons/">SJJB map icons</a>, <a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a></li>
</ul>
</div>
</div>
<!--settings-->
<div title="Settings" id="settings-dialog" class="t dialog" t="[title]settings.title">
<h3><a class="t" t="settings.section.general">General Settings</a></h3>
<div>
<p><label><span class="t" t="settings.ui_lang">UI Language</span>:</label> <input type="text" name="ui_language" value="" style="width:60px;"/><br/><small>(<span class="t" t="settings.ui_lang_expl">restart necessary on change</span>)</small></p>
<p><label><span class="t" t="settings.server">Server</span>:</label> <input type="text" name="server" value="" style="width:270px;"/></p>
<p><input type="checkbox" name="force_simple_cors_request"/> <span class="t" t="settings.force_simple_cors">Force simple CORS requests</span> <small>(<span class="t" t="settings.force_simple_cors_expl">use when the server doesn't support preflighted <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a> requests</span>)</small></p>
<p><input type="checkbox" name="use_html5_coords"/> <span class="t" t="settings.start_at_user_location">Start at user location</span> <small>(<span class="t" t="settings.start_at_user_location_expl">html5 geolocation</span>)</small></p>
<p><input type="checkbox" name="no_autorepair"/> <span class="t" t="settings.disable_autorepair">Disable warning/autorepair message when Overpass API returns no visible data.</span></p>
</div>
<h3><a class="t" t="settings.section.editor">Editor</a></h3>
<div>
<p><input type="checkbox" name="use_rich_editor"/> <span class="t" t="settings.enable_rich_editor">Enable rich code editor</span> <small>(<span class="t" t="settings.enable_rich_editor_expl">disable this on mobile devices; requires a page-reload to take effect</span>)</small>.</p>
<p><label><span class="t" t="settings.editor_with">Width of editor</span>:</label> <small>(<span class="t" t="settings.editor_with_expl">e.g. "400px", leave blank for defaults</span>)</small> <input type="text" name="editor_width" value="" style="width:80px;"/></p>
</div>
<h3><a class="t" t="settings.section.map">Map</a></h3>
<div>
<p><label><span class="t" t="settings.tile_server">Tile-Server</span>:</label> <input type="text" name="tile_server" value="" style="width:240px;"/></p>
<p><label><span class="t" t="settings.tile_opacity">Tiles Opacity</span>:</label> <input type="text" name="background_opacity" value="" style="width:30px;"/> <small>(<span class="t" t="settings.tile_opacity_expl">transparency of background tiles: 0=tansparent … 1=visible</span>)</small></p>
<p><input type="checkbox" name="enable_crosshairs"/> <span class="t" t="settings.show_crosshairs">Show crosshairs at the map center.</span></p>
<p><input type="checkbox" name="disable_poiomatic"/> <span class="t" t="settings.disable_poiomatic">Don't display small features as POIs.</span></p>
<p><input type="checkbox" name="show_data_stats"/> <span class="t" t="settings.show_data_stats">Show some stats about loaded and displayed data.</span></p>
</div>
<h3><a class="t" t="settings.section.sharing">Sharing</a></h3>
<div>
<p><input type="checkbox" name="share_include_pos"/> <span class="t" t="settings.include_map_state">Include current map state in shared links</span></p>
<p><label><span class="t" t="settings.compression">Compression</span>:</label> <input type="text" name="share_compression" value="" style="width:40px;"/></p>
</div>
<h3><a class="t" t="settings.section.export">Export</a></h3>
<div>
<p><input type="checkbox" name="export_image_scale"/> <span class="t" t="settings.export_image_scale">Show scale on exported images.</span></p>
<p><input type="checkbox" name="export_image_attribution"/> <span class="t" t="settings.export_image_attr">Show attribution on exported images.</span></p>
</div>
</div>
<!--save-->
<div title="Save" id="save-dialog" class="t dialog" t="[title]save.title">
<p class="t" t="save.enter_name">Enter a name for this query</p>
<p><input name="save" type="text" /></p>
</div>
<!--load-->
<div title="Load" id="load-dialog" class="t dialog" t="[title]load.title">
<!--<p class="t" t="load.select_query">Select query to load:</p>-->
<h4 class="t" t="load.saved_queries">Saved Queries</h4>
<div>
<ul class="plain saved_query"></ul>
</div>
<h4 class="t" t="load.examples">Examples</h4>
<div>
<ul class="plain example"></ul>
</div>
<h4 class="t" t="load.templates">Templates</h4>
<div>
<ul class="plain template"></ul>
</div>
</div>
<!--export-->
<div title="Export" id="export-dialog" class="t dialog" t="[title]export.title">
<h4 class="t" t="export.section.data">Data</h4>
<div>
<p class="t" t="[html]export.as_geoJSON">as <a id="export-geoJSON" href="">geoJSON</a></p>
<p class="t" t="[html]export.as_GPX">as <a id="export-GPX" href="">GPX</a></p>
<p class="t" t="[html]export.raw">raw <a id="export-raw" href="">data</a></p>
<p class="t" t="[html]export.raw_interpreter">raw data from <a id="export-overpass-api" href="" target="_blank">Overpass API interpreter<span class="ui-icon ui-icon-extlink" style="display:inline-block;"></span></a></p>
<p><span class="t" t="[html]export.remote_control">load into <a id="export-josm" href="">JOSM</a></span> <small>(<span class="t" t="export.remote_control_expl">only for queries returning valid OSM-XML with meta data</span>)</small></p>
</div>
<h4 class="t" t="export.section.map">Map</h4>
<div>
<p class="t" t="[html]export.as_png">as <a id="export-image" href="" onclick="ide.onExportImageClick(); $(this).parents('.ui-dialog-content').dialog('close'); return false;">png image</a></p>
<p class="t" t="[html]export.as_interactive_map">as <a id="export-interactive-map" href="">interactive Map</a></p>
<p><span class="t" t="[html]export.current_map_view">current <a id="export-map-state" href="">map view</a></span> <small>(<span class="t" t="export.map_view_expl">bbox, center, etc.</span>)</small></p>
</div>
<h4 class="t" t="export.section.query">Query</h4>
<div>
<p class="t" t="[html]export.as_text">as <a id="export-text" href="" download="query.txt" target="_blank">text</a></p>
<p class="t" t="[html]export.to_xml">convert to <a id="export-convert-xml" href="" target="_blank">Overpass-XML<span class="ui-icon ui-icon-extlink" style="display:inline-block;"></span></a></p>
<p class="t" t="[html]export.to_ql">convert to (<a id="export-convert-compact" href="" target="_blank">compact<span class="ui-icon ui-icon-extlink" style="display:inline-block;"></span></a>) <a id="export-convert-ql" href="" target="_blank">OverpassQL<span class="ui-icon ui-icon-extlink" style="display:inline-block;"></span></a></p>
</div>
</div>
<div title="Export - GeoJSON" id="export-geojson-dialog" class="t dialog" t="[title]export.geoJSON.title">
<p class="t" t="export.geoJSON.expl">The currently shown data as GeoJSON:</p>
<textarea style="width:100%" rows="16" readonly></textarea>
</div>
<div title="Export - GPX" id="export-gpx-dialog" class="t dialog" t="[title]export.GPX.title">
<p class="t" t="export.GPX.expl">The currently shown data as GPX:</p>
<textarea style="width:100%" rows="16" readonly></textarea>
</div>
<div title="Export - raw" id="export-raw-dialog" class="t dialog" t="[title]export.raw.title">
<p class="t" t="export.raw.expl">The currently shown raw-data:</p>
<textarea style="width:100%" rows="16" readonly></textarea>
</div>
<!--share-->
<div title="Share" id="share-dialog" class="t dialog" t="[title]share.title">
<h3 class="t" t="share.header">Permalink</h3>
<p class="t" t="[html]share.copy_this_link">Copy this <a href="" id="share_link_a">link</a> to share the current code:</p>
<p><input type="text" style="width:100%" readonly id="share_link_textarea"/></p>
<span id="share_link_warning"></span>
<h3 class="t" t="share.options">Options</h3>
<p><input type="checkbox" name="include_coords" onchange="ide.updateShareLink();"/> <span class="t" t="share.incl_map_state">include current map state</span></p>
<p><input type="checkbox" name="run_immediately" onchange="ide.updateShareLink();"/> <span class="t" t="share.run_immediately">run this query immediately after loading</span></p>
</div>
<script>
// initialize ide on document ready
$(document).ready(ide.init);
</script>
</body>
</html>