React Leaflet: Marker icon during selecting position when add markers dynamically

Question

I implement dynamically adding markers using Evan Siroky answer. Now I want a marker to follow my cursor when I'm looking for an appropriate position for him. Like in this website after clicking the "Add Court" button. Example in gif.

Marker following cursor example

Could you give me some examples of something similar to my case? Or some suggestions on how could I implement it?

Thanks in advance.

Answer 1

You can achieve this with some CSS and JS

when you push the button you add the class and then you remove

Here an example to start

var map = L.map('map').setView([51.505, -0.09], 13);

L.DomUtil.addClass(map._container,'cursor');

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

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
    

#map { width: 100%; height: 360px; }

.leaflet-container.cursor {
  cursor: url("https://i.imgur.com/NyfJiPA.png"), auto;
}

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>
   
    <div id="map"></div>