hans/Nominatim
1
0
Fork 1
mirror of https://github.com/osm-search/Nominatim.git synced 2026-02-26 11:08:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up html for search form

Browse Source 
- move CSS to its own file
- make it pass as valid XHTML
- move attribution into Mapnik layer definition
- remove Osmarender layer
This commit is contained in:
Sarah Hoffmann
2012-11-16 22:22:04 +01:00
parent 9eb5b62382
commit 0c9630b24a
3 changed files with 194 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
lib/template/search-html.php
View File

@@ -1,184 +1,18 @@
<?php <?php
header("content-type: text/html; charset=UTF-8"); header("content-type: text/html; charset=UTF-8");
?> ?>
<html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>OpenStreetMap Nominatim: Search</title> <title>OpenStreetMap Nominatim: Search</title>
<base href="<?php echo CONST_Website_BaseURL;?>" /> <base href="<?php echo CONST_Website_BaseURL;?>" />
<link href="nominatim.xml" rel="search" title="Nominatim Search" type="application/opensearchdescription+xml" /> <link href="nominatim.xml" rel="search" title="Nominatim Search" type="application/opensearchdescription+xml" />
<link href="css/search.css" rel="stylesheet" type="text/css" />
<script src="js/OpenLayers.js"></script> <script src="js/OpenLayers.js" type="text/javascript"></script>
<script src="js/tiles.js"></script> <script src="js/tiles.js" type="text/javascript"></script>
<script src="js/prototype-1.6.0.3.js"></script> <script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>
<style>
* {-moz-box-sizing: border-box;}
body {
margin:0px;
padding:0px;
overflow: hidden;
background:#ffffff;
height: 100%;
font: normal 12px/15px arial,sans-serif;
}
#seachheader {
position:absolute;
z-index:5;
top:0px;
left:0px;
width:100%;
height:38px;
background:#F0F7FF;
border-bottom: 2px solid #75ADFF;
}
#q {
width:300px;
}
#seachheaderfade1, #seachheaderfade2, #seachheaderfade3, #seachheaderfade4{
position:absolute;
z-index:4;
top:0px;
left:0px;
width:100%;
opacity: 0.15;
filter: alpha(opacity = 15);
background:#000000;
border: 1px solid #000000;
}
#seachheaderfade1{
height:39px;
}
#seachheaderfade2{
height:40px;
}
#seachheaderfade3{
height:41px;
}
#seachheaderfade4{
height:42px;
}
#searchresultsfade1, #searchresultsfade2, #searchresultsfade3, #searchresultsfade4 {
position:absolute;
z-index:2;
top:0px;
left:200px;
height: 100%;
opacity: 0.2;
filter: alpha(opacity = 20);
background:#ffffff;
border: 1px solid #ffffff;
}
#searchresultsfade1{
width:1px;
}
#searchresultsfade2{
width:2px;
}
#searchresultsfade3{
width:3px;
}
#searchresultsfade4{
width:4px;
}
#searchresults{
position:absolute;
z-index:3;
top:41px;
width:200px;
height: 100%;
background:#ffffff;
border: 1px solid #ffffff;
overflow: auto;
}
#map{
position:absolute;
z-index:1;
top:38px;
left:200px;
width:100%;
height:100%;
background:#eee;
}
#report{
position:absolute;
z-index:2;
top:38px;
left:200px;
width:100%;
height:100%;
background:#eee;
font: normal 12px/15px arial,sans-serif;
padding:20px;
}
#report table {
margin-left:20px;
}
#report th {
vertical-align:top;
text-align:left;
}
#report td.button {
text-align:right;
}
.result {
margin:5px;
margin-bottom:0px;
padding:2px;
padding-left:4px;
padding-right:4px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F0F7FF;
border: 2px solid #D7E7FF;
font: normal 12px/15px arial,sans-serif;
cursor:pointer;
}
.result img{
float:right;
}
.result .latlon{
display: none;
}
.result .place_id{
display: none;
}
.result .type{
color: #999;
text-align:center;
font: normal 9px/10px arial,sans-serif;
padding-top:4px;
}
.result .details, .result .details a{
color: #999;
text-align:center;
font: normal 9px/10px arial,sans-serif;
padding-top:4px;
}
.noresults{
color: #000;
text-align:center;
font: normal 12px arial,sans-serif;
padding-top:4px;
}
.more{
color: #ccc;
text-align:center;
padding-top:4px;
}
.disclaimer{
color: #ccc;
text-align:center;
font: normal 9px/10px arial,sans-serif;
padding-top:4px;
}
form{
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
@@ -188,18 +22,19 @@ form{
{ {
if ($('searchresults')) if ($('searchresults'))
{ {
$('map').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200; var viewwidth = ((document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200) + 'px';
$('report').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 200; $('map').style.width = viewwidth;
$('report').style.width = viewwidth;
} }
else else
{ {
$('map').style.width = (document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 0; $('map').style.width = ((document.documentElement.clientWidth > 0?document.documentElement.clientWidth:document.documentElement.offsetWidth) - 0) + 'px';
$('map').style.left = 0; $('map').style.left = '0px';
} }
if ($('map')) $('map').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38; if ($('map')) $('map').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
if ($('searchresults')) $('searchresults').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38; if ($('searchresults')) $('searchresults').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
if ($('report')) $('report').style.height = (document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38; if ($('report')) $('report').style.height = ((document.documentElement.clientHeight > 0?document.documentElement.clientHeight:document.documentElement.offsetHeight) - 38) + 'px';
} }
window.onresize = handleResize; window.onresize = handleResize;
@@ -289,8 +124,7 @@ form{
"moveend": mapEventMove "moveend": mapEventMove
} }
} ); } );
map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default", map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default"));
{ 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>'}));
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2; layer_style.fillOpacity = 0.2;
@@ -315,19 +149,19 @@ form{
<div id="seachheader"> <div id="seachheader">
<form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get"> <form accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php" method="get">
<table border="0" width="100%"> <table border="0" width="100%" summary="header">
<tr> <tr>
<td valign="center" style="width:30px;"><img src="images/logo.gif"></td> <td valign="middle" style="width:30px;"><img alt="logo" src="images/logo.gif" /></td>
<td valign="center" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery); <td valign="middle" style="width:400px;"><input id="q" name="q" value="<?php echo htmlspecialchars($sQuery);
?>" style="width:270px;"><input type="text" id="viewbox" style="width:130px;" name="viewbox"></td> ?>" style="width:270px;" /><input type="text" id="viewbox" style="width:128px;" name="viewbox" /></td>
<td style="width:80px;"><input type="submit" value="Search"></td> <td style="width:80px;"><input type="submit" value="Search"/></td>
<?php if (CONST_Search_AreaPolygons) { ?> <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked"; ?>> Highlight</td> <?php if (CONST_Search_AreaPolygons) { ?> <td style="width:100px;"><input type="checkbox" value="1" name="polygon" <?php if ($bAsText) echo "checked='checked'"; ?>/> Highlight</td>
<td style="text-align:right;">Data: <?php echo $sDataDate; ?></td> <td style="text-align:right;">Data: <?php echo $sDataDate; ?></td>
<td style="text-align:right;"> <td style="text-align:right;">
<a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ" <a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a> | <a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ"
target="_blank">FAQ</a></td> target="_blank">FAQ</a></td>
<?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> <?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>
</tr> </tr>
</table> </table>
</form> </form>
@@ -365,7 +199,7 @@ target="_blank">FAQ</a></td>
echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">'; echo '<div class="result" onClick="panToLatLon('.$aResult['lat'].', '.$aResult['lon'].');">';
} }
echo (isset($aResult['icon'])?'<img src="'.$aResult['icon'].'">':''); echo (isset($aResult['icon'])?'<img alt="icon" src="'.$aResult['icon'].'"/>':'');
echo ' <span class="name">'.$aResult['name'].'</span>'; echo ' <span class="name">'.$aResult['name'].'</span>';
echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>'; echo ' <span class="latlon">'.round($aResult['lat'],3).','.round($aResult['lon'],3).'</span>';
echo ' <span class="place_id">'.$aResult['place_id'].'</span>'; echo ' <span class="place_id">'.$aResult['place_id'].'</span>';
@@ -380,7 +214,7 @@ target="_blank">FAQ</a></td>
{ {
if ($sMoreURL) if ($sMoreURL)
{ {
echo '<div class="more"><a href="'.$sMoreURL.'">Search for more results</a></div>'; echo '<div class="more"><a href="'.htmlentities($sMoreURL).'">Search for more results</a></div>';
} }
} }
else else
@@ -390,7 +224,7 @@ target="_blank">FAQ</a></td>
?> ?>
<div class="disclaimer">Addresses and postcodes are approximate <div class="disclaimer">Addresses and postcodes are approximate
<input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"> <input type="button" value="Report Problem" onclick="$('report').style.visibility=($('report').style.visibility=='hidden'?'visible':'hidden')"/>
</div> </div>
</div> </div>
<?php <?php
@@ -405,7 +239,7 @@ href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ">FAQ</a>. If your proble
to check how the address was generated before reporting a problem.</p> to check how the address was generated before reporting a problem.</p>
<p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems <p>Please use <a href="http://trac.openstreetmap.org/newticket?component=nominatim">trac.openstreetmap.org</a> to report problems
making sure to set making sure to set
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> 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>
<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 <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
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 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
require significant research!</p> require significant research!</p>

