background preloader

Timemap - Javascript library to help use a SIMILE timeline with online maps including Google, OpenLayers, and Bing.

Timemap - Javascript library to help use a SIMILE timeline with online maps including Google, OpenLayers, and Bing.
Timemap.js is a Javascript library to help use online maps, including Google, OpenLayers, and Bing, with a SIMILE timeline. The library allows you to load one or more datasets in JSON, KML, or GeoRSS onto both a map and a timeline simultaneously. By default, only items in the visible range of the timeline are displayed on the map. Version 2.0.1 Now Up! Version 2.0.1 is primarily a maintenance release, fixing a number of small bugs and cleaning up a few things that weren't quite right in v.2.0. Upgrading to v.2.x: Timemap.js v.2.x includes several important changes from 1.x: it removes the dependency on Google Maps v2, and adds dependencies on jQuery and the Mapstraction library to allow support for multiple map providers, including Google v3, OpenLayers, and Bing Maps. Simple Three-Item Dataset (using inline JSON data and Google Maps v3) Post-Election Violence in Kenya (using KML data)

okfn/timemapper Timeline Portfolio Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests. The HTML Timeline comes with a light colored theme by default. First, let's look at the basic layout of the page: index.html <! In the head section, we have the plugin's stylesheet - timeline.css, and styles.css, which will hold our customizations. When we call the plugin, it will search for a div on your page with the ID of timeline. <div class="container main" id="timeline"><div class="feature slider" style="overflow-y: hidden;"><div class="slider-container-mask slider-container slider-item-container"><! As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. The jQuery The init method takes single argument - the data source. The CSS

Related: