mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 17:23:02 +00:00
Search results area
Display multiple search results
This commit is contained in:
15
css/app.css
15
css/app.css
@@ -848,6 +848,21 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.geocode-control div {
|
||||
top: 50px;
|
||||
width: 340px;
|
||||
margin: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
.geocode-control div span {
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.geocode-control div span:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
/* Geolocator */
|
||||
|
||||
.geolocate-control {
|
||||
|
||||
@@ -8,21 +8,54 @@ iD.ui.geocoder = function() {
|
||||
d3.event.preventDefault();
|
||||
var searchVal = this.value;
|
||||
d3.json('http://nominatim.openstreetmap.org/search/' +
|
||||
encodeURIComponent(searchVal) + '?limit=10&format=json', function(err, resp) {
|
||||
encodeURIComponent(searchVal) + '?limit=10&format=json', function (err, resp) {
|
||||
if (err) return hide();
|
||||
hide();
|
||||
if (!resp.length) {
|
||||
return iD.ui.flash(context.container())
|
||||
.select('.content')
|
||||
.append('h3')
|
||||
.text('No location found for "' + searchVal + '"');
|
||||
}
|
||||
var bounds = resp[0].boundingbox;
|
||||
map.extent(iD.geo.Extent([parseFloat(bounds[3]), parseFloat(bounds[0])], [parseFloat(bounds[2]), parseFloat(bounds[1])]));
|
||||
if (map.zoom() > 19) map.zoom(19);
|
||||
if(resp.length > 1) {
|
||||
for (var i=0; i < resp.length; i++) {
|
||||
var displayName, elementType, typeStr, span;
|
||||
displayName = resp[i].display_name,
|
||||
elementType = resp[i].type,
|
||||
typeStr = elementType.charAt(0).toUpperCase() + elementType.slice(1) + ': ',
|
||||
span = resultsList.append('span').text(typeStr);
|
||||
if(displayName.length > 80) displayName = displayName.substr(0,80) + '...';
|
||||
span.append('a')
|
||||
.attr('data-min-lon',resp[i].boundingbox[3])
|
||||
.attr('data-min-lat',resp[i].boundingbox[0])
|
||||
.attr('data-max-lon',resp[i].boundingbox[2])
|
||||
.attr('data-max-lat',resp[i].boundingbox[1])
|
||||
.text(displayName)
|
||||
.on('click', clickResult);
|
||||
}
|
||||
resultsList.classed('hide',false);
|
||||
} else {
|
||||
var bounds = resp[0].boundingbox;
|
||||
var extent = iD.geo.Extent([parseFloat(bounds[3]), parseFloat(bounds[0])], [parseFloat(bounds[2]), parseFloat(bounds[1])]);
|
||||
applyBounds(extent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clickResult() {
|
||||
var result = d3.select(this);
|
||||
var extent = iD.geo.Extent(
|
||||
[parseFloat(result.attr('data-min-lon')), parseFloat(result.attr('data-min-lat'))],
|
||||
[parseFloat(result.attr('data-max-lon')), parseFloat(result.attr('data-max-lat'))]
|
||||
);
|
||||
applyBounds(extent);
|
||||
}
|
||||
|
||||
function applyBounds(extent) {
|
||||
hide();
|
||||
map.extent(extent);
|
||||
if (map.zoom() > 19) map.zoom(19);
|
||||
}
|
||||
|
||||
function clickoutside(selection) {
|
||||
selection
|
||||
.on('click.geocoder-inside', function() {
|
||||
@@ -38,6 +71,7 @@ iD.ui.geocoder = function() {
|
||||
function setVisible(show) {
|
||||
button.classed('active', show);
|
||||
gcForm.classed('hide', !show);
|
||||
if (!show) resultsList.classed('hide', !show);
|
||||
if (show) inputNode.node().focus();
|
||||
else inputNode.node().blur();
|
||||
}
|
||||
@@ -55,6 +89,9 @@ iD.ui.geocoder = function() {
|
||||
.attr({ type: 'text', placeholder: t('geocoder.find_a_place') })
|
||||
.on('keydown', keydown);
|
||||
|
||||
var resultsList = selection.append('div')
|
||||
.attr('class','content fillD map-overlay hide');
|
||||
|
||||
selection.call(clickoutside);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user