Duplicated circle on dragend

by Stefano

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="map" style="height: 450px;"></div>

JavaScript

var map = L.map('map').setView([43, -74], 8)
new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map)
 

map
  .on('click', (e) => {
    console.log('map:click')

    const marker = L.circleMarker(e.latlng, {
      color: '#f03',
      fillColor: '#f03',
      fillOpacity: 0.80,
      bubblingMouseEvents: false,
    })
    .on('mousedown', () => {
      console.log('marker:down')
      map.dragging.disable();
      map.on('mousemove', (e) => marker.setLatLng(e.latlng))
    })
    .on('mouseup', () => {
      console.log('marker:up')
      map.dragging.enable();
      map.off('mousemove')
    })

    marker.addTo(map);
  })
  
map
  .on('mousedown', () => console.log('map:down'))
  .on('mouseup', () => console.log('map:up'))