Use Leaflet Geocoder without setting a marker when searching

Question

currently I am using the leaflet map and added this geocoder plugin: https://github.com/perliedman/leaflet-control-geocoder. My problem is, that everytime I search for a place, it also sets a marker at this location, but I don´t want it to. It should only zoom in and not set a marker.

Does anybody know how to disable this function or delete the set marker instantly?

The set marker looks like this

I am working in Ionic/ typescript and my code for using the geocoder is this:

leaflet.Control.geocoder().addTo(this.map);

According to GitHub, defaultMarkGeocode:false should disable the marker. When using it, I just get this error:

Cannot read property '_leaflet_id' of undefined

I also tried

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false
})
.on('markgeocode', function(e) {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
         bbox.getSouthEast(),
         bbox.getNorthEast(),
         bbox.getNorthWest(),
         bbox.getSouthWest()
    ]).addTo(map);
    map.fitBounds(poly.getBounds());
})
.addTo(map);

but it just tells me that the variable geocoder was never used and I get this error:

Cannot read property 'addLayer' of undefined

If you have any suggestions how to fix it and either disable or delete this marker, I would be very thankfully.

Greetings

I can't really tell without seeing all of your code, but do you need `.addTo(this.map)` rather than `addTo(map)`on the geocoder object? — peeebeee, Jul 23 '18 at 06:47

score 1 · Answer 1 · answered Jul 23 '18 at 13:40

Could not reproduce the exact error messages you describe:

var map = L.map('map').setView([0, 0], 2);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false,
    collapsed: false
  })
  .on('markgeocode', function(e) {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
      bbox.getSouthEast(),
      bbox.getNorthEast(),
      bbox.getNorthWest(),
      bbox.getSouthWest()
    ]).addTo(map);
    map.fitBounds(poly.getBounds());
  })
  .addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@1.5.8/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder@1.5.8/dist/Control.Geocoder.js"></script>

<div id="map"></div>

However when collapsed option is set to false, there is another error message:

TypeError: this.options.geocoder[mode] is not a function

…which is solved in plugin repo by PR perliedman/leaflet-control-geocoder#184, but it is not yet shipped in a released version in npm / unpkg CDN.

If you need further help on your error messages, please provide code that reproduces them.

Hey, meanwhile I solved it by just using another geocode plugin, but thanks a lot for your help! — Robert Linde, Jul 24 '18 at 07:52

score 0 · Answer 2 · answered Aug 22 '19 at 09:09

please try this with little modifications.

var map = L.map('map').setView([0, 0], 2);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false,
    collapsed: false
  })
  .on('markgeocode', (e) => {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
      bbox.getSouthEast(),
      bbox.getNorthEast(),
      bbox.getNorthWest(),
      bbox.getSouthWest()
    ]).addTo(map);
    map.fitBounds(poly.getBounds());
  })
  .addTo(map);

Use Leaflet Geocoder without setting a marker when searching

2 Answers2