In my map web app, I have a play pause button that show vehicle route history.I get lat lon from database and create route that vehicle traverse.
At below site go to history tab after and choose vehicle and choose play button :

username : demo
pass : demo

for doing this i need to write javascript or openlayers can help me in animating routes of vehicle?

I create map web app with openlayers and yii php framework.
I want to show vehicle traveled route as animation like below site in my application.
In the above site use demo/demo for login to site.In the history tab you can see traveled route of vehicles as animation.
In my app i can add markers to map after 2seconds with below code.In the history array i have lon/lat and dateTime of the vehicle as location history.

var idx = 0;
var interval = setInterval(function(){
    if(idx >= history.length)
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(
            history[idx]['longitude'],history[idx]['latitude'] ).transform(
        new OpenLayers.Projection("EPSG:4326"),
        new OpenLayers.Projection('EPSG:900913')

But if a marker is out of the map bound i don't know how to change the bounds of the map to showing added marker!.
how can i change bounds of the map to showing added marker?
is this approach is true? When a marker added to map create event and if this marker isn't in the map bounds change map bound to showing it.
Is there any library for showing vehicle traveled route as animation?

2 Answers 2


check out i2Maps here. it gives you ability of animation with a js library. in addition to this you should glance at my que here about Openlayers Animation Examples and Algorithms.

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.

i hope it helps you...

  • I want only java script code to show traveled route of vehicle as animation but in i2maps it use python code!
    – taher
    Commented Aug 9, 2012 at 18:38

To show all the features of a vector layer:


I didn't understand if you need something to animate the features, I have the following snippet of code (I don't know how it will perform)

map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
var ll = new OpenLayers.LonLat(-43, 22).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

var features = new Array(1);             // Comes from another example :)
for (var i=0; i<features.length; i++)
    features[i] = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(ll.lon, ll.lat),
            type: 10 //5 + parseInt(5 * Math.random())
            ,size: 1

var myStyles = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style(
        pointRadius: 10,
        fillColor: "#ffcc66",
        fillOpacity: 0,
        strokeColor: "#ff9933",
        strokeWidth: 2,
        graphicZIndex: 1
    "select": new OpenLayers.Style(
        fillColor: "#66ccff",
        strokeColor: "#3399ff",
        graphicZIndex: 2

// Create a vector layer and give it your style map.
var points = new OpenLayers.Layer.Vector("Points", {
    styleMap: myStyles,
    rendererOptions: {zIndexing: true}


// Register the function for the animatio
var interval = window.setInterval(function(){

var animate = function(feature)
    feature.data.size += 1;

    feature.style = {
        pointRadius: feature.data.size,  // I will change only the size of the feature
        fillColor: "#ffcc66",
        fillOpacity: 0,
        strokeColor: "#ff9933",
        strokeWidth: 2,
        graphicZIndex: 1


    if(feature.data.size == 30){

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.