X-Git-Url: https://git.openstreetmap.org./nominatim.git/blobdiff_plain/016815eda29fcd4a858921f6cefc467d20952bab..bb403e2e589434e862c1b6d1206b7a61144011c6:/website/js/nominatim-ui.js diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js index a3d5e77c..9622f821 100644 --- a/website/js/nominatim-ui.js +++ b/website/js/nominatim-ui.js @@ -10,33 +10,51 @@ jQuery(document).on('ready', function(){ $('#q').focus(); map = new L.map('map', { - // center: [nominatim_map_init.lat || 0, 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', { - noWrap: true // otherwise we end up with click coordinates like latitude -728 + 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); - if ( nominatim_map_init.lat ){ - map.setView([nominatim_map_init.lat || 0, nominatim_map_init.lon], nominatim_map_init.zoom); + map.setView([nominatim_map_init.lat, nominatim_map_init.lon], 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); + 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){ @@ -49,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'); } @@ -123,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} ); @@ -135,7 +159,7 @@ jQuery(document).on('ready', function(){ else { 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]}); + 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}); @@ -187,25 +211,32 @@ 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 circle = L.circleMarker([nominatim_result.lat,nominatim_result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75}); map.addLayer(circle); if ( nominatim_result.outlinestring ){ - var outline = omnivore.wkt.parse(nominatim_result.outlinestring); - map.addLayer(outline); - map.fitBounds(outline.getBounds()); + + 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); }