8

I've added a point on map like this but it is static in size.

How to resize that point on zooming?

Map on zoom out

enter image description here

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
bios
  • 322
  • 1
  • 7
  • 16

3 Answers3

6

Resize Features Programatically using Openlayers v2.12

enter image description here

 map.addLayer(vectorLayer);
        map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
        vectorLayer.addFeatures([pointFeature, lineFeature, polygonFeature]);

    }

    var origin = new OpenLayers.Geometry.Point(-111.04, 45.68);
    function resizeFeatures(scale) {
        pointFeature.geometry.resize(scale, origin);
        lineFeature.geometry.resize(scale, origin);
        polygonFeature.geometry.resize(scale, origin);
        vectorLayer.redraw();
    }

http://dev.openlayers.org/releases/OpenLayers-2.12/examples/resize-features.html View>Source

Mapperz
  • 49,701
  • 9
  • 73
  • 132
  • please notice that the point in blue color is static in size – bios Aug 22 '12 at 14:51
  • 3
    you can force the point to not resize too that is the default - read the openlayers documentation on geometry - http://dev.openlayers.org/docs/files/OpenLayers/Geometry/Point-js.html [resize is an option] – Mapperz Aug 22 '12 at 14:59
5

The Resize, as @Mapperz mentioned is probably the way to go.

Alternatively, If you have lots of points, rather than looping through all the points resizing them, you could change the layer's pointRadius style on map zoom so the change happens to all features in one call. I can't say for sure what is better performance, but I would imagine changing the style would if there are many points.

The styling method has drawbacks such as does not have as many options as the Resize does (scale,origin,ratio), it's only a radius.

Here is a DEMO

enter image description here enter image description here

CaptDragon
  • 13,313
  • 6
  • 55
  • 96
1

You can a style which calculate point Radius depending on the Map Zoomlevel:

        // var map = my OpenLayers.Map object
        var styleSel = new OpenLayers.Style({
            pointRadius: "${radius}",
            graphicName: "circle",
            strokeColor: "#004CFF",
            strokeWidth: 2,
            fillOpacity: 0

        }, {
            context: {
                radius: function (feature) {
                    var pix = map.getZoom() * 10; // ten time the zoo level
                    return pix;
                }
            }
        });
        var styleMapSelect = new OpenLayers.StyleMap({
        "default": styleSel
        });
        var layer= new OpenLayers.Layer.Vector("myLayer", {styleMap: styleMapSelect});
David
  • 121
  • 2