externalGraphic rotation in a vector layer

[Chander Ganesan-3]

Hi,

Give some advice by crschmidt on #openlayers, I tried to apply the patch
specified in ticket #1433 to my installation of OpenLayer, and then
tried to create a point with an externalGraphic and rotation angle.  
Unfortunately, this doesn't seem to work.  Here's the code that I used:

map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "Metacarta Basic Layer",
                                             "http://labs.metacarta.com/wms/vmap0",
                                             {layers: 'basic'} );
ol_wms.maxExtent = new OpenLayers.Bounds(-125, 17.84, -59, 52.55);
ol_wms.displayOutsideMaxExtent = true;
var planes=new OpenLayers.Layer.Vector("Planes",
             {
             styleMap: new OpenLayers.StyleMap({
                        "default": {
                                     externalGraphic: "airplane.gif",
                                     graphicWidth: 24,
                                     graphicHeight: 28,
                                     graphicYOffset: 0,
                                     rotation: "${angle}",
                                     fillOpacity: "${opacity}"
                                    }
                        })
             });

var extent = planes.map.getExtent();
var yspan = extent.getHeight();
var xspan = extent.getWidth();
var x = extent.left + xspan * Math.random();
var y = extent.top - yspan * Math.random();
var planeangle = Math.floor(Math.random() * 360);
var feature=new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(x, y), {"angle": planeangle,
                                                                                 opacity: 100 });
map.addLayers([ ol_wms , planes ]);
map.zoomToMaxExtent();


This code causes the layer to draw with the US map underneath, and the
plane image to appear on the layer, but the image is not rotated.  Any
ideas/thoughts?

thanks

chander
_______________________________________________
Users mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/users

[Andreas Hocevar]

Hey,

your code does not seem correct. At the time you request the extent,
there is no extent yet. And you do not add the feature to the layer. The
following code works for me (tested on FF2, IE6, IE7, Opera9 and Safari3
with both png and gif images):

map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "Metacarta Basic Layer",
                                             
"http://labs.metacarta.com/wms/vmap0",
                                             {layers: 'basic'} );
ol_wms.maxExtent = new OpenLayers.Bounds(-125, 17.84, -59, 52.55);
ol_wms.displayOutsideMaxExtent = true;
var planes=new OpenLayers.Layer.Vector("Planes",
             {
             styleMap: new OpenLayers.StyleMap({
                        "default": {
                                     externalGraphic: "../img/marker.png",
                                     graphicWidth: 24,
                                     graphicHeight: 28,
                                     graphicYOffset: 0,
                                     rotation: "${angle}",
                                     fillOpacity: "${opacity}"
                                    }
                        })
             });

map.addLayers([ ol_wms , planes ]);
map.zoomToMaxExtent();

var extent = planes.map.getExtent();
var yspan = extent.getHeight();
var xspan = extent.getWidth();
var x = extent.left + xspan * Math.random();
var y = extent.top - yspan * Math.random();
var planeangle = Math.floor(Math.random() * 360);
var feature=new OpenLayers.Feature.Vector(
    new OpenLayers.Geometry.Point(x, y), {
        "angle": planeangle,
        opacity: 100
    });
planes.addFeatures([feature]);


Regards,
Andreas.

Chander Ganesan wrote:

> Hi,
>
> Give some advice by crschmidt on #openlayers, I tried to apply the patch
> specified in ticket #1433 to my installation of OpenLayer, and then
> tried to create a point with an externalGraphic and rotation angle.  
> Unfortunately, this doesn't seem to work.  Here's the code that I used:
>
> map = new OpenLayers.Map('map');
> var ol_wms = new OpenLayers.Layer.WMS( "Metacarta Basic Layer",
>                                              "http://labs.metacarta.com/wms/vmap0",
>                                              {layers: 'basic'} );
> ol_wms.maxExtent = new OpenLayers.Bounds(-125, 17.84, -59, 52.55);
> ol_wms.displayOutsideMaxExtent = true;
> var planes=new OpenLayers.Layer.Vector("Planes",
>              {
>              styleMap: new OpenLayers.StyleMap({
>                         "default": {
>                                      externalGraphic: "airplane.gif",
>                                      graphicWidth: 24,
>                                      graphicHeight: 28,
>                                      graphicYOffset: 0,
>                                      rotation: "${angle}",
>                                      fillOpacity: "${opacity}"
>                                     }
>                         })
>              });
>
> var extent = planes.map.getExtent();
> var yspan = extent.getHeight();
> var xspan = extent.getWidth();
> var x = extent.left + xspan * Math.random();
> var y = extent.top - yspan * Math.random();
> var planeangle = Math.floor(Math.random() * 360);
> var feature=new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(x, y), {"angle": planeangle,
>                                                                                  opacity: 100 });
> map.addLayers([ ol_wms , planes ]);
> map.zoomToMaxExtent();
>
>
> This code causes the layer to draw with the US map underneath, and the
> plane image to appear on the layer, but the image is not rotated.  Any
> ideas/thoughts?
>
> thanks
>
> chander
> _______________________________________________
> Users mailing list
> [hidden email]
> http://openlayers.org/mailman/listinfo/users
>  

_______________________________________________
Users mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/users

[Chander Ganesan-2]

Andreas Hocevar wrote:
 > your code does not seem correct. At the time you request the extent,
 > there is no extent yet. And you do not add the feature to the layer.
 > The following code works for me (tested on FF2, IE6, IE7, Opera9 and
 > Safari3 with both png and gif images):

