To highlight an area on my map I need to make a circular hole in a polygon. The rectangle polygon covers the whole map, the circle hole should act as a spot on my area to highlight.

But actually I only manage to make a rectangle hole, for example using Polygon's appendLinearRing function:

mypolygon.appendLinearRing(new ol.geom.LinearRing([
    [239850, 5069850],
    [239850, 5070150],
    [240150, 5070150],
    [240150, 5069850],
    [239850, 5069850]

The problem is that I can't find out how to add "Circle" as optional geometry (opt_layout) to ol.geom.LinearRing. Any hints?


I guess you create a Circle using the ol.geom.Circle(center, opt_radius, opt_layout) contructor api doc here. And then you want to update the polygon geometry with this circle. Right???

If so you can create the coordinates of your circle and pass these coords to appendLinearRing function.

You may do that as: (I havent test. Minor bugs may exist)

var circleCenterX = 200; //the X center of your circle
var circleCenterY = 100; //the Y center of your circle
var circleRadius = 100;  //the radius of your circle
var pointsToFind = 360;  //point to generate in order to create the circle. 
//I use 360 wich is fine in terms of detail as this will make one point for each rad
//but if you need more occuracy you may suply a higher number. If less a lower number
var circleCoords = createCirclePointCoords(circleCenterX,circleCenterY,circleRadius,pointsToFind);

function createCirclePointCoords(circleCenterX,circleCenterY,circleRadius,pointsToFind){
  var angleToAdd = 360/pointsToFind;
  var coords = [];  
  var angle = 0;
    for (var i=0;i<pointsToFind;i++){
    angle = angle+angleToAdd;
    var coordX = circleCenterX + circleRadius * Math.cos(angle*Math.PI/180);
    var coordY = circleCenterY + circleRadius * Math.sin(angle*Math.PI/180);

return coords;
//check if last coordinate equals first coordinate. 
//If not add one more pair of coorinates to meet this critirion  
//and then pass these coordinates to your function  
mypolygon.appendLinearRing(new ol.geom.LinearRing([
| improve this answer | |
  • Thanks for your function, it perfectly appends a circle to the polygon. But instead of handling the circle as a hole, it is drawn above the polygon. This is strange as using the same function appendLinearRing with a rectangle, this rectangle is used as a hole as expected. Here is a jsfiddle which shows this behaviour. I additionally added the first point of the circle as the last point to close the LinearRing, but without success. – geraldo Oct 24 '15 at 11:35
  • that wasnt a real circle was a mess. my mistake. sorry for that. var coordX = circleCenterX + circleRadius * Math.cos(angle); should change to this var coordX = circleCenterX + circleRadius * Math.cos(angle*Math.PI/180); the same for the y coord. check my answer i have edit it. Math.cos returns radians that was the problem. should be fine now. – pavlos Oct 24 '15 at 13:28
  • try the above its fine. test it with your fiddle and works perfect. Also note that 360 points is too much. Using 30-40 points instead should have the same result (in terms of visual impact) and would be much more speedy – pavlos Oct 24 '15 at 14:36
  • Thanks for your correction, now everything works fine. Here an updated jsfiddle – geraldo Oct 25 '15 at 20:16

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.