Marker onDrop event

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>Marker onDrop event</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;
      
      function createMarker() {
        var marker = new cercalia.Marker({
          position: new cercalia.LonLat(-1 + (Math.random() * 2), 39.51 + (Math.random() * 2)),
          draggable: true,
          onDrop: function(listMarkers) {
            var markerDropped = this;
            listMarkers.forEach(function(markerAct) {
              if (markerAct.getId() == 'Rubbish') {
                map.removeMarkers(markerDropped);
              }
            });
          }
        });
        map.addMarker(marker);
      }
      
      function initMap() {
        map = new cercalia.Map({
          target: 'map',
          controls: []
        });
      
        var markerRubbish = new cercalia.Marker({
          id: 'Rubbish',
          icon: new cercalia.Icon({
            src: 'img/trash.png'
          }),
          position: new cercalia.LonLat(-4.363746156, 41.6)
        });
      
        map.addMarker(markerRubbish);
      
        for (var i = 0; i < 5; i++) {
          createMarker();
        }
      }
      
      document.addEventListener('cercalia-ready', initMap);
    </script>
  </body>
</html>