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="OpenLayers.js"></script>
  12         <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  13         <script src="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
 224                         var pointList = [];
 225                         var style = {
 226                                 strokeColor: "#75ADFF",
 227                                 fillColor: "#F0F7FF",
 228                                 strokeWidth: 2,
 229                                 strokeOpacity: 0.75,
 230                                 fillOpacity: 0.75
 231                         };
 232                         var proj_EPSG4326 = new OpenLayers.Projection("EPSG:4326");
 233                         var proj_map = map.getProjectionObject();
 234                         if (points)
 235                         {
 236                                 points.each(function(p){
 237                                         pointList.push(new OpenLayers.Geometry.Point(p[0],p[1]));
 238                                         });
 239                                 var linearRing = new OpenLayers.Geometry.LinearRing(pointList).transform(proj_EPSG4326, proj_map);;
 240                                 var polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing]),null,style);
 241                                 vectorLayer.destroyFeatures();
 242                                 vectorLayer.addFeatures([polygonFeature]);
 243                         }
 244                         else
 245                         {
 246                                 var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 247                                 var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
 248                                 var pointFeature = new OpenLayers.Feature.Vector(point,null,style);
 249                                 vectorLayer.destroyFeatures();
 250                                 vectorLayer.addFeatures([pointFeature]);
 251                         }
 252                 }
 253
 254                 function round(v,n)
 255                 {
 256                         n = Math.pow(10,n);
 257                         return Math.round(v*n)/n;
 258                 }
 259                 function floor(v,n)
 260                 {
 261                         n = Math.pow(10,n);
 262                         return Math.floor(v*n)/n;
 263                 }
 264                 function ceil(v,n)
 265                 {
 266                         n = Math.pow(10,n);
 267                         return Math.ceil(v*n)/n;
 268                 }
 269
 270                 function mapEventMove() {
 271                         var proj = new OpenLayers.Projection("EPSG:4326");
 272                         var bounds = map.getExtent();
 273                         bounds = bounds.transform(map.getProjectionObject(), proj);
 274                         $('viewbox').value = floor(bounds.left,2)+','+ceil(bounds.top,2)+','+ceil(bounds.right,2)+','+floor(bounds.bottom,2);
 275                 }
 276
 277     function init() {
 278                         handleResize();
 279                         map = new OpenLayers.Map ("map", {
 280                 controls:[
 281                                                                                 new OpenLayers.Control.Navigation(),
 282                                                                                 new OpenLayers.Control.PanZoomBar(),
 283                                                                                 new OpenLayers.Control.MouseDefaults(),
 284                                                                                 new OpenLayers.Control.MousePosition(),
 285                                                                                 new OpenLayers.Control.Attribution()],
 286                 maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
 287                 maxResolution: 156543.0399,
 288                 numZoomLevels: 19,
 289                 units: 'm',
 290                 projection: new OpenLayers.Projection("EPSG:900913"),
 291                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
 292                 eventListeners: {
 293                                                                         "moveend": mapEventMove,
 294                                                                 }
 295                 } );
 296                         map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
 297
 298                         var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 299                         layer_style.fillOpacity = 0.2;
 300                         layer_style.graphicOpacity = 1;
 301                         vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
 302                         map.addLayer(vectorLayer);
 303
 304 //                      var lonLat = new OpenLayers.LonLat(<?php echo $fLon ?>, <?php echo $fLat ?>).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 305 //                      map.setCenter (lonLat, <?php echo $iZoom ?>);
 306                 }
 307
 308                 function setfocus(field_id) {
 309                         $(field_id).focus()
 310                 }
 311
 312         </script>
 313 </head>
 314
 315 <body onload="setfocus('q');">
 316
 317         <div id="seachheaderfade1"></div><div id="seachheaderfade2"></div><div id="seachheaderfade3"></div><div id="seachheaderfade4"></div>
 318
 319         <div id="seachheader">
 320                 <form action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
 321                         <table border="0" width="100%">
 322                                 <tr>
 323                                         <td valign="center" style="width:30px;"><img src="images/logo.gif"></td>
 324                                         <td valign="center" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery);
 325 ?>" style="width:270px;"><input type="text" id="viewbox" style="width:130px;" name="viewbox"></td>
 326                                         <td style="width:80px;"><input type="submit" value="Search"></td>
 327 <?php if (CONST_Search_AreaPolygons) { ?>                                       <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bShowPolygons) echo "checked"; ?>> Highlight</td>
 328 <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
 329 <td style="text-align:right;">
 330 <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ"
 331 target="_blank">FAQ</a></td>
 332
 333 <?php } ?>                                      <td style="text-align:right;"><?php if ($sQuery) { if ($sReportDescription) {?><div style="text-align:center;"><b>Thank you for your problem report</b></div><?php } else { ?><input type="button" value="Report Problem With Results" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"><?php }} ?></td>
 334                                 </tr>
 335                         </table>
 336                 </form>
 337         </div>
 338
 339 <?php
 340         if ($sQuery || sizeof($aSearchResults))
 341         {
 342 ?>
 343         <div id="searchresultsfade1"></div><div id="searchresultsfade2"></div><div id="searchresultsfade3"></div><div id="searchresultsfade4"></div>
 344         <div id="searchresults">
 345 <?php
 346         if ($sSuggestionURL)
 347         {
 348                 echo '<div class="more"><b>Suggest: </b><a href="'.$sSuggestionURL.'"><b>'.$sSuggestion.'</b></a></div>';
 349         }
 350         foreach($aSearchResults as $iResNum => $aResult)
 351         {
 352                 if ($aResult['aBoundingBox'])
 353                 {
 354                         echo '<div class="result" onClick=\'panToLatLonBoundingBox('.$aResult['lat'].', '.$aResult['lon'];
 355                         echo ', '.$aResult['aBoundingBox'][0];
 356                         echo ', '.$aResult['aBoundingBox'][1];
 357                         echo ', '.$aResult['aBoundingBox'][2];
 358                         echo ', '.$aResult['aBoundingBox'][3];
 359                         echo ', '.javascript_renderData($aResult['aPolyPoints']);
 360                         echo ');\'>';
 361                 }
 362                 elseif (isset($aResult['zoom']))
 363                 {
 364                         echo '<div class="result" onClick="panToLatLonZoom('.$aResult['lat'].', '.$aResult['lon'].', '.$aResult['zoom'].');">';
 365                 }
 366                 else
 367                 {
 368                         echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
 369                 }
 370
 371                 echo ($aResult['icon']?'<img src="'.$aResult['icon'].'">':'');
 372                 echo ' <span class="name">'.$aResult['name'].'</span>';
 373                 echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lat'],3).'</span>';
 374                 echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
 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                         echo ', '.javascript_renderData($aResult['aPolyPoints']);
 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>