I need to display a map with a world extension -18,-90,180,90. I want the map on the initial view to fit in the div. I tried to define the div proportionally to the map extent, but it does not work: the map displays vector before lon=-180° and after lon=180°.

I tried to define a maxExtent and restrictedExtent in the map, but it does not work (see image). How can I force the map to fit to restrictedExtent AND to the div (or what is the correct div dimension)?

The map extent is larger than restrictedExtent

Source code:

<!DOCTYPE html>
     <link rel="stylesheet" href="http://myip/geoserver/openlayers/theme/default/style.css" type="text/css">
     #map-id {width: 800px;
              height: 400px;}

   <script src="http://openlayers.org/api/OpenLayers.js"></script>

  <div id="map-id"></div>

      var extent = new OpenLayers.Bounds(-180,-90,180,90);
      var options = {restrictedExtent:extent, maxExtent:extent};

      var map = new OpenLayers.Map("map-id", options);
      var imagery = new OpenLayers.Layer.WMS(
          "Global Imagery",
           {layers: "bluemarble", isBaseLayer:false},
           {maxExtent:extent, mapResolution:'auto'}

       var lmes=new OpenLayers.Layer.WMS(
            {layers:'ocean:LME66', transparent:true, styles:'LMES_colors'},
            {isBaseLayer:false, opacity:1, singleTile:true, visibility:true, maxExtent:extent, mapResolution:'auto'}
        map.addLayers([lmes, imagery]);


2 Answers 2


I eventually understood what was the problem: by default, the WMS is configured to output a singleTile of size 512x256. If I resized my div to 512x256, then the map would fit. It would fit also with multiples (such as 1024x256).

To force the WMS to spit out a singleTile matching the div, I had to compute the minResolution and maxResolution, and pass them to the map option:

var maxResolution = 360/800.0;
var minResolution = 0.5/800.0;
var extent = new OpenLayers.Bounds(-180,-90,180,90);
var options = {restrictedExtent:extent, maxExtent:extent, wrapDateLine:false, minResolution:minResolution, maxResolution:maxResolution,controls: [new OpenLayers.Control.PanZoom()] };

This page helped me much: http://simonmercier.net/blog/?p=88 Dead link


Try out following code it may help but for that you need Jquery library included in your page.

  $(window).resize(function () {

         //$('#log').append('<div>Handler for .resize() called.</div>');

         var canvasheight=$('#map-id').parent().css('height');

         var canvaswidth=$('#map-id').parent().css('width');

         $('#map-id').css("height", canvasheight);

         $('#map-id').css("width", canvaswidth);


or check out Unable to see whole world map by decreasing panzoom bar?

  • Thanks for that. I guess my problem is related to what I read in the link you provided. Do you know how I can forbid the layer named 'lmes' (colored shapefiles in the image) to display before -180 and after 180? I suppose it would help framing the view Oct 2, 2013 at 10:39
  • @BrunovonParis Try add wrapDateLine: false in layer 'lmes' layer attributes after mapResolution:'auto' Oct 2, 2013 at 10:57
  • I've just tried: it changes nothing, the shapefile keeps on repeating... Oct 2, 2013 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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