]> git.openstreetmap.org Git - nominatim-ui.git/blob - dist/search.html
Merge pull request #6 from osm-search/structured-search-form
[nominatim-ui.git] / dist / search.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4   <title>OpenStreetMap Nominatim</title>
5   <meta name="viewport" content="width=device-width, initial-scale=1">
6
7   <link rel="icon" type="image/png" href="/assets/images/favicon-194x194.png" sizes="194x194" />
8   <link rel="icon" type="image/png" href="/assets/images/favicon-16x16.png" sizes="16x16" />
9
10   <link href="assets/css/leaflet.css" rel="stylesheet" />
11   <link href="assets/css/Control.MiniMap.min.css" rel="stylesheet" />
12   <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet" />
13   <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
14   <link href="assets/css/common.css" rel="stylesheet" />
15   <link href="assets/css/search.css" rel="stylesheet" type="text/css" />
16   <link href="assets/css/details.css" rel="stylesheet" type="text/css" />
17 </head>
18 <body id="search-page">
19
20   <div id="error-overlay">
21     You need Javascript enabled to view this page.
22   </div>
23
24   <header class="container-fluid">
25     <div class="row">
26       <div class="col-xs-4">
27         <div class="brand">
28           <a href="/">
29             <img alt="logo" src="assets/images/osm_logo.120px.png" width="30" height="30"/>
30             <h1>Nominatim</h1>
31           </a>
32         </div>
33       </div>
34       <div id="last-updated" class="col-xs-4 text-center">
35         Data from <a id="api-request-link" href="">API request</a>
36         <br>
37         Data last updated:
38         <span id="data-date"></span>
39       </div>
40       <div class="col-xs-4 text-right">
41         <div class="btn-group">
42           <button class="dropdown-toggle btn btn-sm btn-default" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
43             About &amp; Help <span class="caret"></span>
44           </button>
45           <ul class="dropdown-menu dropdown-menu-right">
46             <li><a href="https://nominatim.org/release-docs/develop/api/Overview/" target="_blank">API Reference</a></li>
47             <li><a href="https://nominatim.org/release-docs/develop/api/Faq/" target="_blank">FAQ</a></li>
48             <li><a href="https://help.openstreetmap.org/tags/nominatim/">OpenStreetMap Help</a></li>
49             <li><a href="https://github.com/osm-search/Nominatim">Nominatim on Github</a></li>
50             <li><a href="https://github.com/osm-search/nominatim-ui">This frontend on Github</a></li>
51             <li role="separator" class="divider"></li>
52             <li><a href="#" class="" data-toggle="modal" data-target="#report-modal">Report problem with results</a></li>
53           </ul>
54         </div>
55       </div>
56     </div>
57   </header>
58
59   <div class="modal fade" id="report-modal">
60     <div class="modal-dialog">
61       <div class="modal-content">
62         <div class="modal-header">
63           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
64           <h4 class="modal-title">Report a problem</h4>
65         </div>
66         <div class="modal-body">
67           <p>
68             Before reporting problems please read the <a target="_blank" href="https://nominatim.org/release-docs/develop/api/Overview/">user documentation</a>
69             and
70             <a target="_blank" href="https://nominatim.org/release-docs/develop/api/Faq/">FAQ</a>.
71
72             If your problem relates to the address of a particular search result please use the 'details' link 
73             to check how the address was generated before reporting a problem.
74           </p>
75           <p>
76             Use <a target="_blank" href="https://github.com/osm-search/Nominatim/issues">Nominatim issues on github</a>
77             to report problems.
78           </p>
79           <p>
80             Please ensure that you include a full description of the problem, including the search
81             query that you used, the problem with the result and, if the problem relates to missing data,
82             the osm type (node, way, relation) and id of the item that is missing.
83           </p>
84           <p>
85             Problems that contain enough detail are likely to get looked at before ones that require
86             significant research.
87           </p>
88         </div>
89         <div class="modal-footer">
90           <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
91         </div>
92       </div>
93     </div>
94   </div>
95
96   <main>
97   </main>
98
99   <footer>
100     <p class="disclaimer">
101       Addresses and postcodes are approximate
102     </p>
103     <p class="copyright">
104       &copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors
105     </p>
106   </footer>
107
108   <script src="assets/js/jquery.min.js"></script>
109   <script src="assets/js/bootstrap.min.js"></script>
110   <script src="assets/js/leaflet.js"></script>
111   <script src="assets/js/Control.MiniMap.min.js"></script>
112   <script src="assets/js/handlebars.min.js"></script>
113   <script src="assets/js/url-search-params.js"></script>
114
115   <script src="config.js"></script>
116   <script src="handlebar_helpers.js"></script>
117
118   <script src="assets/js/nominatim-ui.js"></script>
119 <script id="searchpage-template" type="text/x-handlebars-template">
120 {{#*inline "partial_one_result"}}
121   <div class="result" data-position="{{iResNum}}">
122     {{#if aResult.icon}}
123       {{!-- <img src="{{env.Images_Base_Url}}{{aResult.icon}}" /> --}}
124       {{formatMapIcon aResult.icon}}
125     {{/if}}
126
127     <span class="name">{{aResult.display_name}}</span>
128     <span class="type">({{formatLabel aResult}})</span>
129     <p class="coords">{{aResult.lat}},{{aResult.lon}}</p>  
130
131     <a class="btn btn-default btn-xs details"
132        href="details.html?osmtype={{shortOSMType aResult.osm_type}}&osmid={{aResult.osm_id}}">details</a>
133   </div>
134 {{/inline}}
135
136 <div class="top-bar" id="structured-query-selector">
137   <div class="search-type-link">
138     <a id="switch-to-reverse" href="/reverse.html">reverse search</a>
139   </div>
140   <div class="radio-inline"><input type="radio" name="query-selector" id="simple" value="simple" {{#unless hStructured}}checked="checked"{{/unless}}>
141   <label for="simple">simple</label></div>
142   <div class="radio-inline"><input type="radio" name="query-selector" id="structured" value="structured" {{#if hStructured}}checked="checked"{{/if}}>
143   <label for="structured">structured</label></div>
144
145   <form class="form-inline" role="search" accept-charset="UTF-8" action="">
146     <div class="form-group-simple {{#if hStructured}}hidden{{/if}}">
147       <input id="q"
148              name="q"
149              type="text"
150              class="form-control input-sm"
151              placeholder="Search"
152              value="{{sQuery}}" />
153     </div>
154     <div class="form-group-structured {{#unless hStructured}}hidden{{/unless}}">
155       <div class="form-inline">
156         <input name="street" type="text" class="form-control input-sm"
157                placeholder="House number/Street"
158                value="{{hStructured.street}}" />
159         <input name="city" type="text" class="form-control input-sm"
160                placeholder="City"
161                value="{{hStructured.city}}" />
162         <input id="county" name="county" type="text" class="form-control input-sm"
163                placeholder="County"
164                value="{{hStructured.county}}" />
165         <input name="state" type="text" class="form-control input-sm"
166                placeholder="State"
167                value="{{hStructured.state}}" />
168         <input name="country" type="text" class="form-control input-sm"
169                placeholder="Country"
170                value="{{hStructured.country}}" />
171         <input name="postalcode" type="text" class="form-control input-sm"
172                placeholder="Postal Code"
173                value="{{hStructured.postalcode}}" />
174       </div>
175     </div>
176     <div class="form-group search-button-group">
177       <button type="submit" class="btn btn-primary btn-sm">Search</button>
178       {{#if env.Search_AreaPolygons}}
179         <input type="hidden" value="1" name="polygon_geojson" />
180       {{/if}}
181       <input type="hidden" name="viewbox" value="{{sViewBox}}" />
182       <div class="checkbox-inline">
183         <input type="checkbox"
184                id="use_viewbox" {{#if sViewBox}}checked="checked"{{/if}}>
185         <label for="use_viewbox">apply viewbox</label>
186       </div>
187     </div>
188   </form>
189 </div>
190
191 <div id="content">
192
193   {{#if sQuery}}
194     <div id="searchresults" class="sidebar">
195       {{#each aSearchResults as |aResult|}}
196         {{>partial_one_result iResNum=@index aResult=aResult env=env}}
197       {{/each}}
198
199       {{#if aSearchResults}}
200         {{#if sMoreURL}}
201           <div class="more">
202             <a class="btn btn-primary" href="{{sMoreURL}}">
203               Search for more results
204             </a>
205           </div>
206         {{/if}}
207       {{else}}
208         <div class="noresults">No search results found</div>
209       {{/if}}
210     </div>
211
212   {{else}}
213
214     <div id="intro" class="sidebar">
215       <h2>Welcome to Nominatim</h2>
216
217       <p>
218         Nominatim is a search engine for
219         <a href="https://www.openstreetmap.org">OpenStreetMap</a> data. This
220         is the debugging interface. You may search for a name or address
221         (forward search) or look up data by its geographic coordinate (reverse
222         search). Each result comes with a link to a details page where you
223         can inspect what data about the object is saved in the database and
224         investigate how the address of the object has been computed.
225       </p>
226
227       For more information visit the
228       <a href="https://nominatim.org">Nominatim home page</a>.
229     </div>
230
231   {{/if}}
232
233   <div id="map-wrapper">
234     <div id="map-position">
235       <div id="map-position-inner"></div>
236       <div id="map-position-close"><a href="#">hide</a></div>
237     </div>
238     <div id="map"></div>
239   </div>
240 </div>
241 </script>
242 </body>
243 </html>