166
website/css/search.css Normal file
View File

@@ -0,0 +1,166 @@
* {-moz-box-sizing: border-box;}
body {
margin:0px;
padding:0px;
overflow: hidden;
background:#ffffff;
height: 100%;
font: normal 12px/15px arial,sans-serif;
}
#seachheader {
position:absolute;
z-index:5;
top:0px;
left:0px;
width:100%;
height:38px;
background:#F0F7FF;
border-bottom: 2px solid #75ADFF;
}
#q {
width:300px;
}
#seachheaderfade1, #seachheaderfade2, #seachheaderfade3, #seachheaderfade4{
position:absolute;
z-index:4;
top:0px;
left:0px;
width:100%;
opacity: 0.15;
filter: alpha(opacity = 15);
background:#000000;
border: 1px solid #000000;
}
#seachheaderfade1{
height:39px;
}
#seachheaderfade2{
height:40px;
}
#seachheaderfade3{
height:41px;
}
#seachheaderfade4{
height:42px;
}
#searchresultsfade1, #searchresultsfade2, #searchresultsfade3, #searchresultsfade4 {
position:absolute;
z-index:2;
top:0px;
left:200px;
height: 100%;
opacity: 0.2;
filter: alpha(opacity = 20);
background:#ffffff;
border: 1px solid #ffffff;
}
#searchresultsfade1{
width:1px;
}
#searchresultsfade2{
width:2px;
}
#searchresultsfade3{
width:3px;
}
#searchresultsfade4{
width:4px;
}
#searchresults{
position:absolute;
z-index:3;
top:41px;
width:200px;
height: 100%;
background:#ffffff;
border: 1px solid #ffffff;
overflow: auto;
}
#map{
position:absolute;
z-index:1;
top:38px;
left:200px;
width:100%;
height:100%;
background:#eee;
}
#report{
position:absolute;
z-index:2;
top:38px;
left:200px;
width:100%;
height:100%;
background:#eee;
font: normal 12px/15px arial,sans-serif;
padding:20px;
}
#report table {
margin-left:20px;
}
#report th {
vertical-align:top;
text-align:left;
}
#report td.button {
text-align:right;
}
.result {
margin:5px;
margin-bottom:0px;
padding:2px;
padding-left:4px;
padding-right:4px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F0F7FF;
border: 2px solid #D7E7FF;
font: normal 12px/15px arial,sans-serif;
cursor:pointer;
}
.result img{
float:right;
}
.result .latlon{
display: none;
}
.result .place_id{
display: none;
}
.result .type{
color: #999;
text-align:center;
font: normal 9px/10px arial,sans-serif;
padding-top:4px;
}
.result .details, .result .details a{
color: #999;
text-align:center;
font: normal 9px/10px arial,sans-serif;
padding-top:4px;
}
.noresults{
color: #000;
text-align:center;
font: normal 12px arial,sans-serif;
padding-top:4px;
}
.more{
color: #ccc;
text-align:center;
padding-top:4px;
}
.disclaimer{
color: #ccc;
text-align:center;
font: normal 9px/10px arial,sans-serif;
padding-top:4px;
}
form{
margin:0px;
padding:0px;
}

