clhenrick/index.html

## 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>