1

I am trying to draw a circle on a map, using OpenLayers 3, but I am not sure why the circle is not rendering. My expectations with the code below is that is should be centering on -73.5971431341708, 45.5323780468158 (Montreal, Canada) and drawing a circle at that location, with a radius of 1000m.

Below is the code:

var baseLayer = new ol.layer.Tile({
                    source: new ol.source.OSM()
                });

var layer = new ol.layer.Vector({
    source: vectorSource,
    style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    })]
});

/* Example of a low poly circle */
var features = [];
var circle = new ol.geom.Circle([-73.5971431341708, 45.5323780468158], 1000);
circle = circle.clone().transform('EPSG:4326', 'EPSG:3857');;
var precisionCircle = ol.geom.Polygon.circular(
    /* WGS84 Sphere */
    new ol.Sphere(6378137),
    circle.getCenter(),
    circle.getRadius(),
    /* Number of verticies */
    64);

features.push(new ol.Feature({ geometry: precisionCircle }));
var vectorSource = new ol.source.Vector({
    features: features
});

var layer2 = new ol.layer.Vector({
    source: vectorSource,
    style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 0.1)'
        })
    })]
});
var map = new ol.Map({
    layers: [baseLayer, layer2],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([-73.5971431341708, 45.5323780468158], 'EPSG:4326', 'EPSG:3857'),
        zoom: 14,
    }),
    units: 'm'
});

I also have a JSFiddle.

2
var baseLayer = new ol.layer.Tile({
                    source: new ol.source.OSM()
                });

var circle = new ol.geom.Circle(ol.proj.transform([-73.5971431341708, 45.5323780468158], 'EPSG:4326', 'EPSG:3857'), 1000);

var CircleFeature = new ol.Feature(circle);


var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326',
});

vectorSource.addFeatures([CircleFeature]);


var layer = new ol.layer.Vector({
    source: vectorSource,
    style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    })]
});




var map = new ol.Map({
    layers: [baseLayer, layer],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([-73.5971431341708, 45.5323780468158], 'EPSG:4326', 'EPSG:3857'),
        zoom: 14        
    }),
    units: 'm'
});

ol.geom.Circle creates a circle on a plane in EPSG:3857, while ol.geom.Polygon.circular approximates a circle on the surface of a sphere (in this case it only has 64 vertices so not a great approximation). For a circle of 1000m radius theres not a lot of point in using ol.geom.Polygon.circular (maybe if you're near the poles) unless you intend to export the polygon. If you do want to use ol.geom.Polygon.circular then creating a circle first is entirely redundant as the center and radius can be set directly. Then you just need to get your projections right, by transforming the polygon from 'EPSG:4326' to 'EPSG:3857'

var baseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

precisionCircle = ol.geom.Polygon.circular(
        /* WGS84 Sphere */
        new ol.Sphere(6378137),
        [-73.5971431341708, 45.5323780468158],
        1000,
        /* Number of verticies */
        64).transform('EPSG:4326', 'EPSG:3857');
precisionCircleFeature = new ol.Feature(precisionCircle)
vectorSource = new ol.source.Vector();
vectorSource.addFeature(precisionCircleFeature);
 layer = new ol.layer.Vector({
    source: vectorSource,
    style: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 3
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.1)'
            })
        })]
});



 map = new ol.Map({
    layers: [baseLayer, layer],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([-73.5971431341708, 45.5323780468158], 'EPSG:4326', 'EPSG:3857'),
        zoom: 14
    }),
    units: 'm'
});
  • Welcome! Please add a little explanation to your answer. Code is good, but having the additional context of what was wrong and why is better. – MaryBeth Apr 3 '16 at 1:02
  • The main difference I see is you use 'ol.geom.Circle' directly as the feature instead of using 'ol.geom.Polygon.circular', which doesn't fit with other examples I have seen. So while this does work, I need to be sure I understand if this will have any unintended limitations, given this difference. Also, the projection at the vector layer seems redundant. An explanation would be appreciated. – Andre M Apr 3 '16 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.