Draw a polygon with Maptiler and OpenLayers

293 Views Asked by At

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);

0

There are 0 best solutions below