responsive details-error page. Shared header and footer

2026-02-16 15:47:58 +00:00 · 2016-01-19 12:29:07 +01:00
parent 97c572b92f
commit f2a2c29815
12 changed files with 279 additions and 306 deletions
--- a/lib/template/details-error-html.php
+++ b/lib/template/details-error-html.php
@@ -1,180 +1,133 @@
 <?php
 	header("content-type: text/html; charset=UTF-8");
 ?>
-<!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>
-    <title>OpenStreetMap Nominatim: <?php echo $aPointDetails['localname'];?></title>
-    <style>
-body {
-	margin:0px;
-	padding:16px;
-  background:#ffffff;
-  height: 100%;
-  font: normal 12px/15px arial,sans-serif;
-}
-.line{
-  margin-left:20px;
-}
-.name{
-  font-weight: bold;
-}
-.notused{
-  color:#ddd;
-}
-.noname{
-  color:#800;
-}
-#map {
-  width:500px;
-  height:500px;
-  border: 2px solid #666;
-  float: right;
-}
-    </style>
-	<script src="js/OpenLayers.js"></script>
-	<script src="js/tiles.js"></script>
-	<script type="text/javascript">
-        
-		var map;
-
-    function init() {
-			map = new OpenLayers.Map ("map", {
-                controls:[
-										new OpenLayers.Control.Permalink(),
-										new OpenLayers.Control.Navigation(),
-										new OpenLayers.Control.PanZoomBar(),
-										new OpenLayers.Control.MouseDefaults(),
-										new OpenLayers.Control.MousePosition(),
-										new OpenLayers.Control.Attribution()],
-                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
-                maxResolution: 156543.0399,
-                numZoomLevels: 19,
-                units: 'm',
-                projection: new OpenLayers.Projection("EPSG:900913"),
-                displayProjection: new OpenLayers.Projection("EPSG:4326")
-            	} );
-			map.addLayer(new OpenLayers.Layer.OSM.<?php echo CONST_Tile_Default;?>("Default"));
-
-                        var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
-                        layer_style.fillOpacity = 0.2;
-                        layer_style.graphicOpacity = 0.2;
-
-			vectorLayer = new OpenLayers.Layer.Vector("Points", {style: layer_style});
-			map.addLayer(vectorLayer);
-
-            var proj_EPSG4326 = new OpenLayers.Projection("EPSG:4326");
-			var proj_map = map.getProjectionObject();
-
-            freader = new OpenLayers.Format.WKT({
-                'internalProjection': proj_map,
-                'externalProjection': proj_EPSG4326
-            });
-
-            var bounds;
-            <?php if ($aPointDetails['prevgeom']) { ?>
-            var feature = freader.read('<?php echo $aPointDetails['prevgeom'];?>');
-            if (feature) {
-                bounds = feature.geometry.getBounds();
-
-            }
-            feature.style = {
-				strokeColor: "#777777",
-				fillColor: "#F0F0F0",
-				strokeWidth: 2,
-				strokeOpacity: 0.75,
-				fillOpacity: 0.75,
-                strokeDashstyle: "longdash"
-			};
-            vectorLayer.addFeatures([feature]);
-            <?php } ?>
-
-            <?php if ($aPointDetails['newgeom']) { ?>
-            feature = freader.read('<?php echo $aPointDetails['newgeom'];?>');
-            if (feature) {
-                if (!bounds) {
-                    bounds = feature.geometry.getBounds();
-                } 
-                else 
-                {
-                    bounds.extend(feature.geometry.getBounds());
-                }
-            }
-            feature.style = {
-				strokeColor: "#75ADFF",
-				fillColor: "#FFF7F0",
-				strokeWidth: 2,
-				strokeOpacity: 0.75,
-				fillOpacity: 0.75
-			};
-            vectorLayer.addFeatures([feature]);
-            <?php } ?>
-
-            <?php if (isset($aPointDetails['error_x'])) { ?>
-            var pt = new OpenLayers.Geometry.Point(<?php echo $aPointDetails['error_x'].','.$aPointDetails['error_y'];?>);
-            pt = pt.transform(proj_EPSG4326, proj_map);
-            feature = new OpenLayers.Feature.Vector(pt, null,
-                       {
-                            graphicName : "x",
-                            fillColor: "#FF0000",
-                            graphic : true,
-                            pointRadius: 6
-                       });
-            vectorLayer.addFeatures([feature]);
-            <?php } ?>
+<?php include(CONST_BasePath.'/lib/template/includes/html-header.php'); ?>
+	<link href="css/common.css" rel="stylesheet" type="text/css" />
+	<link href="css/details.css" rel="stylesheet" type="text/css" />
+</head>


-            map.zoomToExtent(bounds);
-
-		}
-		
-	</script>
-  </head>
-  <body onload="init();">
-    <div id="map"></div>
-	<h1><?php echo $aPointDetails['localname'] ?></h1>
-	<div class="locationdetails">
-	<div>Type: <span class="type"><?php echo $aPointDetails['class'].':'.$aPointDetails['type'];?></span></div>
- 
 <?php
