How to remove search pin?

[joto]

When using the search a pin will be set on the map. There is currently no way to remove the pin.

[KMR-zoar]

The seach pin of ol-geocoder.js will be added to a layer named "geocoder-layer-....".
I could remove the pin(s) with the geocode-layer by adding the following code to line 635 in app.js:

function remove_search_pin() {
  var remove_layer_name = 'geocoder-layer';
  var layers_to_remove = [];
  map.getLayers().forEach(function(layer) {
    var layer_name = layer.getProperties().name;
    if (layer_name && layer_name.match(remove_layer_name)) {
      layers_to_remove.push(layer);
    }
  });

  for (var i = 0; i < layers_to_remove.length; i++) {
    map.removeLayer(layers_to_remove[i]);
  }
}

After Geocode I called this function using Chrome's DevTools.

[joto]

Thanks for figuring this out! Can you wire this up so that you can click on the pin to remove it and send me a pull request? Would be great!

[KMR-zoar]

I created pull request for function and clickable button.

The button is available under the ol-geocoder button.
I made an icon by processing SVG published under CC0 license.

Search with ol-geocoder.

Click the icon to delete the pin.

I could not create a function that hooks to ol-geocoder and can show/hide buttons...

[joto]

I am not too happy about the extra button. It adds cognitive load for the user, especially because its use is not obvious and it does nothing until you actually use the search function. Maybe this is something we need to add upstream to the ol-geocoder instead of trying to fix this here.

[KMR-zoar]

I agree with that idea too.

I found 'propertychange' event on map.getLayers() on OpenLayers, added function that hook this event and change css for pin remove button when geocoding at bcd3546
It should not be affected by adding or changing the QA layer.

But my code may be a little redundant.

• The button is hidden before geocoding
• Geocode it you will show the button
• The button hidden when deleting the geocode layer

[joto]

Thanks, this looks good now. I have merged this. We can always improve on this later, if the upstream ol-geocoder adds some functionality.

[PeshawaEng]

Thank you for the information.

This helps to remove or clear the mark when I hit the clear button. However, in my case, the geocoder also shows a popup of the address of the pin.
I also want to remove (clear or hide) the popup window when I hit the same button. Can you please clarify how to do that?

`
var container2 = document.getElementById('popup2');

var geocoder = new Geocoder('nominatim', {
provider: 'osm',
lang: 'en',
placeholder: 'Search for ...',
limit: 5,
debug: false,
autoComplete: true,
keepOpen: true
});
map.addControl(geocoder);

geocoder.on('addresschosen', function(evt) {
console.info(evt);
if (popup2) {
popup2.hide();
}
window.setTimeout(function() {
popup2.show(evt.coordinate, evt.address.formatted);
}, 3);
});

function clear_all() {
var remove_layer_name = 'geocoder-layer';
var layers_to_remove = [];
map.getLayers().forEach(function(layer) {
var layer_name = layer.getProperties().name;
if (layer_name && layer_name.match(remove_layer_name)) {
layers_to_remove.push(layer);
}
});

for (var i = 0; i < layers_to_remove.length; i++) {
map.removeLayer(layers_to_remove[i]);
}

}
`