mayblue9 · December 21, 2015 08:27
diff --git a/index.html b/index.html
 <!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="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
        <script src="http://rawgithub.com/clhenrick/Major-Studio-Two/gh-pages/map-story/html/js/pct-trail-partial.js"></script>
        <script src="http://rawgithub.com/openplans/Leaflet.AnimatedMarker/master/src/AnimatedMarker.js"></script>
        <script type="text/javascript" src="http://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>
	<!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="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script src="http://rawgithub.com/clhenrick/Major-Studio-Two/gh-pages/map-story/html/js/pct-trail-partial.js"></script>
	<script src="http://rawgithub.com/openplans/Leaflet.AnimatedMarker/master/src/AnimatedMarker.js"></script>
	<script type="text/javascript" src="http://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>