-    $sOSMType = ($aPointDetails['osm_type'] == 'N'?'node':($aPointDetails['osm_type'] == 'W'?'way':   ($aPointDetails['osm_type'] == 'R'?'relation':'')));
-    if ($sOSMType) echo ' <div>OSM: <span class="osm"><span class="label"></span>'.$sOSMType.' <a     href="http://www.openstreetmap.org/browse/'.$sOSMType.'/'.$aPointDetails['osm_id'].'">'.              $aPointDetails['osm_id'].'</a></span></div>';
+
+	function osm_link($aFeature)
+	{
+		$sOSMType = ($aFeature['osm_type'] == 'N'?'node':($aFeature['osm_type'] == 'W'?'way':($aFeature['osm_type'] == 'R'?'relation':'')));
+		if ($sOSMType) {
+			return '<a href="http://www.openstreetmap.org/browse/'.$sOSMType.'/'.$aFeature['osm_id'].'">'.$sOSMType.' '.$aFeature['osm_id'].'</a>';
+		}
+		return '';
+	}
+
+	function osm_map_url($aFeature)
+	{
+		$sLon = $aFeature['error_x'];
+		$sLat = $aFeature['error_y'];
+
+		if (isset($sLat))
+		{
+			$sOSMType = ($aFeature['osm_type'] == 'N'?'node':($aFeature['osm_type'] == 'W'?'way':($aFeature['osm_type'] == 'R'?'relation':'')));
+			if ($sOSMType)
+			{
+				return "http://www.openstreetmap.org/?lat=".$sLat."&lon=".$sLon."&zoom=18&layers=M&".$sOSMType."=".$aFeature['osm_id'];
+			}
+		}
+		return '';
+	}
+
+	function josm_edit_url($aFeature)
+	{
+		$fWidth = 0.0002;
+		$sLon = $aFeature['error_x'];
+		$sLat = $aFeature['error_y'];
+
+		if (isset($sLat))
+		{
+			return "http://localhost:8111/load_and_zoom?left=".($sLon-$fWidth)."&right=".($sLon+$fWidth)."&top=".($sLat+$fWidth)."&bottom=".($sLat-$fWidth);
+		}
+
+		$sOSMType = ($aFeature['osm_type'] == 'N'?'node':($aFeature['osm_type'] == 'W'?'way':($aFeature['osm_type'] == 'R'?'relation':'')));
+		if ($sOSMType)
+		{
+			return 'http://localhost:8111/import?url=http://www.openstreetmap.org/api/0.6/'.$sOSMType.'/'.$aFeature['osm_id'].'/full';
+			// Should be better to load by object id - but this doesn't seem to zoom correctly
+			// return " <a href=\"http://localhost:8111/load_object?new_layer=true&objects=".strtolower($aFeature['osm_type']).$sOSMID."\" target=\"josm\">Remote Control (JOSM / Merkaartor)</a>";
+		}
+		return '';
+	}
+
+	function potlach_edit_url($aFeature)
+	{
+		$fWidth = 0.0002;
+		$sLat = $aFeature['error_y'];
+		$sLon = $aFeature['error_x'];
+
+		if (isset($sLat))
+		{
+			return "http://www.openstreetmap.org/edit?editor=potlatch2&bbox=".($sLon-$fWidth).",".($sLat-$fWidth).",".($sLon+$fWidth).",".($sLat+$fWidth);
+		}
+		return '';
+	}
+
+
+
 ?>