31
website/js/tiles.js
View File

@@ -48,7 +48,8 @@ OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {
"http://b.tile.openstreetmap.org/${z}/${x}/${y}.png", "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
"http://c.tile.openstreetmap.org/${z}/${x}/${y}.png" "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
]; ];
options = OpenLayers.Util.extend({ numZoomLevels: 19, buffer: 0 }, options); options = OpenLayers.Util.extend({ numZoomLevels: 19, buffer: 0,
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>' }, options);
var newArguments = [name, url, options]; var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments); OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
}, },
@@ -85,34 +86,6 @@ OpenLayers.Layer.OSM.MapQuestOpen = OpenLayers.Class(OpenLayers.Layer.OSM, {
CLASS_NAME: "OpenLayers.Layer.OSM.MapQuestOpen" CLASS_NAME: "OpenLayers.Layer.OSM.MapQuestOpen"
}); });
/**
* Class: OpenLayers.Layer.OSM.Osmarender
*
* Inherits from:
* - <OpenLayers.Layer.OSM>
*/
OpenLayers.Layer.OSM.Osmarender = OpenLayers.Class(OpenLayers.Layer.OSM, {
/**
* Constructor: OpenLayers.Layer.OSM.Osmarender
*
* Parameters:
* name - {String}
* options - {Object} Hashtable of extra options to tag onto the layer
*/
initialize: function(name, options) {
var url = [
"http://a.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
"http://b.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
"http://c.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
];
options = OpenLayers.Util.extend({ numZoomLevels: 18, buffer: 0 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: "OpenLayers.Layer.OSM.Osmarender"
});
/** /**
* Class: OpenLayers.Layer.OSM.CycleMap * Class: OpenLayers.Layer.OSM.CycleMap
* *