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,points) {
 220                         var proj_EPSG4326 = new OpenLayers.Projection("EPSG:4326");
 221                         var proj_map = map.getProjectionObject();
 222                         map.zoomToExtent(new OpenLayers.Bounds(minlon,minlat,maxlon,maxlat).transform(proj_EPSG4326, proj_map));
 223                         var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 224                         map.panTo(lonLat, <?php echo $iZoom ?>);
 225
 226                         var pointList = [];
 227                         var style = {
 228                                 strokeColor: "#75ADFF",
 229                                 fillColor: "#F0F7FF",
 230                                 strokeWidth: 2,
 231                                 strokeOpacity: 0.75,
 232                                 fillOpacity: 0.75
 233                         };
 234                         var proj_EPSG4326 = new OpenLayers.Projection("EPSG:4326");
 235                         var proj_map = map.getProjectionObject();
 236                         if (points)
 237                         {
 238                                 points.each(function(p){
 239                                         pointList.push(new OpenLayers.Geometry.Point(p[0],p[1]));
 240                                         });
 241                                 var linearRing = new OpenLayers.Geometry.LinearRing(pointList).transform(proj_EPSG4326, proj_map);;
 242                                 var polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing]),null,style);
 243                                 vectorLayer.destroyFeatures();
 244                                 vectorLayer.addFeatures([polygonFeature]);
 245                         }
 246                         else
 247                         {
 248                                 var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 249                                 var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
 250                                 var pointFeature = new OpenLayers.Feature.Vector(point,null,style);
 251                                 vectorLayer.destroyFeatures();
 252                                 vectorLayer.addFeatures([pointFeature]);
 253                         }
 254                 }
 255
 256                 function round(v,n)
 257                 {
 258                         n = Math.pow(10,n);
 259                         return Math.round(v*n)/n;
 260                 }
 261                 function floor(v,n)
 262                 {
 263                         n = Math.pow(10,n);
 264                         return Math.floor(v*n)/n;
 265                 }
 266                 function ceil(v,n)
 267                 {
 268                         n = Math.pow(10,n);
 269                         return Math.ceil(v*n)/n;
 270                 }
 271
 272                 function mapEventMove() {
 273                         var proj = new OpenLayers.Projection("EPSG:4326");
 274                         var bounds = map.getExtent();
 275                         bounds = bounds.transform(map.getProjectionObject(), proj);
 276                         $('viewbox').value = floor(bounds.left,2)+','+ceil(bounds.top,2)+','+ceil(bounds.right,2)+','+floor(bounds.bottom,2);
 277                 }
 278
 279     function init() {
 280                         handleResize();
 281                         map = new OpenLayers.Map ("map", {
 282                 controls:[
 283                                                                                 new OpenLayers.Control.Navigation(),
 284                                                                                 new OpenLayers.Control.PanZoomBar(),
 285                                                                                 new OpenLayers.Control.MouseDefaults(),
 286                                                                                 new OpenLayers.Control.MousePosition(),
 287                                                                                 new OpenLayers.Control.Attribution()],
 288                 maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
 289                 maxResolution: 156543.0399,
 290                 numZoomLevels: 19,
 291                 units: 'm',
 292                 projection: new OpenLayers.Projection("EPSG:900913"),
 293                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
 294                 eventListeners: {
 295                                                                         "moveend": mapEventMove
 296                                                                 }
 297                 } );
 298                         map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default"));
 299
 300                         var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 301                         layer_style.fillOpacity = 0.2;
 302                         layer_style.graphicOpacity = 1;
 303                         vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
 304                         map.addLayer(vectorLayer);
 305
 306 //                      var lonLat = new OpenLayers.LonLat(<?php echo $fLon ?>, <?php echo $fLat ?>).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 307 //                      map.setCenter (lonLat, <?php echo $iZoom ?>);
 308                 }
 309
 310                 function setfocus(field_id) {
 311                         $(field_id).focus()
 312                 }
 313
 314         </script>
 315 </head>
 316
 317 <body onload="setfocus('q');">
 318
 319         <div id="seachheaderfade1"></div><div id="seachheaderfade2"></div><div id="seachheaderfade3"></div><div id="seachheaderfade4"></div>
 320
 321         <div id="seachheader">
 322                 <form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
 323                         <table border="0" width="100%">
 324                                 <tr>
 325                                         <td valign="center" style="width:30px;"><img src="images/logo.gif"></td>
 326                                         <td valign="center" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery);
 327 ?>" style="width:270px;"><input type="text" id="viewbox" style="width:130px;" name="viewbox"></td>
 328                                         <td style="width:80px;"><input type="submit" value="Search"></td>
 329 <?php if (CONST_Search_AreaPolygons) { ?>                                       <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bShowPolygons) echo "checked"; ?>> Highlight</td>
 330 <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
 331 <td style="text-align:right;">
 332 <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ"
 333 target="_blank">FAQ</a></td>
 334
 335 <?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>
 336                                 </tr>
 337                         </table>
 338                 </form>
 339         </div>
 340
 341 <?php
 342         if ($sQuery || sizeof($aSearchResults))
 343         {
 344 ?>
 345         <div id="searchresultsfade1"></div><div id="searchresultsfade2"></div><div id="searchresultsfade3"></div><div id="searchresultsfade4"></div>
 346         <div id="searchresults">
 347 <?php
 348         if ($sSuggestionURL)
 349         {
 350                 echo '<div class="more"><b>Suggest: </b><a href="'.$sSuggestionURL.'"><b>'.$sSuggestion.'</b></a></div>';
 351         }
 352         foreach($aSearchResults as $iResNum => $aResult)
 353         {
 354                 if ($aResult['aBoundingBox'])
 355                 {
 356                         echo '<div class="result" onClick=\'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 357                         echo ', '.$aResult['aBoundingBox'][0];
 358                         echo ', '.$aResult['aBoundingBox'][1];
 359                         echo ', '.$aResult['aBoundingBox'][2];
 360                         echo ', '.$aResult['aBoundingBox'][3];
 361                         if (isset($aResult['aPolyPoints'])) echo ', '.json_encode($aResult['aPolyPoints']);
 362                         echo ');\'>';
 363                 }
 364                 elseif (isset($aResult['zoom']))
 365                 {
 366                         echo '<div class="result" onClick="panToLatLonZoom('.$aResult['lat'].', '.$aResult['lon'].', '.$aResult['zoom'].');">';
 367                 }
 368                 else
 369                 {
 370                         echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
 371                 }
 372
 373                 echo (isset($aResult['icon'])?'<img src="'.$aResult['icon'].'">':'');
 374                 echo ' <span class="name">'.$aResult['name'].'</span>';
 375                 echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>';
 376                 echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
 377                 if (isset($aResult['label']))
 378                         echo ' <span class="type">('.$aResult['label'].')</span>';
 379                 else
 380                         echo ' <span class="type">('.ucwords(str_replace('_',' ',$aResult['type'])).')</span>';
 381                 echo ' <span class="details">(<a href="details.php?place_id='.$aResult['place_id'].'">details</a>)</span>';
 382                 echo '</div>';
 383         }
 384         if (sizeof($aSearchResults))
 385         {
 386                 if ($sMoreURL)
 387                 {
 388                         echo '<div class="more"><a href="'.$sMoreURL.'">Search for more results</a></div>';
 389                 }
 390         }
 391         else
 392         {
 393                 echo '<div class="noresults">No search results found</div>';
 394         }
 395
 396 ?>
 397                 <div class="disclaimer">Addresses and postcodes are approximate
 398                         <input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')">
 399                 </div>
 400         </div>
 401 <?php
 402 }
 403 ?>
 404
 405         <div id="map"></div>
 406         <div id="report" style="visibility:hidden;"><div style="width:600px;margin:auto;margin-top:60px;">
 407                 <h2>Report a problem</h2>
 408                 <p>Before reporting problems please read the <a href="http://wiki.openstreetmap.org/wiki/Nominatim">user documentation</a> and <a
 409 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
 410 to check how the address was generated before reporting a problem.</p>
 411                 <p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems
 412 making sure to set
 413 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>
 414                 <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
 415 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
 416 require significant research!</p>
 417                 </div>
 418
 419 <!--
 420                 <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
 421 report any other problems.</p>
 422                 <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
 423 reporting a problem.</p>
 424                 <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>
 425                 <form method="post">
 426                 <table>
 427                 <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>
 428                 <tr><th>Your Email Address(opt):</th><td><input type="text" name="report:email" value="" style="width:500px;"></td></tr>
 429                 <tr><th>Description of Problem:</th><td><textarea name="report:description" style="width:500px;height:200px;"></textarea></td></tr>
 430                 <tr><td colspan="2" class="button"><input type="button" value="Cancel" onclick="$('report').style.visibility='hidden'"><input type="submit" value="Report"></td></tr>
 431                 </table>
 432                 </form>
 433                 <h2>Known Problems</h2>
 434                 <ul>
 435                 <li>Countries where missed out of the index</li>
 436                 <li>Area Polygons relate to the search area - not the address area which would make more sense</li>
 437                 </ul>
 438 -->
 439         </div>
 440
 441         <script type="text/javascript">
 442 init();
 443 <?php
 444         foreach($aSearchResults as $iResNum => $aResult)
 445         {
 446                 if ($aResult['aBoundingBox'])
 447                 {
 448                         echo 'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 449                         echo ', '.$aResult['aBoundingBox'][0];
 450                         echo ', '.$aResult['aBoundingBox'][1];
 451                         echo ', '.$aResult['aBoundingBox'][2];
 452                         echo ', '.$aResult['aBoundingBox'][3];
 453                         if (isset($aResult['aPolyPoints'])) echo ', '.javascript_renderData($aResult['aPolyPoints']);
 454                         echo ');'."\n";
 455                 }
 456                 else
 457                 {
 458                         echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
 459                 }
 460                 break;
 461         }
 462         if (!sizeof($aSearchResults))
 463         {
 464                 echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
 465         }
 466 ?>
 467 </script>
 468 </body>
 469
 470 </html>