Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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 :
http://mstrackweb.mobil-i.com

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.
http://mstrackweb.mobil-i.com
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)
        clearInterval(interval);
    else{
        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')
            ),icon.clone()));
        idx++;
    }
},2000);

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?

share|improve this question

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...

share|improve this answer
    
I want only java script code to show traveled route of vehicle as animation but in i2maps it use python code! –  taher Aug 9 '12 at 18:38

To show all the features of a vector layer:

map.zoomToExtent(layer.getDataExtent())

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}
});

points.addFeatures(features);
map.addLayers([points]);

// Register the function for the animatio
var interval = window.setInterval(function(){
    animate(features[0]);
},80);


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
    };

   feature.layer.redraw();

    if(feature.data.size == 30){
        console.info(interval);
        window.clearInterval(interval);
    }
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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