<html>
<head>
<title>Leaflet.timeline Example - Country Borders</title>
<script src="https://www.yatex.org/gitbucket/natto/leaflet/raw/master/leaflet.js"></script>
<script src="https://www.yatex.org/gitbucket/natto/leaflet_plugins/raw/master/Leaflet.timeline/src/Timeline.js"></script>
<link href="https://www.yatex.org/gitbucket/natto/leaflet/raw/master/leaflet.css" rel="stylesheet">
<style>
html, body{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
.leaflet-bottom.leaflet-left{
width: 100%;
}
.leaflet-control-container .leaflet-timeline-controls{
box-sizing: border-box;
width: 100%;
margin: 0;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function getColorFor(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
var red = (hash >> 24) & 0xff;
var grn = (hash >> 16) & 0xff;
var blu = (hash >> 8) & 0xff;
return 'rgb(' + red + ',' + grn + ',' + blu + ')';
}
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map', {layers: [osm], center: new L.LatLng(0,0), zoom: 2 });
var timeline;
var timelineControl;
function onLoadData(data){
timeline = L.timeline(data, {
style: function(data){
return {
stroke: false,
color: getColorFor(data.properties.name),
fillOpacity: 0.5
}
},
waitToUpdateMap: true,
onEachFeature: function(feature, layer) {
layer.bindTooltip(feature.properties.name);
}
});
timelineControl = L.timelineSliderControl({
formatOutput: function(date) {
return new Date(date).toLocaleDateString();
},
enableKeyboardControls: true,
});
timeline.addTo(map);
timelineControl.addTo(map);
timelineControl.addTimelines(timeline);
}
</script>
<script src="./borders-parsed.jsonp"></script>
</body>
</html>
natto