Timeline with jQuery UI

by Patric Amatulli

HTML

<script src="http://www.ammap.com/lib/3/ammap.js"></script>
<script src="http://www.ammap.com/lib/3/maps/js/usaLow.js"></script>
<div id="mapdiv" style="width: 100%; height: 320px;"></div>
<br />
<button id="play">Play</button>
<div id="slider" style="margin-left: 50px; margin-right: 10px;"></div>

CSS

body {
    padding: 5px;
}

#play {
    float: left;
    width: 24px;
    height: 24px;
    margin: -4px 0 0 0;
}

JavaScript

var map;
var values = [];

AmCharts.ready(function() {
    // let's generate the data for 50 slides
    generateData();
    
    // let's build the map
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.colorSteps = 50;
    map.balloon.color = "#000000";
    map.minValue = 0;
    map.maxValue = 100000;
    var dataProvider = {
        mapVar: AmCharts.maps.usaLow,
        getAreasFromMap: true,
        images: [ // let's add one image to display the year of the current slide
            {
                left: 10,
                top: 20,
                label: values[0].year,
                labelColor: "#000000",
                labelRollOverColor: "#CC0000",
                labelFontSize: 20
            }
        ],
        areas: values[0].areas // we'll use the data for the first slide here
    };
    
    map.areasSettings = {
        autoZoom: true
    };
    map.dataProvider = dataProvider;

    var valueLegend = new AmCharts.ValueLegend();
    valueLegend.right = 10;
    valueLegend.minValue = "little";
    valueLegend.maxValue = "a lot!";
    map.valueLegend = valueLegend;
    
    // disable zoom controls
    map.zoomControl.zoomControlEnabled = false;
    map.zoomControl.panControlEnabled = false;

    map.write("mapdiv");
});

function generateData () {
    for (var i = 0; i < 50; i++) {
        var row = {
            year: 2013 - 50 + i,
            areas: []
        };
        for (var key in AmCharts.maps.usaLow.svg.g.path) {
            var id = AmCharts.maps.usaLow.svg.g.path[key].id;
            row.areas.push({
                id: id,
                value: getRandom(i == 0 ? undefined : values[i-1][id])
            });
        }
        values.push(row);
    }
}
        
function getRandom (prev) {
    if (prev == undefined) {
        return Math.ceil(Math.random() * 100000);
    }
    else {
 ...