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

new reverse HTML page incl leaflet map

Browse Source
This commit is contained in:
Marc Tobias Metten
2016-01-19 16:15:32 +01:00
parent f2a2c29815
commit 016815eda2
6 changed files with 615 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
lib/template/address-html.php Normal file
View File

@@ -0,0 +1,89 @@
<?php
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="reverse-page">
<?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; ?>reverse.php">
<div class="form-group">
<input name="format" type="hidden" value="html">
<input name="lat" type="text" class="form-control input-sm" placeholder="latitude" value="<?php echo htmlspecialchars($_GET['lat']); ?>" >
<input name="lon" type="text" class="form-control input-sm" placeholder="longitude" value="<?php echo htmlspecialchars($_GET['lon']); ?>" >
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sm">Search</button>
</div>
<div>
<a href="<?php echo CONST_Website_BaseURL; ?>search.php">forward search</a>
</div>
</form>
<div id="content">
<?php if ($aPlace) { ?>
<div id="searchresults" class="sidebar">
<?php
$aResult = $aPlace;
echo '<div class="result" data-position="0">';
echo (isset($aResult['icon'])?'<img alt="icon" src="'.$aResult['icon'].'"/>':'');
echo ' <span class="name">'.htmlspecialchars($aResult['langaddress']).'</span>';
if (isset($aResult['label']))
echo ' <span class="type">('.$aResult['label'].')</span>';
else if ($aResult['type'] == 'yes')
echo ' <span class="type">('.ucwords(str_replace('_',' ',$aResult['class'])).')</span>';
else
echo ' <span class="type">('.ucwords(str_replace('_',' ',$aResult['type'])).')</span>';
echo '<p>'.$aResult['lat'].','.$aResult['lon'].'</p>';
echo ' <a class="btn btn-default btn-xs details" href="details.php?place_id='.$aResult['place_id'].'">details</a>';
echo '</div>';
?>
</div>
<?php } else { ?>
<div id="intro" class="sidebar">
Search for coordinates or click anywhere on the map.
</div>
<?php } ?>
<div id="map-wrapper">
<div id="map-position"></div>
<div id="map"></div>
</div>
</div> <!-- /content -->
<script type="text/javascript">
<?php
$aNominatimMapInit = [
'zoom' => (isset($_GET['lat'])||$_GET['lat'])?16:NULL,
'lat' => isset($_GET['lat'])?htmlspecialchars($_GET['lat']):NULL,
'lon' => isset($_GET['lon'])?htmlspecialchars($_GET['lon']):NULL
];
echo 'var nominatim_map_init = ' . json_encode($aNominatimMapInit, JSON_PRETTY_PRINT) . ';';
echo 'var nominatim_results = ' . json_encode([$aPlace], JSON_PRETTY_PRINT) . ';';
?>
</script>
<?php include(CONST_BasePath.'/lib/template/includes/html-footer.php'); ?>
</body>
</html>

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

@@ -28,6 +28,9 @@
</label> </label>
</div> </div>
</div> </div>
<div>
<a href="<?php echo CONST_Website_BaseURL; ?>reverse.php?format=html">reverse search</a>
</div>
</form> </form>
@@ -100,7 +103,6 @@
]; ];
echo 'var nominatim_map_init = ' . json_encode($aNominatimMapInit, JSON_PRETTY_PRINT) . ';'; echo 'var nominatim_map_init = ' . json_encode($aNominatimMapInit, JSON_PRETTY_PRINT) . ';';
$aNominatimResults = [];
echo 'var nominatim_results = ' . json_encode($aSearchResults, JSON_PRETTY_PRINT) . ';'; echo 'var nominatim_results = ' . json_encode($aSearchResults, JSON_PRETTY_PRINT) . ';';
?> ?>
</script> </script>

3
website/css/leaflet.css
View File

@@ -1,5 +1,3 @@
/* http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css */
/* required styles */ /* required styles */
.leaflet-map-pane, .leaflet-map-pane,
@@ -23,6 +21,7 @@
.leaflet-container { .leaflet-container {
overflow: hidden; overflow: hidden;
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none;
} }
.leaflet-tile, .leaflet-tile,
.leaflet-marker-icon, .leaflet-marker-icon,

