X-Git-Url: https://git.openstreetmap.org./nominatim-ui.git/blobdiff_plain/b422c48b29a3bfa2f961da015d9a026aff51e3cb..1df5c38175a3d15f8e595f49506b4dfb46e73d29:/src/assets/js/searchpage.js diff --git a/src/assets/js/searchpage.js b/src/assets/js/searchpage.js index 57c7a77..be7f0c1 100755 --- a/src/assets/js/searchpage.js +++ b/src/assets/js/searchpage.js @@ -10,18 +10,31 @@ function display_map_position(mouse_lat_lng) { mouse_lat_lng = map.wrapLatLng(mouse_lat_lng); } - html_mouse = 'mouse position ' + (mouse_lat_lng ? [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',') : '-'); - html_click = 'last click: ' + (last_click_latlng ? [last_click_latlng.lat.toFixed(5), last_click_latlng.lng.toFixed(5)].join(',') : '-'); + var html_mouse = 'mouse position: -'; + if (mouse_lat_lng) { + html_mouse = 'mouse position: ' + + [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(','); + } + var html_click = 'last click: -'; + if (last_click_latlng) { + html_click = 'last click: ' + + [last_click_latlng.lat.toFixed(5), last_click_latlng.lng.toFixed(5)].join(','); + } - html_center = 'map center: ' + var html_center = 'map center: ' + 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(); + var html_zoom = 'map zoom: ' + map.getZoom(); + var html_viewbox = 'viewbox: ' + map_viewbox_as_string(); - $('#map-position-inner').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('
')); var center_lat_lng = map.wrapLatLng(map.getCenter()); var reverse_params = { @@ -35,27 +48,34 @@ function display_map_position(mouse_lat_lng) { $('input#use_viewbox').trigger('change'); } -function init_map_on_search_page(is_reverse_search, nominatim_results, request_lat, request_lon, init_zoom) { - // +function init_map_on_search_page(is_reverse_search, nominatim_results, request_lat, + request_lon, init_zoom) { + + var attribution = get_config_value('Map_Tile_Attribution') || null; map = new L.map('map', { // center: [nominatim_map_init.lat, nominatim_map_init.lon], // zoom: nominatim_map_init.zoom, - attributionControl: (get_config_value('Map_Tile_Attribution') && get_config_value('Map_Tile_Attribution').length), + attributionControl: (attribution && attribution.length), scrollWheelZoom: true, // !L.Browser.touch, - touchZoom: false, + touchZoom: false }); L.tileLayer(get_config_value('Map_Tile_URL'), { // moved to footer - attribution: (get_config_value('Map_Tile_Attribution') || null ) // '© OpenStreetMap contributors' + // '© OpenStreetMap contributors' + attribution: attribution }).addTo(map); // console.log(Nominatim_Config); map.setView([request_lat, request_lon], init_zoom); - var osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), { minZoom: 0, maxZoom: 13, attribution: (get_config_value('Map_Tile_Attribution') || null ) }); + var osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), { + minZoom: 0, + maxZoom: 13, + attribution: attribution + }); new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map); if (is_reverse_search) { @@ -73,6 +93,20 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l } ); cm.addTo(map); + } else { + var search_params = new URLSearchParams(window.location.search); + var viewbox = search_params.get('viewbox'); + if (viewbox) { + var coords = viewbox.split(','); // ,,, + var bounds = L.latLngBounds([coords[1], coords[0]], [coords[3], coords[2]]); + L.rectangle(bounds, { + color: '#69d53e', + weight: 3, + dashArray: '5 5', + opacity: 0.8, + fill: false + }).addTo(map); + } } var MapPositionControl = L.Control.extend({ @@ -82,12 +116,14 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l 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(); - }); + $(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(); @@ -107,7 +143,9 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l function update_viewbox_field() { // hidden HTML field - $('input[name=viewbox]').val($('input#use_viewbox').prop('checked') ? map_viewbox_as_string() : ''); + $('input[name=viewbox]') + .val($('input#use_viewbox') + .prop('checked') ? map_viewbox_as_string() : ''); } map.on('move', function () { @@ -138,9 +176,9 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l function get_result_element(position) { return $('.result').eq(position); } - function marker_for_result(result) { - return L.marker([result.lat, result.lon], { riseOnHover: true, title: result.name }); - } + // function marker_for_result(result) { + // return L.marker([result.lat, result.lon], { riseOnHover: true, title: result.name }); + // } function circle_for_result(result) { var cm_style = { radius: 10, @@ -153,7 +191,7 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l return L.circleMarker([result.lat, result.lon], cm_style); } - var layerGroup = new L.layerGroup().addTo(map); + var layerGroup = (new L.layerGroup()).addTo(map); function highlight_result(position, bool_focus) { var result = nominatim_results[position]; @@ -174,11 +212,11 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l } if (result.boundingbox) { - var bounds = [ + var bbox = [ [result.boundingbox[0] * 1, result.boundingbox[2] * 1], [result.boundingbox[1] * 1, result.boundingbox[3] * 1] ]; - map.fitBounds(bounds); + map.fitBounds(bbox); if (result.geojson && result.geojson.type.match(/(Polygon)|(Line)/)) { // @@ -186,7 +224,7 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l parse_and_normalize_geojson_string(result.geojson), { // https://leafletjs.com/reference-1.0.3.html#path-option - style: function (feature) { + style: function (/* feature */) { return { interactive: false, color: 'blue' }; } } @@ -247,10 +285,10 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l // common mistake is to copy&paste latitude and longitude into the 'lat' search box $('form input[name=lat]').on('change', function () { - var coords = $(this).val().split(','); - if (coords.length === 2) { - $(this).val(L.Util.trim(coords[0])); - $(this).siblings('input[name=lon]').val(L.Util.trim(coords[1])); + var coords_split = $(this).val().split(','); + if (coords_split.length === 2) { + $(this).val(L.Util.trim(coords_split[0])); + $(this).siblings('input[name=lon]').val(L.Util.trim(coords_split[1])); } }); } @@ -266,10 +304,8 @@ jQuery(document).ready(function () { if (!$('#search-page,#reverse-page').length) { return; } var is_reverse_search = !!($('#reverse-page').length); - var endpoint = is_reverse_search ? 'reverse' : 'search'; - - var search_params = new URLSearchParams(location.search); + var search_params = new URLSearchParams(window.location.search); // return view('search', [ // 'sQuery' => $sQuery, @@ -281,25 +317,29 @@ jQuery(document).ready(function () { // 'sApiURL' => $url // ]); - - console.log(search_params); + var api_request_params; + var context; if (is_reverse_search) { - var api_request_params = { + api_request_params = { lat: search_params.get('lat'), lon: search_params.get('lon'), - zoom: (search_params.get('zoom') > 1 ? search_params.get('zoom') : get_config_value('Reverse_Default_Search_Zoom')), + zoom: (search_params.get('zoom') > 1 + ? search_params.get('zoom') + : get_config_value('Reverse_Default_Search_Zoom')), format: 'jsonv2' }; - var context = { + context = { // aPlace: aPlace, fLat: api_request_params.lat, fLon: api_request_params.lon, - iZoom: (search_params.get('zoom') > 1 ? api_request_params.zoom : get_config_value('Reverse_Default_Search_Zoom')) + iZoom: (search_params.get('zoom') > 1 + ? api_request_params.zoom + : get_config_value('Reverse_Default_Search_Zoom')) }; - + update_html_title(); if (api_request_params.lat && api_request_params.lon) { fetch_from_api('reverse', api_request_params, function (aPlace) { @@ -311,6 +351,10 @@ jQuery(document).ready(function () { context.aPlace = aPlace; render_template($('main'), 'reversepage-template', context); + update_html_title('Reverse result for ' + + api_request_params.lat + + ',' + + api_request_params.lon); init_map_on_search_page( is_reverse_search, @@ -335,17 +379,17 @@ jQuery(document).ready(function () { } } else { - var api_request_params = { + api_request_params = { q: search_params.get('q'), polygon_geojson: search_params.get('polygon_geojson') ? 1 : 0, viewbox: search_params.get('viewbox'), format: 'jsonv2' }; - var context = { + context = { // aSearchResults: aResults, sQuery: api_request_params.q, - sViewBox: '', + sViewBox: search_params.get('viewbox'), env: Nominatim_Config, sMoreURL: '' }; @@ -357,8 +401,15 @@ jQuery(document).ready(function () { context.aSearchResults = aResults; render_template($('main'), 'searchpage-template', context); + update_html_title('Result for ' + api_request_params.q); - init_map_on_search_page(is_reverse_search, aResults, get_config_value('Map_Default_Lat'), get_config_value('Map_Default_Lon'), get_config_value('Map_Default_Zoom')); + init_map_on_search_page( + is_reverse_search, + aResults, + get_config_value('Map_Default_Lat'), + get_config_value('Map_Default_Lon'), + get_config_value('Map_Default_Zoom') + ); $('#q').focus(); @@ -367,7 +418,13 @@ jQuery(document).ready(function () { } else { render_template($('main'), 'searchpage-template', context); - init_map_on_search_page(is_reverse_search, [], get_config_value('Map_Default_Lat'), get_config_value('Map_Default_Lon'), get_config_value('Map_Default_Zoom')); + init_map_on_search_page( + is_reverse_search, + [], + get_config_value('Map_Default_Lat'), + get_config_value('Map_Default_Lon'), + get_config_value('Map_Default_Zoom') + ); } } });