user interface: reverse search remembers zoom level after map click

[nominatim.git] / website / js / nominatim-ui.js

diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js
index bb4fa37786fbb85fe33911e4cc6e9671c96ffac0..8c82c344b2e7296c2dda6e56d59d4b5e56aecd17 100644 (file)
--- a/website/js/nominatim-ui.js
+++ b/website/js/nominatim-ui.js
@@ -3,23 +3,39 @@ 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();
 
        map = new L.map('map', {
        $('#q').focus();
 
        map = new L.map('map', {

-                               center: [nominatim_map_init.lat, nominatim_map_init.lon],
-                               zoom:   nominatim_map_init.zoom,
-                               attributionControl: false,
-                               scrollWheelZoom:    false,
-                               touchZoom:          false,
+                               attributionControl: false, // moved to page footer
+                               scrollWheelZoom:    !L.Browser.touch,
+                               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
                // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
 
                // moved to footer
                // attribution: '&copy; <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.prevmapzoom || 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){


@@ -34,7 +50,9 @@ 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_viewbox,html_click,html_mouse].join('<br/>'));
+               html_zoom = "zoom: " + map.getZoom();
+
+               $('#map-position').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('<br/>'));

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


@@ -81,7 +99,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.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);
        }
 
        var layerGroup = new L.layerGroup().addTo(map);


@@ -116,7 +134,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], maxZoom: map.getZoom()});
+
+                               // 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 +166,15 @@ 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);
+                       if ( map.getZoom() > 2 ){ $('form input[name=prevmapzoom]').val( map.getZoom() ); }
+                       $('form').submit();
+               });
+       }
+

        highlight_result(0, false);
 
 
        highlight_result(0, false);
 
 


@@ -165,14 +201,18 @@ jQuery(document).on('ready', function(){
 
                var layerGroup = new L.layerGroup().addTo(map);
 
 
                var layerGroup = new L.layerGroup().addTo(map);
 

-
-               var outline = omnivore.wkt.parse(nominatim_result.outlinestring);
-               map.addLayer(outline);
-

                var circle = L.circleMarker([nominatim_result.lat,nominatim_result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
                map.addLayer(circle);
 
                var circle = L.circleMarker([nominatim_result.lat,nominatim_result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
                map.addLayer(circle);
 

-               map.fitBounds(outline.getBounds());
+               if ( nominatim_result.outlinestring ){
+                       var outline = omnivore.wkt.parse(nominatim_result.outlinestring);
+                       map.addLayer(outline);
+                       map.fitBounds(outline.getBounds());
+               } else {
+                       map.setView([nominatim_result.lat,nominatim_result.lon],10);
+               }
+
+

 
 });
 
 
 });