-    <p>This object has an invalid geometry.</p>
-    <p><b>Details:</b> <?php
+<body id="details-page">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-6">

-$sVal = $aPointDetails['errormessage']?$aPointDetails['errormessage']:'&nbsp;';
-$sOSMType = ($aPointDetails['osm_type'] == 'N'?'node':($aPointDetails['osm_type'] == 'W'?'way':($aPointDetails['osm_type'] == 'R'?'relation':'')));
-$sOSMID = $aPointDetails['osm_id'];

-if (isset($aPointDetails['error_x']))
-{
-	$sLat = $aPointDetails['error_y'];
-	$sLon = $aPointDetails['error_x'];
-	echo "<a href=\"http://www.openstreetmap.org/?lat=".$sLat."&lon=".$sLon."&zoom=18&layers=M&".$sOSMType."=".$sOSMID."\">".$sVal."</a>";
-}
-else
-{
-	echo $sVal;
-}
-?>
-    <p><b>Edit:</b> in <?php
-if (isset($aPointDetails['error_x']))
-{
-	$fWidth = 0.0002;
-	echo " <a href=\"http://localhost:8111/load_and_zoom?left=".($sLon-$fWidth)."&right=".($sLon+$fWidth)."&top=".($sLat+$fWidth)."&bottom=".($sLat-$fWidth)."\" target=\"josm\">Remote Control (JOSM / Merkaartor)</a>";
-	echo " | <a href=\"http://www.openstreetmap.org/edit?editor=potlatch2&bbox=".($sLon-$fWidth).",".($sLat-$fWidth).",".($sLon+$fWidth).",".($sLat+$fWidth)."\" target=\"potlatch2\">Potlatch 2</a>";
-}
-else
-{
-	echo " <a href=\"http://localhost:8111/import?url=http://www.openstreetmap.org/api/0.6/".$sOSMType.'/'.$sOSMID."/full\" target=\"josm\">Remote Control (JOSM / Merkaartor)</a>";
-	// Should be better to load by object id - but this doesn't seem to zoom correctly
-	//echo " <a href=\"http://localhost:8111/load_object?new_layer=true&objects=".strtolower($aPointDetails['osm_type']).$sOSMID."\" target=\"josm\">Remote Control (JOSM / Merkaartor)</a>";
-}
+				<h1><?php echo $aPointDetails['localname'] ?></h1>
+				<div class="locationdetails">
+					<h2 class="bg-danger">This object has an invalid geometry.</h2>

-?></p>
+					<div>
+						Type: <span class="type"><?php echo $aPointDetails['class'].':'.$aPointDetails['type'];?></span>
+					</div>

-  </body>
-</html>
+					<div>
+						OSM: <span class="label"><?php echo osm_link($aPointDetails); ?><span>
+					</div>

