[GIS] Removing individual markers from map

eventsleaflet

I have a map with several moving markers on it and have been trying to remove each individual one when their respective animation ends. I am using Leaflet and Leaflet's plugin Leaflet.MovingMarker. I tried using methods isEnded() and end without much sucess.

With the latter method (end), the following code removes only but one marker (full code here):

marker.on('end', function() {
  map.removeLayer(this);
  });

With a click event instead of an end event, each marker is made easily removable, but then this is not what I am looking for:

marker.on('click', function() {
  map.removeLayer(this);
  });

With the method isEnded(), have not had any luck at all either (full code here):

var ended = marker.isEnded(); 

  if (ended = true) {
  console.log("this marker ended!");
  map.removeLayer(this);
  }

I wonder what I am missing here?

Best Answer

It is possible to use the 'end' event by adding it to the marker's declaration:

 var marker = L.Marker.movingMarker(coordinates, [6000]).on('end', 
    function(e) {
        console.log('end move');          
    });

I couldn't get the layer to be removed, here are some solutions for how to remove individual markers.

Related Solutions

Leaflet Events – How to Redirect to URL When Clicking on a Leaflet Marker

I have written down a small piece of code might be helpful for you.

You can try working example on jsFiddle

<!DOCTYPE html>
<html>
<head>
<title>Leaflet - Marker Click Event</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#map {
    width: 800px;
    height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        init_map();
        add_marker();
    });
    var map;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
    }

    function add_marker() {
        var points = [
            ["P1", 43.059908, -89.442229, "http://www.url_address_01.com/"],
            ["P2", 43.058618, -89.442032, "http://www.url_address_02.com/"],
            ["P3", 43.058618, -86.441726, "http://www.url_address_03.com/"]
        ];
        var marker = [];
        var i;
        for (i = 0; i < points.length; i++) {
            marker[i] = new L.Marker([points[i][1], points[i][2]], {
                win_url: points[i][3]
            });
            marker[i].addTo(map);
            marker[i].on('click', onClick);
        };
    }

    function onClick(e) {
        //console.log(this.options.win_url);
        window.open(this.options.win_url);
    }
</script>
</body>
</html>

[GIS] Leaflet JS calling animatedMarker.stop() from event listener

I've made some changes to your code, to make it work as you wish. Here's only the code between the body tags:

<body>
    <div id="map"></div>
    <script type="text/javascript">
        // init the map with Stamen Terrain tiles
        var map = L.map('map').setView([40.3025, -121.2347], 15);
        var layer = new L.StamenTileLayer("terrain");
        var animatedMarker;
        map.addLayer(layer);

        // create geojson layer
        var geojson = new L.geoJson(pct);
        geojson.addTo(map);

        // temporary array to store geojson lat, lon
        var temp = [];

        var eachLayer = geojson.eachLayer(function(layer){

            var coordinates = layer.feature.geometry.coordinates,
                len = coordinates.length,
                i = 0;
            for (i; i<len; i++){
                var lat = coordinates[i][1],
                    lon = coordinates[i][0];
                // reverse order of lon, lat for L.polyline
                temp.push([lat, lon]);
            }
        });

        var line = new L.polyline(temp),
            animatedMarker = L.animatedMarker(line.getLatLngs(), {
                autoStart: false,
                distance: 500,
                interval: 1000
            });

        map.addLayer(animatedMarker);

        var flag = 0; // the variable used to signalise the animation stop

        function pan_map(){
            map.panTo({lon: animatedMarker['_latlng'].lng, lat: animatedMarker['_latlng'].lat});;
        }
        pan_map(); // pan the map to the marker start position

        // set the interval timer
        var vInterval = setInterval(function(){
            if (flag == 1){
                animatedMarker.stop();
                clearInterval(vInterval); // stops the interval timing, also
            }
            pan_map(); // pan the map to follow the marker
        }, 100);

        // delay start so that data has time to load
        Timeout = setTimeout(function(){
            animatedMarker.start();
        }, 3000);

        // function to track animatedMarker's position
        // and stop it at given lat lon values
        var checkLatLon = function(e) {
            var lat = 32.608639206779,
                lon = -116.49114320162762;
            if (e.latlng.lng === lon && e.latlng.lat === lat){
                flag = 1; // signals the animation can be stopped
            }
        }

        // event listener to check animatedMarker's position
        animatedMarker.on('move', checkLatLon);
    </script>   
</body>

Best Answer

Related Solutions

Leaflet Events – How to Redirect to URL When Clicking on a Leaflet Marker

[GIS] Leaflet JS calling animatedMarker.stop() from event listener

Related Question