HTML map: new button -show map bounds-

diff --git a/lib/template/search-html.php b/lib/template/search-html.php
index dc4dcc748929f00cbb4110d57f2d42e87ce633d7..d24eaaae212ebd7c7d84ff1388c80691048799af 100644 (file)
--- a/lib/template/search-html.php
+++ b/lib/template/search-html.php
@@ -81,7 +81,10 @@
 <?php } ?>
 
                <div id="map-wrapper">
 <?php } ?>
 
                <div id="map-wrapper">

-                       <div id="map-position"></div>
+                       <div id="map-position">
+                               <div id="map-position-inner"></div>
+                               <div id="map-position-close"><a href="#">hide</a></div>
+                       </div>

                        <div id="map"></div>
                </div>
 
                        <div id="map"></div>
                </div>
 

diff --git a/website/css/search.css b/website/css/search.css
index 55a6f9f5cbf5b0402aa60ce5f03cd7ba6ce10761..2e3dd4bea7abfd5eca35f4826d29fd2c540ae084 100644 (file)
--- a/website/css/search.css
+++ b/website/css/search.css
@@ -51,8 +51,9 @@ form label {
 }
 
 #map-position {
 }
 
 #map-position {

+  display: none;

   position: absolute;
   position: absolute;

-  top: 0;
+  bottom: 0;

   right: 20px;
   padding: 0 5px;
   color: #333;
   right: 20px;
   padding: 0 5px;
   color: #333;


@@ -61,6 +62,10 @@ form label {
   z-index: 100;
 }
 
   z-index: 100;
 }
 

+#map-position-close {
+  text-align: right;
+}
+

 .result {
   font-size: 0.8em;
   margin: 5px;
 .result {
   font-size: 0.8em;
   margin: 5px;

diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js
index 31044d02ec524ede44751205f1ea5c10a5314919..9622f821c56720650d73c3d059986588d9c01d8b 100644 (file)
--- a/website/js/nominatim-ui.js
+++ b/website/js/nominatim-ui.js
@@ -29,6 +29,32 @@ jQuery(document).on('ready', function(){
                cm.addTo(map);
        }
 
                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){
 
 
        function display_map_position(mouse_lat_lng){


@@ -45,7 +71,7 @@ jQuery(document).on('ready', function(){
 
                html_viewbox = "viewbox: " + map_viewbox_as_string();
 
 
                html_viewbox = "viewbox: " + map_viewbox_as_string();
 

-               $('#map-position').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('<br/>'));
+               $('#map-position-inner').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('<br/>'));

                $('input#use_viewbox').trigger('change');
        }
 
                $('input#use_viewbox').trigger('change');
        }