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

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.

CodePudding user response：

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>