Boat animated track - 2019_09_07

See this blog post for context and details.

Original idea by the New York Times (dataviz ; source code)
Adapted to Leaflet by @pvernier
Refactored and adapted to GeoJSON data extracted from a GPX file by @brunob

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Le Zigomar !</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
	integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
	crossorigin=""></script>
<script src="https://calvinmetcalf.github.io/leaflet-ajax/dist/leaflet.ajax.js"></script>
<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 4px; }
	.info p { margin-top: 0; }
	.info #speed { background: #d7301f; height: 4px; width: 0; transition: all 0.5s ease; }
	.glyphicon { display: inline-block; width: 16px; height: 16px; background-size: 16px; }
	.glyphicon-globe { background-image: url(earth.svg); }
	.glyphicon-target { background-image: url(target.svg); }
	.glyphicon-play { background-image: url(play.svg); }
	.glyphicon-pause { background-image: url(pause.svg); }
	.glyphicon-replay { background-image: url(replay.svg); }
	.glyphicon-time { background-image: url(time.svg); }
</style>
</head>
<body>

var bounds;
var map = L.map('map', {
	center: [48.31356955685135, -4.523620605468751],
	zoom: 10,
	playing: false,
	tracking: false
});

L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo(map);

L.Util.ajax('2019_09_07.json').then(function(data){

var stylePoint = {
		radius: 30,
		fillColor: "#d7301f",
		fillOpacity: 1,
		color: "#d7301f"
	};

var point_1 = new L.LatLng(data.features[0].geometry.coordinates[1], data.features[0].geometry.coordinates[0]);
	var point_2 = new L.LatLng(data.features[1].geometry.coordinates[1], data.features[1].geometry.coordinates[0]);
	var pointList = [point_1, point_2];

var trailLine = L.polyline(pointList, {color: '#d7301f', weight: 1.5}).addTo(map);
	var trackLine = L.polyline(pointList, {color: '#d7301f', weight: 1, opacity: 0.2}).addTo(map);

var position = L.circle([data.features[0].geometry.coordinates[1], data.features[0].geometry.coordinates[0]], stylePoint).addTo(map);

var i = 2;

function draw(layer, polyline, position, splice) {
		position._latlng.lat = layer.features[i].geometry.coordinates[1];
		position._latlng.lng = layer.features[i].geometry.coordinates[0];
		position.redraw();

});
	
</script>

</body>
</html>

https://calvinmetcalf.github.io/leaflet-ajax/dist/leaflet.ajax.js