8
website/js/leaflet.min.js vendored
View File

File diff suppressed because one or more lines are too long

44
website/js/nominatim-ui.js
View File

@@ -3,23 +3,40 @@ var last_click_latlng;
jQuery(document).on('ready', function(){ jQuery(document).on('ready', function(){
if ( !$('#search-page').length ){ return; } if ( !$('#search-page,#reverse-page').length ){ return; }
var is_reverse_search = !!( $('#reverse-page').length );
$('#q').focus(); $('#q').focus();
map = new L.map('map', { map = new L.map('map', {
center: [nominatim_map_init.lat, nominatim_map_init.lon], // center: [nominatim_map_init.lat || 0, nominatim_map_init.lon],
zoom: nominatim_map_init.zoom, // zoom: nominatim_map_init.zoom,
attributionControl: false, attributionControl: false,
scrollWheelZoom: false, scrollWheelZoom: false,
touchZoom: false, touchZoom: false,
}); });
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
noWrap: true // otherwise we end up with click coordinates like latitude -728
// moved to footer // moved to footer
// attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); }).addTo(map);
if ( nominatim_map_init.lat ){
map.setView([nominatim_map_init.lat || 0, nominatim_map_init.lon], nominatim_map_init.zoom);
if ( is_reverse_search ){
// not really a market, but the .circle changes radius once you zoom in/out
var cm = L.circleMarker([nominatim_map_init.lat,nominatim_map_init.lon], { radius: 5, weight: 2, fillColor: '#ff7800', color: 'red', opacity: 0.75, clickable: false});
cm.addTo(map);
}
} else {
map.setView([0,0],2);
}
function display_map_position(mouse_lat_lng){ function display_map_position(mouse_lat_lng){
@@ -81,7 +98,7 @@ jQuery(document).on('ready', function(){
return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name }); return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name });
} }
function circle_for_result(result){ function circle_for_result(result){
return L.circleMarker([result.lat,result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75}); return L.circleMarker([result.lat,result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75, clickable: !is_reverse_search});
} }
var layerGroup = new L.layerGroup().addTo(map); var layerGroup = new L.layerGroup().addTo(map);
@@ -116,7 +133,16 @@ jQuery(document).on('ready', function(){
} }
} }
else { else {
map.panTo([result.lat,result.lon], result.zoom || nominatim_map_init.zoom); if ( is_reverse_search ){
// make sure the search coordinates are in the map view as well
map.fitBounds([[result.lat,result.lon], [nominatim_map_init.lat,nominatim_map_init.lon]], {padding: [50,50]});
// better, but causes a leaflet warning
// map.panInsideBounds([[result.lat,result.lon], [nominatim_map_init.lat,nominatim_map_init.lon]], {animate: false});
}
else {
map.panTo([result.lat,result.lon], result.zoom || nominatim_map_init.zoom);
}
} }
// var crosshairIcon = L.icon({ // var crosshairIcon = L.icon({
@@ -139,6 +165,14 @@ jQuery(document).on('ready', function(){
highlight_result($(this).data('position'), true); highlight_result($(this).data('position'), true);
}); });
if ( is_reverse_search ){
map.on('click', function(e){
$('form input[name=lat]').val( e.latlng.lat);
$('form input[name=lon]').val( e.latlng.lng);
$('form').submit();
});
}
highlight_result(0, false); highlight_result(0, false);

2
website/reverse.php
View File

@@ -23,7 +23,7 @@
// Format for output // Format for output
$sOutputFormat = 'xml'; $sOutputFormat = 'xml';
if (isset($_GET['format']) && ($_GET['format'] == 'xml' || $_GET['format'] == 'json' || $_GET['format'] == 'jsonv2')) if (isset($_GET['format']) && ( $_GET['format'] == 'html' || $_GET['format'] == 'xml' || $_GET['format'] == 'json' || $_GET['format'] == 'jsonv2'))
{ {
$sOutputFormat = $_GET['format']; $sOutputFormat = $_GET['format'];
} }