Why is my openlayers map disappearing when I add an extent constraint?

Question

I am new to openlayers, and have tried to teach myself what I can through the tutorials.

My map works fine until I add an extent to the view. As soon as I do that, the map disappears. (zoom controls remain).

I have searched the documentation for help with this but no luck.

Here is my code:

<div id="map" class="map"></div>
      <script type="text/javascript">

        const extentNESW = [ 4422340.708467, -10578604.167351, 3169996.437043, -9735019.922400 ]
        const extentWSEN = [-9735019.922400, 3169996.437043, -10578604.167351, 4422340.708467 ]
        const centerLonLat = [ -10160621.295892, 3903791.908581 ]

        var map = new ol.Map({

          target: 'map',

          layers: [

            new ol.layer.Tile({
              
              source: new ol.source.OSM()
            
            })
          
          ],

          view: new ol.View({
            
            
            center: (centerLonLat),
            zoom: 10,
            extent: extentWSEN,

            
          })

        });


      </script>

If i remove the line with extent, the map works again. What gives?

Answer 1

It seems that your extent array has wrong order of coordinates. The order has to be:

[minX, minY, maxX, maxY]

More specifically, in your case, you have swapped minX and maxX. Replace your array with the following:

const extentWSEN = [-10578604.167351, 3169996.437043, -9735019.922400, 4422340.708467 ];