ExtJS with Simile Timeline

EXTJS with OpenLayers and Map

by Nick Karnik

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.2.1/extjs-build/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css">
<link rel="stylesheet" href="http://api.simile-widgets.org/ajax/2.2.1/styles/graphics.css">
<script src="http://www.simile-widgets.org/timeline/api/timeline-api.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">

JavaScript

Ext.onReady(function () {

    var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

    function createMap() {
        var map = new OpenLayers.Map("map-innerCt");
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var road = new OpenLayers.Layer.Bing({
            name: "Road",
            key: apiKey,
            type: "Road"
        });
        var hybrid = new OpenLayers.Layer.Bing({
            name: "Hybrid",
            key: apiKey,
            type: "AerialWithLabels"
        });
        var aerial = new OpenLayers.Layer.Bing({
            name: "Aerial",
            key: apiKey,
            type: "Aerial"
        });
        map.addLayers([road, hybrid, aerial]);
        map.setCenter(new OpenLayers.LonLat(-110, 45), 3);
    }

    function createTimeline() {

        var bandInfos = [
        Timeline.createBandInfo({
            width: "70%",
            intervalUnit: Timeline.DateTime.MONTH,
            intervalPixels: 100
        }),
        Timeline.createBandInfo({
            width: "30%",
            intervalUnit: Timeline.DateTime.YEAR,
            intervalPixels: 200
        })];

        Timeline.create(document.getElementById("my-timeline-innerCt"), bandInfos);
    }

    Ext.application({
        name: 'SimileTimeline',
        launch: function () {

            Ext.create('Ext.container.Viewport', {

                title: 'Timeline',
                autoShow: true,
                layout: 'border',

                items: [{
                    region: 'south',
                    height: 200,
                    collapsible: true,
                    weight: 15,
                    id: 'my-timeline',
                    title: 'Timeline'
                }, {
                    region: 'center',
                    id: 'map'
                }],
                renderTo: Ext.getBody()
            });

            createMap();
            createTimeline();
        }
    });
});