Openlayers - LayerRedraw() / Feature rotation / Linestring coords

Question

TLDR: I have an Openlayers map with a layer called 'track' I want to remove track and add track back in. Or figure out how to plot a triangle based off one set of coords & a heading(see below).

I have an image 'imageFeature' on a layer that rotates on load to the direction being set. I want it to update this rotation that is set in 'styleMap' on a layer called 'tracking'.

I set the var 'stylemap' to apply the external image & rotation.
The 'imageFeature' is added to the layer at the coords specified.
'imageFeature' is removed.
'imageFeature' is added again in its new location. Rotation is not applied..

As the 'styleMap' applies to the layer I think that I have to remove the layer and add it again rather than just the 'imageFeature'

Layer:

var tracking = new OpenLayers.Layer.GML("Tracking", "coordinates.json", {
  format: OpenLayers.Format.GeoJSON,
  styleMap: styleMap
});

styleMap:

var styleMap = new OpenLayers.StyleMap({
  fillOpacity: 1,
  pointRadius: 10,
  rotation: heading,
});

Now wrapped in a timed function the imageFeature:

map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
  new OpenLayers.Geometry.Point(longitude, latitude), {
    rotation: heading,
    type: parseInt(Math.random() * 3)
  }
));

Type refers to a lookup of 1 of 3 images.:

styleMap.addUniqueValueRules("default", "type", lookup);

var lookup = {
  0: {
    externalGraphic: "Image1.png",
    rotation: heading
  },
  1: {
    externalGraphic: "Image2.png",
    rotation: heading
  },
  2: {
    externalGraphic: "Image3.png",
    rotation: heading
  }
}

I have tried the 'redraw()' function: but it returns "tracking is undefined" or "map.layers[2]" is undefined.

tracking.redraw(true);
map.layers[2].redraw(true);

Heading is a variable: from a JSON feed.

var heading = 13.542;

But so far can't get anything to work it will only rotate the image onload. The image will move in coordinates as it should though.

So what am I doing wrong with the redraw function or how can I get this image to rotate live?

Thanks in advance

-Ozaki

Add: I managed to get

 map.layers[2].redraw(true);

to sucessfully redraw layer 2. But it still does not update the rotation. I am thinking because the stylemap is updating. But it runs through the style map every n sec, but no updates to rotation and the variable for heading is updating correctly if i put a watch on it in firebug.

If I were to draw a triangle with an array of points & linestring. How would I go about facing the triangle towards the heading. I have the Lon/lat of one point and the heading.

var points = new Array(
  new OpenLayers.Geometry.Point(lon1, lat1),
  new OpenLayers.Geometry.Point(lon2, lat2),
  new OpenLayers.Geometry.Point(lon3, lat3)
);

var line = new OpenLayers.Geometry.LineString(points);

Looking for any way to solve this problem Image or Line anyone know how to do either added a 100rep bounty I am really stuck with this.

//From getJSON request//
var heading = data.RawHeading;

Adding and removing the imageFeature

If I were to programatically draw a triangle. How would I go about doing this? I have one Lat/Lon coordinates and the Heading. How would I programatically plot the triangle to face the heading? — Sphvn
See Above: Even in re-adding the feature rather than defining it as imageFeature I have even tried redefining the entire feature which adds it and moves it perfectly fine. But NO rotation... I tried defining in the Featre.Vector and the Geometry.point.. Still no luck. — Sphvn

Sphvn Sphvn · Accepted Answer · 2010-05-26T02:16:50

Solved the problem as follows:

            var styleMap = new OpenLayers.StyleMap({
                fillOpacity: 1,
                pointRadius: 10,
                rotation: "${angle}",
            });

           var lookup = {
                0: { externalGraphic: "Image1.png", rotation: "${angle}" },
                1: { externalGraphic: "Image2.png", rotation: "${angle}" },
                2: { externalGraphic: "Image3.png", rotation: "${angle}" }
            }
 styleMap.addUniqueValueRules("default", "type", lookup);

 map.layers[3].addFeatures(new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lon, lat), {"angle": dir, type: parseInt(Math.random() * 3)}
        ), {"angle": dir});

then the request:

var dir = (function () {
                $.ajax({
                    'async': false,
                    'global': true,
                    'url': urldefault,
                    'dataType': "json",
                    'success': function (data) {
                        dir = data.Heading
                    }
                });
                return dir;
            })();

Problem solved. Works perfectly.

Openlayers - LayerRedraw() / Feature rotation / Linestring coords

3 Answers