[OpenLayers-Users] Markers with dymamically changing appearance

[Sveen Atle Frenvik (Geomatikk IKT)]

Regarding the first question:

i did something like this in order to create a rectangle of a given 
pixel size centered on a coordinate on the map (to make a print tool).. 
the relevant code parts are:

first i set up some choices for paper sizes

  //the available paper sizes
     papers: {
         "a4_landscape":{

             width: 3507,
             height: 2481,
             box: "landscape"
         },
         "a4_portrait": {
             name: "A4 St\345ende",
             width: 2481,
             height: 3507,
             box: "portrait",
             selected: true
         },
         "a3_landscape":{
             name: "A3 Liggende",
             width: 4962,
             height: 3507,
             box: "landscape"
         },
         "a3_portrait": {
             name: "A3 St\345ende",
             width: 3507,
             height: 4962,
             box: "portrait"
         }
     },

     sizes: {
         "portrait": {
             width: 496,
             height: 700
         },
         "landscape": {
             width: 700,
             height: 496
         }
     },

then i start off with setting the paper, which finds the width and 
height based on the given paper (this could probably be simplified a 
lot, not finished yet), finds the map center and gets the pixel value 
for that, and then either creates or moves the polygon

    setPaper: function(paper) {
         this.paper = paper;

         //get the boxSize
         this.boxSize = {};
         this.boxSize.width = this.sizes[this.papers[this.paper].box].width;
         this.boxSize.height = 
this.sizes[this.papers[this.paper].box].height;

         //find the center pixel for the box
         var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());

         //create or move the polygon to the center of the map
         if (!this.feature) {
             this.addPolygon(this.paper, centerPx);
         }
         else {
             this.lastCenter = this.feature.geometry.getCentroid();
             this.addPolygon(this.paper, centerPx);
             this.movePolygon();
         }
     },

    //add the print area polygon
     addPolygon: function(paper, centerPx) {
         //remove previous feature
         this.mylayer.destroyFeatures();

         //calculate the extent of the box
         var addX = this.boxSize.width / 2;
         var addY = this.boxSize.height / 2;

         var center = this.map.getLonLatFromPixel(new 
OpenLayers.Pixel(centerPx.x,centerPx.y));
         var leftBottom = this.map.getLonLatFromPixel(new 
OpenLayers.Pixel(centerPx.x-addX, centerPx.y+addY));
         var rightTop = this.map.getLonLatFromPixel(new 
OpenLayers.Pixel(centerPx.x+addX, centerPx.y-addY));

         //create the polygon, the feature and add to the layer
         var poly = new OpenLayers.Geometry.Polygon(
                 new OpenLayers.Geometry.LinearRing([
                     new OpenLayers.Geometry.Point(leftBottom.lon, 
leftBottom.lat),
                     new OpenLayers.Geometry.Point(leftBottom.lon, 
rightTop.lat),
                     new OpenLayers.Geometry.Point(rightTop.lon, 
rightTop.lat),
                     new OpenLayers.Geometry.Point(rightTop.lon, 
leftBottom.lat)
                 ])
                 );
         this.feature = new OpenLayers.Feature.Vector(poly);
         this.mylayer.addFeatures([this.feature]);
     },

     movePolygon: function() {
         var pixel = this.map.getPixelFromLonLat(new 
OpenLayers.LonLat(this.lastCenter.x, this.lastCenter.y));
         var lastPixel = this.map.getPixelFromLonLat(this.map.getCenter());

         var res = this.map.getResolution();

         this.feature.geometry.move(res * (pixel.x - lastPixel.x),
                 res * (lastPixel.y - pixel.y));
         this.mylayer.drawFeature(this.feature);
     },

and then a listener for zoomend this.map.events.register("zoomend", 
this, this.scaleChanged);

which calls:

     //scale of map changed
     scaleChanged: function() {
         var centerPx = this.map.getPixelFromLonLat(this.map.getCenter());
         this.addPolygon(this.paper, centerPx);
     },

to redraw the polygon


hope this helps somewhat

-atle

On 08/11/2010 10:00 AM, Bart van den Eijnden (OSGIS) wrote:
> Hi,
>
> please always cc the list, since I don't know all the answers and people
> with similar issues can find it in the e-mail archives later on.
>
> Your first question: I don't know.
>
> Redrawing can be done using:
>
> feature.layer.drawFeature(feature);
>
> http://dev.openlayers.org/docs/files/OpenLayers/Layer/Vector-js.html#OpenLayers.Layer.Vector.drawFeature
>
> Best regards,
> Bart
>
>    
>> On Aug 11, 2010, at 0:16 , Bart van den Eijnden (OSGIS) wrote:
>>
>>      
>>> please check out:
>>>
>>> http://docs.openlayers.org/library/feature_styling.html
>>>
>>> Labels can be drawn as well with vector features, see e.g.:
>>>
>>> http://openlayers.org/dev/examples/vector-features-with-text.html
>>>        
>> Thanks.
>>
>> Two more questions:
>>
>> - how do I draw in screen coordinates (I need to draw a polygon starting
>> from a latlong, then draw 2em up and to the right etc), and have it stay
>> the same size on-screen when the user zooms (ie make markers)?
>> - how do I redraw these things? Just erase them and draw new ones, or do I
>> replace their graphics properties?
>>      
>
>    


-- 
Atle Frenvik Sveen
Utvikler
Geomatikk IKT AS
tlf: 45 27 86 89
atle.frenvik.sveen at geomatikk.no

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100811/9c728ad7/attachment.html