]> git.openstreetmap.org Git - nominatim.git/blob - lib/template/search-html.php
clean up html for search form
[nominatim.git] / lib / template / search-html.php
1 <?php
2         header("content-type: text/html; charset=UTF-8");
3 ?>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head>
7         <title>OpenStreetMap Nominatim: Search</title>
8
9         <base href="<?php echo CONST_Website_BaseURL;?>" />
10         <link href="nominatim.xml" rel="search" title="Nominatim Search" type="application/opensearchdescription+xml" />
11         <link href="css/search.css" rel="stylesheet" type="text/css" />
12
13         <script src="js/OpenLayers.js" type="text/javascript"></script>
14         <script src="js/tiles.js" type="text/javascript"></script>
15         <script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
16
17         <script type="text/javascript">
18         
19                 var map;
20
21                 function handleResize()
22                 {
23                         if ($('searchresults'))
24                         {
25                 var viewwidth = ((document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200) + 'px';
26                                 $('map').style.width = viewwidth;
27                                 $('report').style.width = viewwidth;
28                         }
29                         else
30                         {
31                                 $('map').style.width = ((document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 0) + 'px';
32                                 $('map').style.left = '0px';
33                         }
34                         
35                         if ($('map')) $('map').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
36                         if ($('searchresults')) $('searchresults').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
37                         if ($('report')) $('report').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
38                 }
39                 window.onresize = handleResize;
40
41                 function panToLatLon(lat,lon) {
42                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
43                         map.panTo(lonLat, <?php echo $iZoom ?>);
44                 }
45
46                 function panToLatLonZoom(lat, lon, zoom) {
47                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
48                         if (zoom != map.getZoom())
49                                 map.setCenter(lonLat, zoom);
50                         else
51                                 map.panTo(lonLat, 10);
52                 }
53
54                 function panToLatLonBoundingBox(lat,lon,minlat,maxlat,minlon,maxlon,wkt) {
55                         vectorLayer.destroyFeatures();
56                         var proj_EPSG4326 = new OpenLayers.Projection("EPSG:4326");
57                         var proj_map = map.getProjectionObject();
58                         map.zoomToExtent(new OpenLayers.Bounds(minlon,minlat,maxlon,maxlat).transform(proj_EPSG4326, proj_map));
59                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(proj_EPSG4326, proj_map);
60                         map.panTo(lonLat, <?php echo $iZoom ?>);
61
62                         if (wkt)
63                         {
64                                 var freader = new OpenLayers.Format.WKT({
65                                                 'internalProjection': proj_map,
66                                                 'externalProjection': proj_EPSG4326
67                                                 });
68
69                                 var feature = freader.read(wkt);
70                                 if (feature)
71                                 {
72                                         feature.style = {
73                                                         strokeColor: "#75ADFF",
74                                                         fillColor: "#F0F7FF",
75                                                         strokeWidth: 2,
76                                                         strokeOpacity: 0.75,
77                                                         fillOpacity: 0.75,
78                                                         pointRadius: 100
79                     };
80                                         vectorLayer.addFeatures([feature]);
81                                 }
82                         }
83                 }
84
85                 function round(v,n)
86                 {
87                         n = Math.pow(10,n);
88                         return Math.round(v*n)/n;
89                 }
90                 function floor(v,n)
91                 {
92                         n = Math.pow(10,n);
93                         return Math.floor(v*n)/n;
94                 }
95                 function ceil(v,n)
96                 {
97                         n = Math.pow(10,n);
98                         return Math.ceil(v*n)/n;
99                 }
100
101                 function mapEventMove() {
102                         var proj = new OpenLayers.Projection("EPSG:4326");
103                         var bounds = map.getExtent();
104                         bounds = bounds.transform(map.getProjectionObject(), proj);
105                         $('viewbox').value = floor(bounds.left,2)+','+ceil(bounds.top,2)+','+ceil(bounds.right,2)+','+floor(bounds.bottom,2);
106                 }
107
108     function init() {
109                         handleResize();
110                         map = new OpenLayers.Map ("map", {
111                 controls:[
112                                                                                 new OpenLayers.Control.Navigation(),
113                                                                                 new OpenLayers.Control.PanZoomBar(),
114                                                                                 new OpenLayers.Control.MouseDefaults(),
115                                                                                 new OpenLayers.Control.MousePosition(),
116                                                                                 new OpenLayers.Control.Attribution()],
117                 maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
118                 maxResolution: 156543.0399,
119                 numZoomLevels: 19,
120                 units: 'm',
121                 projection: new OpenLayers.Projection("EPSG:900913"),
122                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
123                 eventListeners: {
124                                                                         "moveend": mapEventMove
125                                                                 }
126                 } );
127                         map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default"));
128
129                         var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
130                         layer_style.fillOpacity = 0.2;
131                         layer_style.graphicOpacity = 1;
132                         vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
133                         map.addLayer(vectorLayer);
134                         
135 //                      var lonLat = new OpenLayers.LonLat(<?php echo $fLon ?>, <?php echo $fLat ?>).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
136 //                      map.setCenter (lonLat, <?php echo $iZoom ?>);
137                 }
138
139                 function setfocus(field_id) { 
140                         $(field_id).focus() 
141                 } 
142                 
143         </script>
144 </head>
145
146 <body onload="setfocus('q');">
147
148         <div id="seachheaderfade1"></div><div id="seachheaderfade2"></div><div id="seachheaderfade3"></div><div id="seachheaderfade4"></div>
149
150         <div id="seachheader">
151                 <form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
152                         <table border="0" width="100%" summary="header">
153                                 <tr>
154                                         <td valign="middle" style="width:30px;"><img alt="logo" src="images/logo.gif" /></td>
155                                         <td valign="middle" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery); 
156 ?>" style="width:270px;" /><input type="text" id="viewbox" style="width:128px;" name="viewbox" /></td>
157                                         <td style="width:80px;"><input type="submit" value="Search"/></td>
158 <?php if (CONST_Search_AreaPolygons) { ?>                                       <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked='checked'"; ?>/> Highlight</td>
159 <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
160 <td style="text-align:right;">
161 <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ" 
162 target="_blank">FAQ</a></td>
163
164 <?php } ?>                                      <td style="text-align:right;"><?php if ($sQuery) { ?><input type="button" value="Report Problem With Results" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"/><?php } ?></td>
165                                 </tr>
166                         </table>
167                 </form>
168         </div>
169
170 <?php
171         if ($sQuery || sizeof($aSearchResults))
172         {
173 ?>
174         <div id="searchresultsfade1"></div><div id="searchresultsfade2"></div><div id="searchresultsfade3"></div><div id="searchresultsfade4"></div>
175         <div id="searchresults">
176 <?php
177         if ($sSuggestionURL)
178         {
179                 echo '<div class="more"><b>Suggest: </b><a href="'.$sSuggestionURL.'"><b>'.$sSuggestion.'</b></a></div>';
180         }
181         foreach($aSearchResults as $iResNum => $aResult)
182         {
183                 if ($aResult['aBoundingBox'])
184                 {
185                         echo '<div class="result" onClick=\'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
186                         echo ', '.$aResult['aBoundingBox'][0];
187                         echo ', '.$aResult['aBoundingBox'][1];
188                         echo ', '.$aResult['aBoundingBox'][2];
189                         echo ', '.$aResult['aBoundingBox'][3];
190                         if (isset($aResult['astext'])) echo ', "'.$aResult['astext'].'"';
191                         echo ");'>\n";
192                 }
193                 elseif (isset($aResult['zoom']))
194                 {
195                         echo '<div class="result" onClick="panToLatLonZoom('.$aResult['lat'].', '.$aResult['lon'].', '.$aResult['zoom'].');">';
196                 }
197                 else
198                 {
199                         echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
200                 }
201
202                 echo (isset($aResult['icon'])?'<img alt="icon" src="'.$aResult['icon'].'"/>':'');
203                 echo ' <span class="name">'.$aResult['name'].'</span>';
204                 echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>';
205                 echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
206                 if (isset($aResult['label']))
207                         echo ' <span class="type">('.$aResult['label'].')</span>';
208                 else
209                         echo ' <span class="type">('.ucwords(str_replace('_',' ',$aResult['type'])).')</span>';
210                 echo ' <span class="details">(<a href="details.php?place_id='.$aResult['place_id'].'">details</a>)</span>';
211                 echo '</div>';
212         }
213         if (sizeof($aSearchResults))
214         {
215                 if ($sMoreURL)
216                 {
217                         echo '<div class="more"><a href="'.htmlentities($sMoreURL).'">Search for more results</a></div>';
218                 }
219         }
220         else
221         {
222                 echo '<div class="noresults">No search results found</div>';
223         }
224
225 ?>
226                 <div class="disclaimer">Addresses and postcodes are approximate
227                         <input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"/>
228                 </div>
229         </div>
230 <?php
231 }
232 ?>
233
234         <div id="map"></div>
235         <div id="report" style="visibility:hidden;"><div style="width:600px;margin:auto;margin-top:60px;">
236                 <h2>Report a problem</h2>
237                 <p>Before reporting problems please read the <a href="http://wiki.openstreetmap.org/wiki/Nominatim">user documentation</a> and <a 
238 href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ">FAQ</a>.  If your problem relates to the address of a particular search result please use the 'details' link 
239 to check how the address was generated before reporting a problem.</p>
240                 <p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems 
241 making sure to set 
242 the component to 'nominatim'.  You can search for existing bug reports <a href="http://trac.openstreetmap.org/query?status=new&amp;status=assigned&amp;status=reopened&amp;component=nominatim&amp;order=priority">here</a>.</p>
243                 <p>Please ensure that you include a full description of the problem, including the search query that you used, the problem with the result and, if 
244 the problem relates to missing data, the osm id of the item that is missing.  Problems that contain enough detail are likely to get looked at before ones that 
245 require significant research!</p>
246                 </div>
247                 
248 <!--
249                 <p>Please use this form to report problems with the search results.  Of particular interest are items missing, but please also use this form to 
250 report any other problems.</p>
251                 <p>If your problem relates to the address of a particular search result please use the 'details' link to check how the address was generated before 
252 reporting a problem.</p>
253                 <p>If you are reporting a missing result please (if possible) include the OSM ID of the item you where expecting (i.e. node 422162)</p>
254                 <form method="post">
255                 <table>
256                 <tr><th>Your Query:</th><td><input type="hidden" name="report:query" value="<?php echo htmlspecialchars($sQuery); ?>" style="width:500px;"><?php echo htmlspecialchars($sQuery); ?></td></tr>
257                 <tr><th>Your Email Address(opt):</th><td><input type="text" name="report:email" value="" style="width:500px;"></td></tr>
258                 <tr><th>Description of Problem:</th><td><textarea name="report:description" style="width:500px;height:200px;"></textarea></td></tr>
259                 <tr><td colspan="2" class="button"><input type="button" value="Cancel" onclick="$('report').style.visibility='hidden'"><input type="submit" value="Report"></td></tr>
260                 </table>
261                 </form>
262                 <h2>Known Problems</h2>
263                 <ul>
264                 <li>Countries where missed out of the index</li>
265                 <li>Area Polygons relate to the search area - not the address area which would make more sense</li>
266                 </ul>
267 -->
268         </div>
269
270         <script type="text/javascript">
271 init();
272 <?php
273         foreach($aSearchResults as $iResNum => $aResult)
274         {
275                 if ($aResult['aBoundingBox'])
276                 {
277                         echo 'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
278                         echo ', '.$aResult['aBoundingBox'][0];
279                         echo ', '.$aResult['aBoundingBox'][1];
280                         echo ', '.$aResult['aBoundingBox'][2];
281                         echo ', '.$aResult['aBoundingBox'][3];
282                         if (isset($aResult['astext'])) echo ", '".$aResult['astext']."'";
283                         echo ');'."\n";
284                 }
285                 else
286                 {
287                         echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
288                 }
289                 break;
290         }
291         if (!sizeof($aSearchResults))
292         {
293                 echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
294         }
295 ?>
296 </script>
297 </body>
298
299 </html>