I am having trouble finding working examples in OpenLayers 5.3 where conic sections and/or sectors can be drawn.

Does anyone have any working code or can point to the correct classes to use?

Here's some examples of shapes I am looking to draw

I am able to make a basic version of the shape by doing this (though I'm sure there's a way more efficient way):

const outer = fromCircle(new Circle(map.getView().getCenter(), myRadius), 128);
const half = Math.ceil(outer.getCoordinates()[0].length / 2);
outer.setCoordinates([outer.getCoordinates()[0].splice(0, half)]);

const inner = fromCircle(new Circle(map.getView().getCenter(), myRadius / 10), 128), 
outer.appendLinearRing(new LinearRing(inner.getCoordinates()[0]));

const myFeature = new Feature(outer);

1 Answer 1


Maps can be displayed conic projection with a graticule. Here's a demo using the French national projection http://mikenunn.16mb.com/demo/rgf93.html which if not constrained to an extent will cover all the northern hemisphere Instead of the OpenLayers graticule which only works when a projection extent is set the example uses a customised version of the ol-ext graticule http://viglino.github.io/ol-ext/

If you want to clip the output use the method described in this answer Clipping TileLayer with georeferenced polygon (clipping mask) (note that since OpenLayer version 4.6.0 ImageVector has been replaced by a vector layer with the renderMode: 'image' option set). Here's an example of the result http://mikenunn.16mb.com/demo/rgf93clipped.html

This the the code to produce a conic section (45 west to 45 east, 30 north to 75 north) polygon on a conic projection (EPSG:2154 in this case). The meridians are straight so it is only necessary to set coordinates at regularly intervals on the curved parallels to get a smooth curve effect.

var coordinates = [];
// upper parallel
for (var i=45; i>=-45; i--) {
// lower parallel
for (var i=-45; i<=45; i++) {
// close the ring
var geom = new ol.geom.Polygon([coordinates]).transform('EPSG:4326', 'EPSG:2154');

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [ new ol.Feature(geom) ]
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 4


  • Hi, thanks. I'm afraid I may have confused you by my choice of pictures, which indicate a full map. I just wanted the shapes. I want to create the shape anywhere on a map. Please see my update to the OP Commented Feb 27, 2019 at 20:02
  • The clipping polygon in the second example is such a shape.and could equally well be displayed as a normal vector mikenunn.16mb.com/demo/rgf93polygon.html
    – Mike
    Commented Feb 27, 2019 at 20:15
  • I thank you for the link, but unfortunately I'm not advanced enough to comprehend that. The source code for that page is over 600 lines of code and I'm not sure what is/is not useful to me regarding only the shapes I'm after Commented Feb 27, 2019 at 20:53
  • Most of that is the code for the ol-ext graticule. Only the final section is the map. I've updated the answer with the code to produce a polygon.
    – Mike
    Commented Feb 27, 2019 at 21:14
  • Perhaps I'm using the code wrong but the example in your answer doesn't work for me. I am already using a projection of EPSG:4326. If I run the code as is I get an error about 'destinationProjection is null' coming from getTransformFromProjection in ol. If I comment out the transform, I see a large rectangle on the map, and not a conic section. Commented Feb 28, 2019 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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