diff --git a/lib/template/search-html.php b/lib/template/search-html.php
index dc4dcc74..d24eaaae 100644
--- a/lib/template/search-html.php
+++ b/lib/template/search-html.php
@@ -81,7 +81,10 @@
diff --git a/website/css/search.css b/website/css/search.css
index 55a6f9f5..2e3dd4be 100644
--- a/website/css/search.css
+++ b/website/css/search.css
@@ -51,8 +51,9 @@ form label {
}
#map-position {
+ display: none;
position: absolute;
- top: 0;
+ bottom: 0;
right: 20px;
padding: 0 5px;
color: #333;
@@ -61,6 +62,10 @@ form label {
z-index: 100;
}
+#map-position-close {
+ text-align: right;
+}
+
.result {
font-size: 0.8em;
margin: 5px;
diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js
index 31044d02..9622f821 100644
--- a/website/js/nominatim-ui.js
+++ b/website/js/nominatim-ui.js
@@ -29,6 +29,32 @@ jQuery(document).on('ready', function(){
cm.addTo(map);
}
+ var MapPositionControl = L.Control.extend({
+ options: {
+ position: 'bottomright'
+ },
+
+ onAdd: function (map) {
+ var container = L.DomUtil.create('div', 'my-custom-control');
+
+ $(container).text('show map bounds').addClass('leaflet-bar btn btn-sm btn-default').on('click', function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ $('#map-position').show();
+ $(container).hide();
+ });
+ $('#map-position-close a').on('click', function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ $('#map-position').hide();
+ $(container).show();
+ });
+
+ return container;
+ }
+ });
+
+ map.addControl(new MapPositionControl());
function display_map_position(mouse_lat_lng){
@@ -45,7 +71,7 @@ jQuery(document).on('ready', function(){
html_viewbox = "viewbox: " + map_viewbox_as_string();
- $('#map-position').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('
'));
+ $('#map-position-inner').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('
'));
$('input#use_viewbox').trigger('change');
}