+
+					<h4>Error</h4>
+					<p>
+						<?php echo $aPointDetails['errormessage']?$aPointDetails['errormessage']:'unknown'; ?>
+					</p>
+					<?php if (osm_map_url($aPointDetails)) { ?>
+						<a href="<?php echo osm_map_url($aPointDetails); ?>">view on osm.org</a>
+					<?php } ?>
+
+					<h4>Edit</h4>
+					<ul>
+					<?php if (josm_edit_url($aPointDetails)) { ?>
+							<li><a href="<?php echo josm_edit_url($aPointDetails); ?>" target="josm">Remote Control (JOSM / Merkaartor)</a></li>
+					<?php } ?>
+					<?php if (potlach_edit_url($aPointDetails)) { ?>
+							<li><a href="<?php echo potlach_edit_url($aPointDetails); ?>" target="potlatch2">Potlatch 2</a></li>
+					<?php } ?>
+					</ul>
+			</div>
+		</div>
+		<div class="col-md-6">
+			<div id="map"></div>
+		</div>
+
+	</div>
+
+
+	<script type="text/javascript">
+
+		var nominatim_result = {
+			outlinestring: '<?php echo $aPointDetails['outlinestring'];?>',
+			lon: <?php echo isset($aPointDetails['error_x']) ? $aPointDetails['error_x'] : 0; ?>,
+			lat: <?php echo isset($aPointDetails['error_y']) ? $aPointDetails['error_y'] : 0; ?>
+		};
+
+	</script>
+
+
+	<?php include(CONST_BasePath.'/lib/template/includes/html-footer.php'); ?>
+	</body>
+</html>
--- a/lib/template/details-html.php
+++ b/lib/template/details-html.php
@@ -2,9 +2,11 @@
 	header("content-type: text/html; charset=UTF-8");
 ?>
 <?php include(CONST_BasePath.'/lib/template/includes/html-header.php'); ?>
+	<link href="css/common.css" rel="stylesheet" type="text/css" />
 	<link href="css/details.css" rel="stylesheet" type="text/css" />
 </head>

+<?php include(CONST_BasePath.'/lib/template/includes/html-top-navigation.php'); ?>


 <?php
