lib/template/search-html.php

   1 <?php
   2         header("content-type: text/html; charset=UTF-8");
   3 ?>
   4 <html>
   5 <head>
   6         <title>OpenStreetMap Nominatim: Search</title>
   7
   8         <base href="<?php echo CONST_Website_BaseURL;?>" />
   9         <link href="nominatim.xml" rel="search" title="Nominatim Search" type="application/opensearchdescription+xml" />
  10
  11         <script src="js/OpenLayers.js"></script>
  12         <script src="js/tiles.js"></script>
  13         <script src="js/prototype-1.6.0.3.js"></script>
  14
  15         <style>
  16 * {-moz-box-sizing: border-box;}
  17 body {
  18   margin:0px;
  19   padding:0px;
  20   overflow: hidden;
  21   background:#ffffff;
  22   height: 100%;
  23   font: normal 12px/15px arial,sans-serif;
  24 }
  25 #seachheader {
  26   position:absolute;
  27   z-index:5;
  28   top:0px;
  29   left:0px;
  30   width:100%;
  31   height:38px;
  32   background:#F0F7FF;
  33   border-bottom: 2px solid #75ADFF;
  34 }
  35 #q {
  36   width:300px;
  37 }
  38 #seachheaderfade1, #seachheaderfade2, #seachheaderfade3, #seachheaderfade4{
  39   position:absolute;
  40   z-index:4;
  41   top:0px;
  42   left:0px;
  43   width:100%;
  44   opacity: 0.15;
  45   filter: alpha(opacity = 15);
  46   background:#000000;
  47   border: 1px solid #000000;
  48 }
  49 #seachheaderfade1{
  50   height:39px;
  51 }
  52 #seachheaderfade2{
  53   height:40px;
  54 }
  55 #seachheaderfade3{
  56   height:41px;
  57 }
  58 #seachheaderfade4{
  59   height:42px;
  60 }
  61 #searchresultsfade1, #searchresultsfade2, #searchresultsfade3, #searchresultsfade4 {
  62   position:absolute;
  63   z-index:2;
  64   top:0px;
  65   left:200px;
  66   height: 100%;
  67   opacity: 0.2;
  68   filter: alpha(opacity = 20);
  69   background:#ffffff;
  70   border: 1px solid #ffffff;
  71 }
  72 #searchresultsfade1{
  73   width:1px;
  74 }
  75 #searchresultsfade2{
  76   width:2px;
  77 }
  78 #searchresultsfade3{
  79   width:3px;
  80 }
  81 #searchresultsfade4{
  82   width:4px;
  83 }
  84
  85 #searchresults{
  86   position:absolute;
  87   z-index:3;
  88   top:41px;
  89   width:200px;
  90   height: 100%;
  91   background:#ffffff;
  92   border: 1px solid #ffffff;
  93   overflow: auto;
  94 }
  95 #map{
  96   position:absolute;
  97   z-index:1;
  98   top:38px;
  99   left:200px;
 100   width:100%;
 101   height:100%;
 102   background:#eee;
 103 }
 104 #report{
 105   position:absolute;
 106   z-index:2;
 107   top:38px;
 108   left:200px;
 109   width:100%;
 110   height:100%;
 111   background:#eee;
 112   font: normal 12px/15px arial,sans-serif;
 113   padding:20px;
 114 }
 115 #report table {
 116   margin-left:20px;
 117 }
 118 #report th {
 119   vertical-align:top;
 120   text-align:left;
 121 }
 122 #report td.button {
 123   text-align:right;
 124 }
 125 .result {
 126   margin:5px;
 127   margin-bottom:0px;
 128   padding:2px;
 129   padding-left:4px;
 130   padding-right:4px;
 131   border-radius: 5px;
 132   -moz-border-radius: 5px;
 133   -webkit-border-radius: 5px;
 134   background:#F0F7FF;
 135   border: 2px solid #D7E7FF;
 136   font: normal 12px/15px arial,sans-serif;
 137   cursor:pointer;
 138 }
 139 .result img{
 140   float:right;
 141 }
 142 .result .latlon{
 143   display: none;
 144 }
 145 .result .place_id{
 146   display: none;
 147 }
 148 .result .type{
 149   color: #999;
 150   text-align:center;
 151   font: normal 9px/10px arial,sans-serif;
 152   padding-top:4px;
 153 }
 154 .result .details, .result .details a{
 155   color: #999;
 156   text-align:center;
 157   font: normal 9px/10px arial,sans-serif;
 158   padding-top:4px;
 159 }
 160 .noresults{
 161   color: #000;
 162   text-align:center;
 163   font: normal 12px arial,sans-serif;
 164   padding-top:4px;
 165 }
 166 .more{
 167   color: #ccc;
 168   text-align:center;
 169   padding-top:4px;
 170 }
 171 .disclaimer{
 172   color: #ccc;
 173   text-align:center;
 174   font: normal 9px/10px arial,sans-serif;
 175   padding-top:4px;
 176 }
 177 form{
 178   margin:0px;
 179   padding:0px;
 180 }
 181         </style>
 182
 183         <script type="text/javascript">
 184
 185                 var map;
 186
 187                 function handleResize()
 188                 {
 189                         if ($('searchresults'))
 190                         {
 191                                 $('map').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200;
 192                                 $('report').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200;
 193                         }
 194                         else
 195                         {
 196                                 $('map').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 0;
 197                                 $('map').style.left = 0;
 198                         }
 199
 200                         if ($('map')) $('map').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38;
 201                         if ($('searchresults')) $('searchresults').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38;
 202                         if ($('report')) $('report').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38;
 203                 }
 204                 window.onresize = handleResize;
 205
 206                 function panToLatLon(lat,lon) {
 207                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 208                         map.panTo(lonLat, <?php echo $iZoom ?>);
 209                 }
 210
 211                 function panToLatLonZoom(lat, lon, zoom) {
 212                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 213                         if (zoom != map.getZoom())
 214                                 map.setCenter(lonLat, zoom);
 215                         else
 216                                 map.panTo(lonLat, 10);
 217                 }
 218
 219                 function panToLatLonBoundingBox(lat,lon,minlat,maxlat,minlon,maxlon,wkt) {
 220                         vectorLayer.destroyFeatures();
 221                         var proj_EPSG4326 = new OpenLayers.Projection("EPSG:4326");
 222                         var proj_map = map.getProjectionObject();
 223                         map.zoomToExtent(new OpenLayers.Bounds(minlon,minlat,maxlon,maxlat).transform(proj_EPSG4326, proj_map));
 224                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(proj_EPSG4326, proj_map);
 225                         map.panTo(lonLat, <?php echo $iZoom ?>);
 226
 227                         if (wkt)
 228                         {
 229                                 var freader = new OpenLayers.Format.WKT({
 230                                                 'internalProjection': proj_map,
 231                                                 'externalProjection': proj_EPSG4326
 232                                                 });
 233
 234                                 var feature = freader.read(wkt);
 235                                 if (feature)
 236                                 {
 237                                         feature.style = {
 238                                                         strokeColor: "#75ADFF",
 239                                                         fillColor: "#F0F7FF",
 240                                                         strokeWidth: 2,
 241                                                         strokeOpacity: 0.75,
 242                                                         fillOpacity: 0.75,
 243                                                         pointRadius: 100
 244                     };
 245                                         vectorLayer.addFeatures([feature]);
 246                                 }
 247                         }
 248                 }
 249
 250                 function round(v,n)
 251                 {
 252                         n = Math.pow(10,n);
 253                         return Math.round(v*n)/n;
 254                 }
 255                 function floor(v,n)
 256                 {
 257                         n = Math.pow(10,n);
 258                         return Math.floor(v*n)/n;
 259                 }
 260                 function ceil(v,n)
 261                 {
 262                         n = Math.pow(10,n);
 263                         return Math.ceil(v*n)/n;
 264                 }
 265
 266                 function mapEventMove() {
 267                         var proj = new OpenLayers.Projection("EPSG:4326");
 268                         var bounds = map.getExtent();
 269                         bounds = bounds.transform(map.getProjectionObject(), proj);
 270                         $('viewbox').value = floor(bounds.left,2)+','+ceil(bounds.top,2)+','+ceil(bounds.right,2)+','+floor(bounds.bottom,2);
 271                 }
 272
 273     function init() {
 274                         handleResize();
 275                         map = new OpenLayers.Map ("map", {
 276                 controls:[
 277                                                                                 new OpenLayers.Control.Navigation(),
 278                                                                                 new OpenLayers.Control.PanZoomBar(),
 279                                                                                 new OpenLayers.Control.MouseDefaults(),
 280                                                                                 new OpenLayers.Control.MousePosition(),
 281                                                                                 new OpenLayers.Control.Attribution()],
 282                 maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
 283                 maxResolution: 156543.0399,
 284                 numZoomLevels: 19,
 285                 units: 'm',
 286                 projection: new OpenLayers.Projection("EPSG:900913"),
 287                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
 288                 eventListeners: {
 289                                                                         "moveend": mapEventMove
 290                                                                 }
 291                 } );
 292                         map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default",
 293                          { attribution : '© <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, under an <a target="_parent" href="http://www.openstreetmap.org/copyright">open license</a>'}));
 294
 295                         var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 296                         layer_style.fillOpacity = 0.2;
 297                         layer_style.graphicOpacity = 1;
 298                         vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
 299                         map.addLayer(vectorLayer);
 300
 301 //                      var lonLat = new OpenLayers.LonLat(<?php echo $fLon ?>, <?php echo $fLat ?>).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 302 //                      map.setCenter (lonLat, <?php echo $iZoom ?>);
 303                 }
 304
 305                 function setfocus(field_id) {
 306                         $(field_id).focus()
 307                 }
 308
 309         </script>
 310 </head>
 311
 312 <body onload="setfocus('q');">
 313
 314         <div id="seachheaderfade1"></div><div id="seachheaderfade2"></div><div id="seachheaderfade3"></div><div id="seachheaderfade4"></div>
 315
 316         <div id="seachheader">
 317                 <form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
 318                         <table border="0" width="100%">
 319                                 <tr>
 320                                         <td valign="center" style="width:30px;"><img src="images/logo.gif"></td>
 321                                         <td valign="center" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery);
 322 ?>" style="width:270px;"><input type="text" id="viewbox" style="width:130px;" name="viewbox"></td>
 323                                         <td style="width:80px;"><input type="submit" value="Search"></td>
 324 <?php if (CONST_Search_AreaPolygons) { ?>                                       <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked"; ?>> Highlight</td>
 325 <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
 326 <td style="text-align:right;">
 327 <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ"
 328 target="_blank">FAQ</a></td>
 329
 330 <?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>
 331                                 </tr>
 332                         </table>
 333                 </form>
 334         </div>
 335
 336 <?php
 337         if ($sQuery || sizeof($aSearchResults))
 338         {
 339 ?>
 340         <div id="searchresultsfade1"></div><div id="searchresultsfade2"></div><div id="searchresultsfade3"></div><div id="searchresultsfade4"></div>
 341         <div id="searchresults">
 342 <?php
 343         if ($sSuggestionURL)
 344         {
 345                 echo '<div class="more"><b>Suggest: </b><a href="'.$sSuggestionURL.'"><b>'.$sSuggestion.'</b></a></div>';
 346         }
 347         foreach($aSearchResults as $iResNum => $aResult)
 348         {
 349                 if ($aResult['aBoundingBox'])
 350                 {
 351                         echo '<div class="result" onClick=\'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 352                         echo ', '.$aResult['aBoundingBox'][0];
 353                         echo ', '.$aResult['aBoundingBox'][1];
 354                         echo ', '.$aResult['aBoundingBox'][2];
 355                         echo ', '.$aResult['aBoundingBox'][3];
 356                         if (isset($aResult['astext'])) echo ', "'.$aResult['astext'].'"';
 357                         echo ");'>\n";
 358                 }
 359                 elseif (isset($aResult['zoom']))
 360                 {
 361                         echo '<div class="result" onClick="panToLatLonZoom('.$aResult['lat'].', '.$aResult['lon'].', '.$aResult['zoom'].');">';
 362                 }
 363                 else
 364                 {
 365                         echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
 366                 }
 367
 368                 echo (isset($aResult['icon'])?'<img src="'.$aResult['icon'].'">':'');
 369                 echo ' <span class="name">'.$aResult['name'].'</span>';
 370                 echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>';
 371                 echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
 372                 if (isset($aResult['label']))
 373                         echo ' <span class="type">('.$aResult['label'].')</span>';
 374                 else
 375                         echo ' <span class="type">('.ucwords(str_replace('_',' ',$aResult['type'])).')</span>';
 376                 echo ' <span class="details">(<a href="details.php?place_id='.$aResult['place_id'].'">details</a>)</span>';
 377                 echo '</div>';
 378         }
 379         if (sizeof($aSearchResults))
 380         {
 381                 if ($sMoreURL)
 382                 {
 383                         echo '<div class="more"><a href="'.$sMoreURL.'">Search for more results</a></div>';
 384                 }
 385         }
 386         else
 387         {
 388                 echo '<div class="noresults">No search results found</div>';
 389         }
 390
 391 ?>
 392                 <div class="disclaimer">Addresses and postcodes are approximate
 393                         <input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')">
 394                 </div>
 395         </div>
 396 <?php
 397 }
 398 ?>
 399
 400         <div id="map"></div>
 401         <div id="report" style="visibility:hidden;"><div style="width:600px;margin:auto;margin-top:60px;">
 402                 <h2>Report a problem</h2>
 403                 <p>Before reporting problems please read the <a href="http://wiki.openstreetmap.org/wiki/Nominatim">user documentation</a> and <a
 404 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
 405 to check how the address was generated before reporting a problem.</p>
 406                 <p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems
 407 making sure to set
 408 the component to 'nominatim'.  You can search for existing bug reports <a href="http://trac.openstreetmap.org/query?status=new&status=assigned&status=reopened&component=nominatim&order=priority">here</a>.</p>
 409                 <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
 410 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
 411 require significant research!</p>
 412                 </div>
 413
 414 <!--
 415                 <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
 416 report any other problems.</p>
 417                 <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
 418 reporting a problem.</p>
 419                 <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>
 420                 <form method="post">
 421                 <table>
 422                 <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>
 423                 <tr><th>Your Email Address(opt):</th><td><input type="text" name="report:email" value="" style="width:500px;"></td></tr>
 424                 <tr><th>Description of Problem:</th><td><textarea name="report:description" style="width:500px;height:200px;"></textarea></td></tr>
 425                 <tr><td colspan="2" class="button"><input type="button" value="Cancel" onclick="$('report').style.visibility='hidden'"><input type="submit" value="Report"></td></tr>
 426                 </table>
 427                 </form>
 428                 <h2>Known Problems</h2>
 429                 <ul>
 430                 <li>Countries where missed out of the index</li>
 431                 <li>Area Polygons relate to the search area - not the address area which would make more sense</li>
 432                 </ul>
 433 -->
 434         </div>
 435
 436         <script type="text/javascript">
 437 init();
 438 <?php
 439         foreach($aSearchResults as $iResNum => $aResult)
 440         {
 441                 if ($aResult['aBoundingBox'])
 442                 {
 443                         echo 'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 444                         echo ', '.$aResult['aBoundingBox'][0];
 445                         echo ', '.$aResult['aBoundingBox'][1];
 446                         echo ', '.$aResult['aBoundingBox'][2];
 447                         echo ', '.$aResult['aBoundingBox'][3];
 448                         if (isset($aResult['astext'])) echo ", '".$aResult['astext']."'";
 449                         echo ');'."\n";
 450                 }
 451                 else
 452                 {
 453                         echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
 454                 }
 455                 break;
 456         }
 457         if (!sizeof($aSearchResults))
 458         {
 459                 echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
 460         }
 461 ?>
 462 </script>
 463 </body>
 464
 465 </html>