D3 Examples - Leaflet AnimatedMarker plug-in test

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">             
        <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
        <script src="https://rawgithub.com/clhenrick/major-studio-two/gh-pages/map-story/html/js/pct-trail-partial.js"></script>
        <script src="https://rawgithub.com/openplans/leaflet.animatedmarker/master/src/animatedmarker.js"></script>
        <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.2.4"></script> 
        <style type="text/css">
                html, body {
                    margin: 0 auto;
                    padding: 0px;
                    width: 500px;
                    height: 500px;
                }
                #map {
                    width: 500px;
                    height: 500px;
                }
        </style>
    </head>
    <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");
            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);
​
            // pan the map to follow the marker
            setInterval(function(){
                map.panTo({lon: animatedMarker['_latlng'].lng, lat: animatedMarker['_latlng'].lat});
            }, 100);
​
            // delay start so that data has time to load
            setTimeout(function(){
                animatedMarker.start();
            }, 3000);
​
            // function to track animatedMarker's position
            // and stop it at given lat lon values
            var checkLatLon = function(e) {
                // lat lon values to check for
                var lat = 32.608639206779,
                    lon = -116.49114320162762;
                
                if (e.latlng.lng === lon && e.latlng.lat === lat){
                    alert("whoa!"); // shows the test works
                    console.log("lat lon check worked!"); // ""
                    animatedMarker.stop(); // doesn't seem to work?
                }
            }
            
            // event listener to check animatedMarker's position
            animatedMarker.on('move', checkLatLon);
​
        </script>   
    </body>
</html>
    