typescriptleafletangular7leaflet-routing-machine

Custom leaflet geocoder marker

I wanna change the default Marker of leaflet geocoder, for that I overrided the markGeocode function and added it to the Control geocoder like that (using typeScript):

 const geocoder = L.Control.geocoder({
        position: 'topright',
        placeholder: 'Rechercher...',
        showResultIcons: true,
        errorMessage: 'Aucun resultat.',
         // Here :
        markGeocode: (result) => {
            L.marker(new L.latLng(result.center), { icon: this.endIcon }).addTo(map);
        }

    }).addTo(map);

However the changes do not apply, always the same marker (default one) :

enter image description here

Solution

  • You can overwrite the default method.

    var geocoder = L.Control.geocoder({
  defaultMarkGeocode: false
})
  .on('markgeocode', function(e) {
    var latlng = e.geocode.center;
    var marker = L.marker(latlng,{icon: greenIcon}).addTo(map);
    map.fitBounds(e.geocode.bbox);
  })
  .addTo(map);