Openlayers Animation Examples and Algorithms

Question

i wonder for a long time if people in this community uses openlayers for animation needs. we have know this that animating on browser is a little bit exhausting for it but when a map meets with animation, I believe that good things will be out.

Do you know some good websites or algorithms for animation compatible with openlayers?

these are what I know about animation, some codes and examples. pls share your knowledge about animation with openlayers for people who needs this...

The basic javascript code for adding features on map with time delay..

 time = 0;
 for (var i = 0; i < 5; i++) {
 time += 1000;
 setTimeout(function(j) {
 return function() {
 console.log("var is now", j);
 }
 }(i), time);
 }

i2maps

is a geocomputing environment. It provides a flexible programming framework for knowledge discovery from spatio-temporal data and web-oriented visualisation. The Javascript library is used for building the interactive user-interface, and is built on top of OpenLayers.

i2map

OpenLayers Timeline

is a simple library to create a time related map with OpenLayers. It supports cluster strategy (OpenLayers.Strategy.Cluster) and time filtering. Currently it supports source data in GeoJSON or GeoRSS format.

timelien

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.

timemap

Bike Share Map

Data is updated automatically every 2-20 minutes from the provider's website. Bike usage is simultaneous usage and includes cycle redistribution. Actual total usage across the day may be much higher. Distribution imbalance - the number of cycles that would need to be moved to a different stand, in order for all stands to be the same % full. Higher numbers indicate a more unbalanced distribution, e.g. many bikes in the centre, few on the edge. This website may be subject to interruption.

Data: Provider's website. Map data: OpenStreetMap contributors, including OS Open Data. Hosting: UCL. Powered by Mapnik and OpenLayers.

bikeshare

RaphaëlJS and OpenLayers Integration.

RaphaëlJS is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

raphael

OpenLayers Filter Strategy

This example uses a filter strategy to limit the features that are passed to a layer. Features bound for this layer have a when attribute with date values. A filter strategy is constructed with a between filter that limits the span of dates shown. A simple animation cycles through the domain of the when values, calling setFilter on the strategy with an updated filter.

filter

• kinkajou: RaphaëlJS and OpenLayers @Aragon link broken
• Bear: Correct link dev.openlayers.org/examples/filter-strategy.html

Answer 1

GeoNode is a platform combining different open source projects (Django, GeoExt, OpenLayers, GeoWebCache, GeoServer, GeoNetwork) for the management and publication of geospatial data.

E.g. used by Mapstory which offers infrastructure for animated maps with a historic perspective:

enter image description here

Answer 2

Another example is an openlayers plugin TimeManager from https://github.com/mpriour/TimeManager_OpenLayers-Addin

http://mpriour.github.com/openlayers/examples/wmst-auto.html

http://dev.openlayers.org/sandbox/mpriour/temporal_map/openlayers/examples/wmst.html

http://dev.openlayers.org/sandbox/mpriour/temporal_map/openlayers/examples/time-control.html

Answer 3

Aragon the examples you point are really nice.

I have used OpenLayers for some animations, but the main problem is there is no "standard way" to do it because there is no standard way to model the time with features.

For raster data it is easy to create a layer for each concrete instant of time and manage which layer must be visible on each animation step.

For vector data, things are more complicated, not only how to model feature, data and time but also how to visualize it. There are plenty of effects and animations things you can need depending on the type of the data.

Cheers.

• tony gil: hmmmm, is this an answer? sounds more like a comment. it could become an answer if you published "easy" and "complicated" examples.