0

I want to draw a polygon on a map (MapTiler) using Open Layers. When I only draw the map and the circle (parts 1 and 2) it looks okay. But if I add part 3 (the polygon) I only see the map. Neither the circle or the polygon are drawn on the map. I guess there is something wrong in the definition of the polygon, but I can't figure it out.

Part 3 updated in accordance with comments posted

/***********************************************************
Part 1: initializing the map
********************************************************* */

var styleJson = 'https://api.maptiler.com/maps/openstreetmap/style.json?key=MyPrivateKey';
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    constrainResolution: true,
    center: ol.proj.fromLonLat([5.8, 51.34]),
    zoom: 14
  })
});

olms.apply(map, styleJson);

/***********************************************************
Part 2: Draw a circle
********************************************************* */

var centerLongitudeLatitude = ol.proj.fromLonLat([5.8, 51.34]);
var viewProjection = map.getView().getProjection();
var pointResolution = ol.proj.getPointResolution(viewProjection, 1, centerLongitudeLatitude);
var radius = 20;

var Circle = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, radius))]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'red'
      })
    })
  ],
  zIndex: 6,
});

map.addLayer(Circle);

/***********************************************************
UPDATE
- the map is displayed, and
- the circle is drawn,
- but the polygon is still not showing.
    
Part 3: Drawing a polygon
***********************************************************/

var Line = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [new ol.Feature(new ol.geom.Polygon([
      [
        [5.81, 51.33],
        [6.93, 52.44],
        [6.93, 52.33],
        [5.81, 51.33]
      ]
    ])).transform('EPSG:4326', 'EPSG:3857')]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'black',
        width: 20
      }),
      fill: new ol.style.Fill({
        color: 'black'
      })
    })
  ],
  zIndex: 6,
});

map.addLayer(Line);
PeterJames
  • 1,137
  • 1
  • 9
  • 17
Jos R
  • 21
  • 3
  • A polygon needs at least three vertices (for a triangle) and must also form a closed ring, by ending where it started. It can also have interior rings (for holes) and even if there are no holes it needs an extra pair of `[]`. This would be a valid closed triangle with no holes `new ol.geom.Polygon([[[5.81, 51.33], [5.93, 51.44], [5.93, 51.33], [5.81, 51.33]]])` – Mike Aug 19 '22 at 15:25
  • @Mike Thanks for you reply but it did not solve the problem. I edited my previous post with your suggested code. – Jos R Aug 19 '22 at 16:47
  • If you are transforming your circle coordinate from LonLat you will also need to transform the polygon `new ol.geom.Polygon([[[5.81, 51.33], [5.93, 51.44], [5.93, 51.33], [5.81, 51.33]]]).transform('EPSG:4326', 'EPSG:3857')` – Mike Aug 19 '22 at 17:06

0 Answers0