X-Git-Url: https://git.openstreetmap.org./nominatim.git/blobdiff_plain/851af3db7f54d489df0e6b6e9d16b6ee7d4d98fc..bb403e2e589434e862c1b6d1206b7a61144011c6:/website/js/nominatim-ui.js diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js index bb4fa377..9622f821 100644 --- a/website/js/nominatim-ui.js +++ b/website/js/nominatim-ui.js @@ -3,23 +3,58 @@ 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, - attributionControl: false, - scrollWheelZoom: false, - touchZoom: false, + attributionControl: (nominatim_map_init.tile_attribution && nominatim_map_init.tile_attribution.length), + scrollWheelZoom: !L.Browser.touch, + touchZoom: false }); - L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + L.tileLayer(nominatim_map_init.tile_url, { + noWrap: true, // otherwise we end up with click coordinates like latitude -728 // moved to footer - // attribution: '© OpenStreetMap contributors' + attribution: (nominatim_map_init.tile_attribution || null ) //'© OpenStreetMap contributors' }).addTo(map); + map.setView([nominatim_map_init.lat, nominatim_map_init.lon], nominatim_map_init.zoom); + + if ( is_reverse_search ){ + // We don't need a marker, but an L.circle instance 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); + } + + 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){ @@ -32,9 +67,11 @@ jQuery(document).on('ready', function(){ map.getCenter().lat.toFixed(5) + ',' + map.getCenter().lng.toFixed(5) + " view on osm.org"; + html_zoom = "map zoom: " + map.getZoom(); + html_viewbox = "viewbox: " + map_viewbox_as_string(); - $('#map-position').html([html_center,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'); } @@ -81,7 +118,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); @@ -106,9 +143,13 @@ jQuery(document).on('ready', function(){ var bounds = [[result.aBoundingBox[0]*1,result.aBoundingBox[2]*1], [result.aBoundingBox[1]*1,result.aBoundingBox[3]*1]]; map.fitBounds(bounds); - if (result.astext && result.astext.match(/POLY/) ){ - var layer = omnivore.wkt.parse(result.astext); - layerGroup.addLayer(layer); + if (result.astext && result.astext.match(/(POLY)|(LINE)/) ){ + var geojson_layer = L.geoJson(null, { + // http://leafletjs.com/reference.html#geojson-style + style: function(feature) { return { clickable: false, color: 'blue' }; } + }); + omnivore.wkt.parse(result.astext,null,geojson_layer); + layerGroup.addLayer(geojson_layer); } else { // var layer = L.rectangle(bounds, {color: "#ff7800", weight: 1} ); @@ -116,7 +157,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], 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({ @@ -139,6 +189,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); @@ -153,26 +211,37 @@ jQuery(document).on('ready', function(){ map = new L.map('map', { // center: [nominatim_map_init.lat, nominatim_map_init.lon], // zoom: nominatim_map_init.zoom, - attributionControl: false, + attributionControl: (nominatim_map_init.tile_attribution && nominatim_map_init.tile_attribution.length), scrollWheelZoom: false, touchZoom: false, }); - L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + + L.tileLayer(nominatim_map_init.tile_url, { // moved to footer - // attribution: '© OpenStreetMap contributors' + attribution: (nominatim_map_init.tile_attribution || null ) //'© OpenStreetMap contributors' }).addTo(map); - var layerGroup = new L.layerGroup().addTo(map); - - var outline = omnivore.wkt.parse(nominatim_result.outlinestring); - map.addLayer(outline); + var layerGroup = new L.layerGroup().addTo(map); 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 geojson_layer = L.geoJson(null, { + // http://leafletjs.com/reference.html#geojson-style + style: function(feature) { return { clickable: false, color: 'blue' }; } + }); + omnivore.wkt.parse(nominatim_result.outlinestring,null,geojson_layer); + layerGroup.addLayer(geojson_layer); + map.fitBounds(geojson_layer.getBounds()); + } else { + map.setView([nominatim_result.lat,nominatim_result.lon],10); + } + + });