OpenLayers 4 Draw circle on map. Circle radius in meters and Map using latitude and longitude

Question

I'm not sure why, but the resources available is seems very specific to each scenario and won't help some one else or for a different version.

What I'm trying to do is this: https://openlayers.org/en/latest/examples/custom-circle-render.html. But the example does not seem to work. Further to this, I'd like to draw a circle where the point is specified in degrees(EPSG:4326) and the radius in meters. My map's projection is also EPSG:4326. I have ended up trying to simplify to the following:

    var vectorSource = new ol.source.Vector();
    var map = new ol.Map({
        target: document.getElementById('map'),
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [0, 0],
            zoom: 5
        }),
        layers: [
            new ol.layer.Tile({
                projection: 'EPSG:4326',
                source: new ol.source.OSM()
            }),
            new ol.layer.Vector({
                projection: 'EPSG:4326',
                source: vectorSource,
            }),
        ],
    });

function MapAddRadius() {
        var circle = new ol.geom.Circle(
            ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
            10
        );
        var circleFeature = new ol.Feature(circle);
        vectorSource.addFeature(circleFeature);
    }

This does draw a circle, but it is not the correct size. This leads me to believe that I'm using the wrong projection as the size does correlate to degrees instead of meters. Or there are functions I am unaware of that makes this easier. I know that precision could be an issue, but I'm drawing small circles, like less than 1km, so I'm not too worried about it.

Please point me in the right direction.

What do you mean by the example does not seem to work? It works for me (at least I get the same result as in the documentation) — geocodezip
– geocodezip, Commented Aug 29, 2021 at 16:36
Are you trying to do something like this (draws two circles, one the native ol.geom.Circle with a radius of 4000, the other a circular polygon with a radius of 4000 meters) — geocodezip
– geocodezip, Commented Aug 29, 2021 at 16:41
@geocodezip It will not work with OpenLayers 4, there was a condition missing the code which handled the custom rendering github.com/openlayers/openlayers/pull/11838/… — Mike
– Mike, Commented Aug 29, 2021 at 18:09
@geocodezip Thanks, should have been a hint, but it turns out that it did not work as I was using an older version. It's weird, but NuGet packages only has up until V4. I had to manually update the version. — F34R
– F34R, Commented Aug 31, 2021 at 4:45

Mike · Accepted Answer · 2021-08-30 10:15:13Z

3

ol.geom.Circle requires coordinates and radius to be in the same units, and all geometry must be in the view projection. The custom renderer used in the example is specific to Circle geometry and due to an omission in earlier versions will only work with OpenLayers 6. If you must have a Circle geometry in EPSG:4326 view and radius in meters try

    var circle = new ol.geom.Circle(
        ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
        radius
    ).transform('EPSG:3857', 'EPSG:4326');

or

    var circle = new ol.geom.Circle(
        [lon, lat],
        radius / ol.proj.getPointResolution('EPSG:4326', 1, [lon, lat], 'm')
    )

The second method will scale the radius to approximate to true distance on the ground at northern and southern latitudes.

answered Aug 30, 2021 at 10:15

Mike

18.2k2 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

F34R Over a year ago

Yip, Version issue. Thanks so much! It's weird, but NuGet packages only has up until V4. I had to manually update the version.

Collectives™ on Stack Overflow

OpenLayers 4 Draw circle on map. Circle radius in meters and Map using latitude and longitude

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related