@@ -17,7 +19,8 @@
 	function osm_link($aFeature)
 	{
 		$sOSMType = ($aFeature['osm_type'] == 'N'?'node':($aFeature['osm_type'] == 'W'?'way':($aFeature['osm_type'] == 'R'?'relation':'')));
-		if ($sOSMType) {
+		if ($sOSMType)
+		{
 			return '<a href="http://www.openstreetmap.org/browse/'.$sOSMType.'/'.$aFeature['osm_id'].'">'.$sOSMType.' '.$aFeature['osm_id'].'</a>';
 		}
 		return '';
@@ -28,7 +31,7 @@
 		if ($aFeature['wikipedia'])
 		{
 			list($sWikipediaLanguage,$sWikipediaArticle) = explode(':',$aFeature['wikipedia']);
-			return '<a href="http://'.$sWikipediaLanguage.'.wikipedia.org/wiki/'.urlencode($sWikipediaArticle).'">'.$aFeature['wikipedia'].'</a>';
+			return '<a href="https://'.$sWikipediaLanguage.'.wikipedia.org/wiki/'.urlencode($sWikipediaArticle).'" target="_blank">'.$aFeature['wikipedia'].'</a>';
 		}
 		return '';
 	}
@@ -40,7 +43,19 @@

 	function format_distance($fDistance)
 	{
-		return'<abbr class="distance" title="'.$fDistance.'">~'.(round($fDistance,1)).' km</abbr>';
+		// $fDistance is in meters
+		if ($fDistance < 1)
+		{
+			return '0';
+		}
+		elseif ($fDistance < 1000)
+		{
+			return'<abbr class="distance" title="'.$fDistance.'">~'.(round($fDistance,0)).' m</abbr>';
+		}
+		else
+		{
+			return'<abbr class="distance" title="'.$fDistance.'">~'.(round($fDistance/1000,1)).' km</abbr>';
+		}
 	}

 	function kv($sKey,$sValue)
@@ -245,13 +260,6 @@
 		</div>
 	</div>

-	<footer>
-		<p class="copyright">
-			&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors
-		</p>
-	</footer>
-
-
 	<script type="text/javascript">

 		var nominatim_result = {
@@ -265,5 +273,5 @@


 	<?php include(CONST_BasePath.'/lib/template/includes/html-footer.php'); ?>
-  </body>
+</body>
 </html>
--- a/lib/template/includes/html-footer.php
+++ b/lib/template/includes/html-footer.php
@@ -1,6 +1,14 @@
-	<script src="js/jquery.min.js"></script>
-	<script src="js/bootstrap.min.js"></script>
-	<script src="js/leaflet.min.js"></script>
-	<script src="js/leaflet-omnivore.min.js"></script>
-	<script src="js/nominatim-ui.js"></script>
-	
+<footer>
+  <p class="disclaimer">
+    Addresses and postcodes are approximate
+  </p>
+  <p class="copyright">
+    &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors
+  </p>
+</footer>
+
+<script src="js/jquery.min.js"></script>
+<script src="js/bootstrap.min.js"></script>
+<script src="js/leaflet.min.js"></script>
+<script src="js/leaflet-omnivore.min.js"></script>
+<script src="js/nominatim-ui.js"></script>
--- a/lib/template/includes/html-top-navigation.php
+++ b/lib/template/includes/html-top-navigation.php
@@ -0,0 +1,49 @@
+  <header class="container-fluid">
+    <div class="row">
+      <div class="col-xs-4">
+        <div class="brand">
+          <a href="<?php echo CONST_Website_BaseURL;?>">
+          <img alt="logo" src="images/osm_logo.120px.png" width="40" height="40"/>
+          <h1>Nominatim</h1>
+          </a>
+        </div>
+      </div>
+      <div id="last-updated" class="col-xs-4 text-center">
+        <?php if ($sDataDate){ ?>
+          Data last updated:
+          <br>
+          <?php echo $sDataDate; ?>
+        <?php } ?>
+      </div>
+      <div class="col-xs-4 text-right">
+        <div class="btn-group">
+          <button class="dropdown-toggle btn btn-default" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            About &amp; Help <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right">
+            <li><a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a></li>
+            <li><a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ" target="_blank">FAQ</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#" class="" data-toggle="modal" data-target="#report-modal">Report problem with results</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="modal fade" id="report-modal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">Report a problem</h4>
+        </div>
+        <div class="modal-body">
+          <?php include(CONST_BasePath.'/lib/template/includes/report-errors.php'); ?>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
--- a/lib/template/search-html.php
+++ b/lib/template/search-html.php
@@ -2,42 +2,13 @@
 	header("content-type: text/html; charset=UTF-8");
 ?>
 <?php include(CONST_BasePath.'/lib/template/includes/html-header.php'); ?>
+	<link href="css/common.css" rel="stylesheet" type="text/css" />
 	<link href="css/search.css" rel="stylesheet" type="text/css" />
 </head>

 <body id="search-page">

-
-	<header class="container-fluid">
-		<div class="row">
-			<div class="col-xs-4">
-				<div class="brand">
-					<a href="<?php echo CONST_Website_BaseURL;?>">
-					<img alt="logo" src="images/osm_logo.120px.png" width="40" height="40"/>
-					<h1>Nominatim</h1>
-					</a>
-				</div>
-			</div>
-			<div id="last-updated" class="col-xs-4 text-center">
-				Data last updated:
-				<br>
-				<?php echo $sDataDate; ?>
-			</div>
-			<div class="col-xs-4 text-right">
-				<div class="btn-group">
-					<button class="dropdown-toggle btn btn-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-						About &amp; Help <span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu dropdown-menu-right">
-						<li><a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a></li>
-						<li><a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ" target="_blank">FAQ</a></li>
-						<li role="separator" class="divider"></li>
-						<li><a href="#" class="" data-toggle="modal" data-target="#report-modal">Report problem with results</a></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</header>
+	<?php include(CONST_BasePath.'/lib/template/includes/html-top-navigation.php'); ?>

 	<form class="form-inline" role="search" accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php">
 		<div class="form-group">
@@ -113,31 +84,8 @@

 	</div> <!-- /content -->

-	<footer>
-		<p class="disclaimer">
-			Addresses and postcodes are approximate
-		</p>
-		<p class="copyright">
-			&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors
-		</p>
-	</footer>

-	<div class="modal fade" id="report-modal">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-					<h4 class="modal-title">Report a problem</h4>
-				</div>
-				<div class="modal-body">
-					<?php include(CONST_BasePath.'/lib/template/includes/report-errors.php'); ?>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
-				</div>
-			</div>
-		</div>
-	</div>
+