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                          { 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>'}));
 300
 301                         var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 302                         layer_style.fillOpacity = 0.2;
 303                         layer_style.graphicOpacity = 1;
 304                         vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
 305                         map.addLayer(vectorLayer);
 306
 307 //                      var lonLat = new OpenLayers.LonLat(<?php echo $fLon ?>, <?php echo $fLat ?>).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 308 //                      map.setCenter (lonLat, <?php echo $iZoom ?>);
 309                 }
 310
 311                 function setfocus(field_id) {
 312                         $(field_id).focus()
 313                 }
 314
 315         </script>
 316 </head>
 317
 318 <body onload="setfocus('q');">
 319
 320         <div id="seachheaderfade1"></div><div id="seachheaderfade2"></div><div id="seachheaderfade3"></div><div id="seachheaderfade4"></div>
 321
 322         <div id="seachheader">
 323                 <form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
 324                         <table border="0" width="100%">
 325                                 <tr>
 326                                         <td valign="center" style="width:30px;"><img src="images/logo.gif"></td>
 327                                         <td valign="center" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery);
 328 ?>" style="width:270px;"><input type="text" id="viewbox" style="width:130px;" name="viewbox"></td>
 329                                         <td style="width:80px;"><input type="submit" value="Search"></td>
 330 <?php if (CONST_Search_AreaPolygons) { ?>                                       <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bShowPolygons) echo "checked"; ?>> Highlight</td>
 331 <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
 332 <td style="text-align:right;">
 333 <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ"
 334 target="_blank">FAQ</a></td>
 335
 336 <?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>
 337                                 </tr>
 338                         </table>
 339                 </form>
 340         </div>
 341
 342 <?php
 343         if ($sQuery || sizeof($aSearchResults))
 344         {
 345 ?>
 346         <div id="searchresultsfade1"></div><div id="searchresultsfade2"></div><div id="searchresultsfade3"></div><div id="searchresultsfade4"></div>
 347         <div id="searchresults">
 348 <?php
 349         if ($sSuggestionURL)
 350         {
 351                 echo '<div class="more"><b>Suggest: </b><a href="'.$sSuggestionURL.'"><b>'.$sSuggestion.'</b></a></div>';
 352         }
 353         foreach($aSearchResults as $iResNum => $aResult)
 354         {
 355                 if ($aResult['aBoundingBox'])
 356                 {
 357                         echo '<div class="result" onClick=\'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 358                         echo ', '.$aResult['aBoundingBox'][0];
 359                         echo ', '.$aResult['aBoundingBox'][1];
 360                         echo ', '.$aResult['aBoundingBox'][2];
 361                         echo ', '.$aResult['aBoundingBox'][3];
 362                         if (isset($aResult['aPolyPoints'])) echo ', '.json_encode($aResult['aPolyPoints']);
 363                         echo ');\'>';
 364                 }
 365                 elseif (isset($aResult['zoom']))
 366                 {
 367                         echo '<div class="result" onClick="panToLatLonZoom('.$aResult['lat'].', '.$aResult['lon'].', '.$aResult['zoom'].');">';
 368                 }
 369                 else
 370                 {
 371                         echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
 372                 }
 373
 374                 echo (isset($aResult['icon'])?'<img src="'.$aResult['icon'].'">':'');
 375                 echo ' <span class="name">'.$aResult['name'].'</span>';
 376                 echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>';
 377                 echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
 378                 if (isset($aResult['label']))
 379                         echo ' <span class="type">('.$aResult['label'].')</span>';
 380                 else
 381                         echo ' <span class="type">('.ucwords(str_replace('_',' ',$aResult['type'])).')</span>';
 382                 echo ' <span class="details">(<a href="details.php?place_id='.$aResult['place_id'].'">details</a>)</span>';
 383                 echo '</div>';
 384         }
 385         if (sizeof($aSearchResults))
 386         {
 387                 if ($sMoreURL)
 388                 {
 389                         echo '<div class="more"><a href="'.$sMoreURL.'">Search for more results</a></div>';
 390                 }
 391         }
 392         else
 393         {
 394                 echo '<div class="noresults">No search results found</div>';
 395         }
 396
 397 ?>
 398                 <div class="disclaimer">Addresses and postcodes are approximate
 399                         <input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')">
 400                 </div>
 401         </div>
 402 <?php
 403 }
 404 ?>
 405
 406         <div id="map"></div>
 407         <div id="report" style="visibility:hidden;"><div style="width:600px;margin:auto;margin-top:60px;">
 408                 <h2>Report a problem</h2>
 409                 <p>Before reporting problems please read the <a href="http://wiki.openstreetmap.org/wiki/Nominatim">user documentation</a> and <a
 410 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
 411 to check how the address was generated before reporting a problem.</p>
 412                 <p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems
 413 making sure to set
 414 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>
 415                 <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
 416 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
 417 require significant research!</p>
 418                 </div>
 419
 420 <!--
 421                 <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
 422 report any other problems.</p>
 423                 <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
 424 reporting a problem.</p>
 425                 <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>
 426                 <form method="post">
 427                 <table>
 428                 <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>
 429                 <tr><th>Your Email Address(opt):</th><td><input type="text" name="report:email" value="" style="width:500px;"></td></tr>
 430                 <tr><th>Description of Problem:</th><td><textarea name="report:description" style="width:500px;height:200px;"></textarea></td></tr>
 431                 <tr><td colspan="2" class="button"><input type="button" value="Cancel" onclick="$('report').style.visibility='hidden'"><input type="submit" value="Report"></td></tr>
 432                 </table>
 433                 </form>
 434                 <h2>Known Problems</h2>
 435                 <ul>
 436                 <li>Countries where missed out of the index</li>
 437                 <li>Area Polygons relate to the search area - not the address area which would make more sense</li>
 438                 </ul>
 439 -->
 440         </div>
 441
 442         <script type="text/javascript">
 443 init();
 444 <?php
 445         foreach($aSearchResults as $iResNum => $aResult)
 446         {
 447                 if ($aResult['aBoundingBox'])
 448                 {
 449                         echo 'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 450                         echo ', '.$aResult['aBoundingBox'][0];
 451                         echo ', '.$aResult['aBoundingBox'][1];
 452                         echo ', '.$aResult['aBoundingBox'][2];
 453                         echo ', '.$aResult['aBoundingBox'][3];
 454                         if (isset($aResult['aPolyPoints']))
 455                         {
 456                                 echo ', ';
 457                                 echo javascript_renderData($aResult['aPolyPoints']);
 458                         }
 459                         echo ');'."\n";
 460                 }
 461                 else
 462                 {
 463                         echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
 464                 }
 465                 break;
 466         }
 467         if (!sizeof($aSearchResults))
 468         {
 469                 echo 'panToLatLonZoom('.$fLat.', '.$fLon.', '.$iZoom.');'."\n";
 470         }
 471 ?>
 472 </script>
 473 </body>
 474
 475 </html>