CODEWITHSUNDEEP
javascriptleaflet
Toady
Toady

Reputation: 41

Input where to add marker style in this code (Leaflet)

I am somewhat of a beginner with coding in general and leaflet. I have run into a small problem. I have this bit of code to have a draggable user submitted marker. 

var currentMarker;
map.on("click", function (event) {
if (currentMarker) {
    currentMarker._icon.style.transition = "transform 0.3s ease-out";
    currentMarker._shadow.style.transition = "transform 0.3s ease-out";        
    currentMarker.setLatLng(event.latlng);

    setTimeout(function () {
        currentMarker._icon.style.transition = null;
        currentMarker._shadow.style.transition = null;
    }, 300);
    return;
}

currentMarker = L.marker(event.latlng, {
    draggable: true
}).addTo(map).on("click", function () {
    event.originalEvent.stopPropagation();
}).bindPopup("HI").openPopup();
});

document.getElementById("done").addEventListener("click", function () {
currentMarker = null;
});

I am also using the awesome-markers leaflet plugin to style markers which I already placed on the map. I am looking for help as to where I should put this code in the code listed above to style the generic marker using these options.

icon: L.AwesomeMarkers.icon({
    icon: '#fix',
    markerColor: 'darkpurple',
    iconColor: '#F8FAEE',           
})

I tried a ton of different spots, though as I said I am a beginner and I am probably overlooking what to do if it is indeed possible. Thanks for your help and time I appreciate it.

Upvotes: 1

Views: 213

Answers (1)

ghybs
ghybs

Reputation: 53185

Welcome to SO!

icon is an option of L.marker factory, like your draggable: true option.

L.marker(event.latlng, {
  draggable: true,
  icon: L.AwesomeMarkers.icon({ /* … */ })
}).addTo(map)

See also the Markers With Custom Icons Leaflet tutorial, as well as the Leaflet.awesome-markers plugin home page, which links to an online demo from which you can get inspiration for your code.

Upvotes: 1

Related Questions