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