X-Git-Url: https://git.openstreetmap.org./nominatim-ui.git/blobdiff_plain/9e2946d9a9ff5a1436403dfe051bf9f8866da178..f695e7586420364987aaae322cbb95ce0db15ab5:/dist/assets/js/nominatim-ui.js diff --git a/dist/assets/js/nominatim-ui.js b/dist/assets/js/nominatim-ui.js index 1618eac..c597643 100644 --- a/dist/assets/js/nominatim-ui.js +++ b/dist/assets/js/nominatim-ui.js @@ -1,13 +1,35 @@ +'use strict'; + var map; var last_click_latlng; +// ********************************************************* +// DEFAULTS +// ********************************************************* + +var Nominatim_Config_Defaults = { + Nominatim_API_Endpoint: 'http://localhost/nominatim/', + Images_Base_Url: '/mapicons/', + Search_AreaPolygons: 1, + Reverse_Default_Search_Zoom: 18, + Map_Default_Lat: 20.0, + Map_Default_Lon: 0.0, + Map_Default_Zoom: 2, + Map_Tile_URL: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png', + Map_Tile_Attribution: 'OpenStreetMap contributors' +}; // ********************************************************* // HELPERS // ********************************************************* + function get_config_value(str, default_val) { - return (typeof Nominatim_Config[str] !== 'undefined' ? Nominatim_Config[str] : default_val); + var value = ((typeof Nominatim_Config !== 'undefined') + && (typeof Nominatim_Config[str] !== 'undefined')) + ? Nominatim_Config[str] + : Nominatim_Config_Defaults[str]; + return (typeof value !== 'undefined' ? value : default_val); } function parse_and_normalize_geojson_string(part) { @@ -27,7 +49,10 @@ function parse_and_normalize_geojson_string(part) { } function map_link_to_osm() { - return 'https://openstreetmap.org/#map=' + map.getZoom() + '/' + map.getCenter().lat + '/' + map.getCenter().lng; + var zoom = map.getZoom(); + var lat = map.getCenter().lat; + var lng = map.getCenter().lng; + return 'https://openstreetmap.org/#map=' + zoom + '/' + lat + '/' + lng; } function map_viewbox_as_string() { @@ -56,12 +81,18 @@ function map_viewbox_as_string() { // ********************************************************* function fetch_from_api(endpoint_name, params, callback) { - // `&a=&b=&c=1` => '&c=' - for (var k in params) { - if (typeof (params[k]) === 'undefined' || params[k] === '' || params[k] === null) delete params[k]; + // + // `&a=&b=&c=1` => '&c=1' + var param_names = Object.keys(params); + for (var i = 0; i < param_names.length; i += 1) { + var val = params[param_names[i]]; + if (typeof (val) === 'undefined' || val === '' || val === null) { + delete params[param_names[i]]; + } } - var api_url = get_config_value('Nominatim_API_Endpoint') + endpoint_name + '.php?' + $.param(params); + var api_url = get_config_value('Nominatim_API_Endpoint') + endpoint_name + '.php?' + + $.param(params); if (endpoint_name !== 'status') { $('#api-request-link').attr('href', api_url); } @@ -83,6 +114,14 @@ function render_template(el, template_name, page_context) { el.html(html); } +function update_html_title(title) { + var prefix = ''; + if (title && title.length > 1) { + prefix = title + ' | '; + } + $('head title').text(prefix + 'OpenStreetMap Nominatim'); +} + function show_error(html) { $('#error-overlay').html(html).show(); } @@ -92,10 +131,11 @@ function hide_error() { } -$(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) { +$(document).ajaxError(function (event, jqXHR, ajaxSettings/* , thrownError */) { // console.log(thrownError); // console.log(ajaxSettings); - show_error('Error fetching results from ' + ajaxSettings.url + ''); + var url = ajaxSettings.url; + show_error('Error fetching results from ' + url + ''); }); @@ -108,20 +148,22 @@ jQuery(document).ready(function () { function init_map_on_detail_page(lat, lon, geojson) { + 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); - var layerGroup = new L.layerGroup().addTo(map); + // var layerGroup = new L.layerGroup().addTo(map); var circle = L.circleMarker([lat, lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75 @@ -133,7 +175,7 @@ function init_map_on_detail_page(lat, lon, geojson) { // https://leafletjs.com/reference-1.0.3.html#path-option parse_and_normalize_geojson_string(geojson), { - style: function (feature) { + style: function () { return { interactive: false, color: 'blue' }; } } @@ -144,15 +186,22 @@ function init_map_on_detail_page(lat, lon, geojson) { map.setView([lat, lon], 10); } - var osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), { minZoom: 0, maxZoom: 13, attribution: (get_config_value('Map_Tile_Attribution') || null) }); - var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map); + var osm2 = new L.TileLayer( + get_config_value('Map_Tile_URL'), + { + minZoom: 0, + maxZoom: 13, + attribution: (get_config_value('Map_Tile_Attribution') || null) + } + ); + (new L.Control.MiniMap(osm2, { toggleDisplay: true })).addTo(map); } jQuery(document).ready(function () { if (!$('#details-page').length) { return; } - var search_params = new URLSearchParams(location.search); + var search_params = new URLSearchParams(window.location.search); // var place_id = search_params.get('place_id'); var api_request_params = { @@ -161,7 +210,7 @@ jQuery(document).ready(function () { osmid: search_params.get('osmid'), keywords: search_params.get('keywords'), addressdetails: 1, - hierarchy: 1, + hierarchy: (search_params.get('hierarchy') === '1' ? 1 : 0), group_hierarchy: 1, polygon_geojson: 1, format: 'json' @@ -169,9 +218,14 @@ jQuery(document).ready(function () { if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) { fetch_from_api('details', api_request_params, function (aFeature) { - var context = { aPlace: aFeature }; + var context = { aPlace: aFeature, base_url: window.location.search }; render_template($('main'), 'detailspage-template', context); + if (api_request_params.place_id) { + update_html_title('Details for ' + api_request_params.place_id); + } else { + update_html_title('Details for ' + api_request_params.osmtype + api_request_params.osmid); + } update_data_date(); @@ -214,18 +268,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(); + var html_zoom = 'map zoom: ' + map.getZoom(); + var html_viewbox = 'viewbox: ' + map_viewbox_as_string(); - 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 = { @@ -239,27 +306,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) { @@ -272,10 +346,25 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l fillColor: '#ff7800', color: 'red', opacity: 0.75, + zIndexOffset: 100, clickable: false } ); 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({ @@ -285,12 +374,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-outline-secondary') + .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(); @@ -310,7 +401,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 () { @@ -335,15 +428,26 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l update_viewbox_field(); }); - - + $("input[name='query-selector']").click(function () { + var query_val = $("input[name='query-selector']:checked").val(); + if (query_val === 'simple') { + $('div.form-group-simple').removeClass('hidden'); + $('div.form-group-structured').addClass('hidden'); + $('.form-group-structured').find('input:text').val(''); + } else if (query_val === 'structured') { + console.log('here'); + $('div.form-group-simple').addClass('hidden'); + $('div.form-group-structured').removeClass('hidden'); + $('.form-group-simple').find('input:text').val(''); + } + }); 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, @@ -356,7 +460,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]; @@ -377,11 +481,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)/)) { // @@ -389,7 +493,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' }; } } @@ -450,10 +554,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])); } }); } @@ -461,18 +565,13 @@ function init_map_on_search_page(is_reverse_search, nominatim_results, request_l - - - 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, @@ -484,23 +583,29 @@ jQuery(document).ready(function () { // 'sApiURL' => $url // ]); + 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') !== null ? 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') !== null ? 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) { @@ -512,6 +617,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, @@ -536,30 +645,68 @@ jQuery(document).ready(function () { } } else { - var api_request_params = { + api_request_params = { q: search_params.get('q'), + street: search_params.get('street'), + city: search_params.get('city'), + county: search_params.get('county'), + state: search_params.get('state'), + country: search_params.get('country'), + postalcode: search_params.get('postalcode'), polygon_geojson: search_params.get('polygon_geojson') ? 1 : 0, viewbox: search_params.get('viewbox'), + exclude_place_ids: search_params.get('exclude_place_ids'), format: 'jsonv2' }; - var context = { - // aSearchResults: aResults, + context = { sQuery: api_request_params.q, - sViewBox: '', - env: Nominatim_Config, - sMoreURL: '' + sViewBox: search_params.get('viewbox'), + env: {} }; - if (api_request_params.q) { + if (api_request_params.street || api_request_params.city || api_request_params.county + || api_request_params.state || api_request_params.country || api_request_params.postalcode) { + context.hStructured = { + street: api_request_params.street, + city: api_request_params.city, + county: api_request_params.county, + state: api_request_params.state, + country: api_request_params.country, + postalcode: api_request_params.postalcode + }; + } + + if (api_request_params.q || context.hStructured) { fetch_from_api('search', api_request_params, function (aResults) { context.aSearchResults = aResults; + if (aResults.length >= 10) { + var aExcludePlaceIds = []; + if (search_params.has('exclude_place_ids')) { + aExcludePlaceIds.search_params.get('exclude_place_ids').split(','); + } + for (var i = 0; i < aResults.length; i += 1) { + aExcludePlaceIds.push(aResults[i].place_id); + } + + var parsed_url = new URLSearchParams(window.location.search); + parsed_url.set('exclude_place_ids', aExcludePlaceIds.join(',')); + context.sMoreURL = '?' + parsed_url.toString(); + } + 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(); @@ -568,7 +715,53 @@ 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') + ); } } }); +// ********************************************************* +// DELETABLE PAGE +// ********************************************************* + +jQuery(document).ready(function () { + if (!$('#deletable-page').length) { return; } + + var api_request_params = { + format: 'json' + }; + + fetch_from_api('deletable', api_request_params, function (aPolygons) { + var context = { aPolygons: aPolygons }; + + render_template($('main'), 'deletable-template', context); + update_html_title('Deletable objects'); + + update_data_date(); + }); +}); +// ********************************************************* +// BROKEN POLYGON PAGE +// ********************************************************* + +jQuery(document).ready(function () { + if (!$('#polygons-page').length) { return; } + + var api_request_params = { + format: 'json' + }; + + fetch_from_api('polygons', api_request_params, function (aPolygons) { + var context = { aPolygons: aPolygons }; + + render_template($('main'), 'polygons-template', context); + update_html_title('Broken polygons'); + + update_data_date(); + }); +});