forked from hans/Nominatim
new reverse HTML page incl leaflet map
This commit is contained in:
Marc Tobias Metten
89
lib/template/address-html.php
Normal file
89
lib/template/address-html.php
Normal 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>
|
||||
@@ -28,6 +28,9 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="<?php echo CONST_Website_BaseURL; ?>reverse.php?format=html">reverse search</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -100,7 +103,6 @@
|
||||
];
|
||||
echo 'var nominatim_map_init = ' . json_encode($aNominatimMapInit, JSON_PRETTY_PRINT) . ';';
|
||||
|
||||
$aNominatimResults = [];
|
||||
echo 'var nominatim_results = ' . json_encode($aSearchResults, JSON_PRETTY_PRINT) . ';';
|
||||
?>
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
/* http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css */
|
||||
|
||||
/* required styles */
|
||||
|
||||
.leaflet-map-pane,
|
||||
@@ -23,6 +21,7 @@
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
|
||||
8
website/js/leaflet.min.js
vendored
8
website/js/leaflet.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -3,23 +3,40 @@ var last_click_latlng;
|
||||
|
||||
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();
|
||||
|
||||
map = new L.map('map', {
|
||||
center: [nominatim_map_init.lat, nominatim_map_init.lon],
|
||||
zoom: nominatim_map_init.zoom,
|
||||
// center: [nominatim_map_init.lat || 0, nominatim_map_init.lon],
|
||||
// zoom: nominatim_map_init.zoom,
|
||||
attributionControl: false,
|
||||
scrollWheelZoom: false,
|
||||
touchZoom: false,
|
||||
});
|
||||
|
||||
|
||||
|
||||
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
|
||||
// attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).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){
|
||||
@@ -81,7 +98,7 @@ jQuery(document).on('ready', function(){
|
||||
return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name });
|
||||
}
|
||||
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);
|
||||
@@ -116,7 +133,16 @@ jQuery(document).on('ready', function(){
|
||||
}
|
||||
}
|
||||
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({
|
||||
@@ -139,6 +165,14 @@ jQuery(document).on('ready', function(){
|
||||
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);
|
||||
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
// Format for output
|
||||
$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'];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user