Search code examples
javascriptgeometryzoomingopenlayers

Openlayers geometry shapes not zooming when map is zoomed


I have drawn a circle geometry with Openlayers and the circle is displayed in map but when i zoom the map the circle doesn't get zoomed and it remains in same radius getting smaller at each zoom out level

I have drawn the circle geometry as per below

var circleFeature = new ol.Feature
    ({
      geometry: new ol.geom.Circle([0, 0], 5)
    });

circleStyle = new ol.style.Style({
      image: new ol.style.Circle({
          radius: 5,
          fill: null,
          zIndex: 3,
          stroke: new ol.style.Stroke({
              color: '#FF0000',
              width: 2
          })
      })     
    });

I expect the circle (or any geometry) to get zoomed as in eg: https://openlayers.org/en/latest/examples/draw-shapes.html. But in my case it not working so


Solution

  • Style it using

     new ol.style.Style({
              fill: null,
              zIndex: 3,
              stroke: new ol.style.Stroke({
                  color: '#FF0000',
                  width: 2
              })
        });
    

    ol.style.Circle is used to style features such as points with a circular image, the radius is in pixels so doesn't change with zoom.