Rendering polygons above the latitude 85 - 3.15.1

by Jose Gómez

HTML

<script src="https://openlayers.org/en/v3.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v3.15.1/build/ol.css">
<div id="map2d" style="width:400px;height:400px;float:left;"></div>

JavaScript

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map2d'
});
map.getView().setCenter(ol.proj.transform([-20, 85], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(2);

var geometry = new ol.geom.MultiPolygon([ 
    [ [ [-50, 82], [ 20, 82], [ 20, 81], [-50, 81], [-50, 82] ] ],
    [ [ [-50, 83], [ 20, 83], [ 20, 82], [-50, 82], [-50, 83] ] ],
    [ [ [-50, 84], [ 20, 84], [ 20, 83], [-50, 83], [-50, 84] ] ],
    [ [ [-50, 85], [ 20, 85], [ 20, 84], [-50, 84], [-50, 85] ] ],
    [ [ [-50, 86], [ 20, 86], [ 20, 85], [-50, 85], [-50, 86] ] ],
    [ [ [-50, 87], [ 20, 87], [ 20, 86], [-50, 86], [-50, 87] ] ],
  ]);

geometry.transform('EPSG:4326', 'EPSG:3857');

var vectorLayer = new ol.layer.Vector({
    map: this.map,
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: geometry
        })]
    }),
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 128, 255, 0.5)'
        })
      })
});

map.addLayer(vectorLayer);