Thanks!  I had copied the code below from a much larger script, and
apparently copied the order of different components wrong (hence the
errors you noticed).

It turns out, I had applied the patch against the 2.6 release, and not
against trunk.  As a result it didn't work.  Once I reapplied against
trunk it worked like a charm...

I'm actually wondering if my little demo might be a good thing for the
gallery...

It's here:

http://www.otg-nc.com/csc/index1.html   -- This one draws planes and
"moves" them over time across the base layer.  This requires the patch...

And another one that might be a good demo is:

http://www.otg-nc.com/csc/index.html  -- This one takes
5,10,15,20,25,30,35,40, and 45 minute NEXRAD weather imagery (over the
US) and cycles through the layers to give the impression of a "moving
weather" map.  This works with OL 2.6 .

However, I have two ongoing issues that I cannot figure out:

1.  When "switching" the NEXRAD layers, the image appears to "blink".
When I use the CIA factbook base layer, this behavior seems to
disappear.  Note, when I switch layers I enable the new layer, then
disable the old layer (not vice-versa).

2.  On the http://www.otg-nc.com/csc/index1.html example, if you click
on a plane you'll see some feature information displayed in a popup.
However, in some cases, you'll notice the angle of the plane gets messed
up until its redrawn.

Any ideas on how to fix these?

Kudos to you on the patch Andreas!

thanks

chander


> Hey,
>

> map = new OpenLayers.Map('map');
> var ol_wms = new OpenLayers.Layer.WMS( "Metacarta Basic Layer",
>                                            
> "http://labs.metacarta.com/wms/vmap0",
>                                             {layers: 'basic'} );
> ol_wms.maxExtent = new OpenLayers.Bounds(-125, 17.84, -59, 52.55);
> ol_wms.displayOutsideMaxExtent = true;
> var planes=new OpenLayers.Layer.Vector("Planes",
>             {
>             styleMap: new OpenLayers.StyleMap({
>                        "default": {
>                                     externalGraphic: "../img/marker.png",
>                                     graphicWidth: 24,
>                                     graphicHeight: 28,
>                                     graphicYOffset: 0,
>                                     rotation: "${angle}",
>                                     fillOpacity: "${opacity}"
>                                    }
>                        })
>             });
>
> map.addLayers([ ol_wms , planes ]);
> map.zoomToMaxExtent();
>
> var extent = planes.map.getExtent();
> var yspan = extent.getHeight();
> var xspan = extent.getWidth();
> var x = extent.left + xspan * Math.random();
> var y = extent.top - yspan * Math.random();
> var planeangle = Math.floor(Math.random() * 360);
> var feature=new OpenLayers.Feature.Vector(
>    new OpenLayers.Geometry.Point(x, y), {
>        "angle": planeangle,
>        opacity: 100
>    });
> planes.addFeatures([feature]);
>
>
> Regards,
> Andreas.
>
> Chander Ganesan wrote:
>> Hi,
>>
>> Give some advice by crschmidt on #openlayers, I tried to apply the
>> patch specified in ticket #1433 to my installation of OpenLayer, and
>> then tried to create a point with an externalGraphic and rotation
>> angle.  Unfortunately, this doesn't seem to work.  Here's the code
>> that I used:
>>
>> map = new OpenLayers.Map('map');
>> var ol_wms = new OpenLayers.Layer.WMS( "Metacarta Basic Layer",
>>                                              
>> "http://labs.metacarta.com/wms/vmap0",
>>                                              {layers: 'basic'} );
>> ol_wms.maxExtent = new OpenLayers.Bounds(-125, 17.84, -59, 52.55);
>> ol_wms.displayOutsideMaxExtent = true;
>> var planes=new OpenLayers.Layer.Vector("Planes",
>>              {
>>              styleMap: new OpenLayers.StyleMap({
>>                         "default": {
>>                                      externalGraphic: "airplane.gif",
>>                                      graphicWidth: 24,
>>                                      graphicHeight: 28,
>>                                      graphicYOffset: 0,
>>                                      rotation: "${angle}",
>>                                      fillOpacity: "${opacity}"
>>                                     }
>>                         })
>>              });
>>
>> var extent = planes.map.getExtent();
>> var yspan = extent.getHeight();
>> var xspan = extent.getWidth();
>> var x = extent.left + xspan * Math.random();
>> var y = extent.top - yspan * Math.random();
>> var planeangle = Math.floor(Math.random() * 360);
>> var feature=new OpenLayers.Feature.Vector( new
>> OpenLayers.Geometry.Point(x, y), {"angle": planeangle,
>>                                                                                  
>> opacity: 100 });
>> map.addLayers([ ol_wms , planes ]);
>> map.zoomToMaxExtent();
>>
>>
>> This code causes the layer to draw with the US map underneath, and
>> the plane image to appear on the layer, but the image is not
>> rotated.  Any ideas/thoughts?
>>
>> thanks
>>
>> chander
>> _______________________________________________
>> Users mailing list
>> [hidden email]
>> http://openlayers.org/mailman/listinfo/users
>>  
>

--
Chander Ganesan
Open Technology Group, Inc.
One Copley Parkway, Suite 210
Morrisville, NC  27560
919-463-0999/877-258-8987
http://www.otg-nc.com


_______________________________________________
Users mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/users