Search code examples
javascriptopenlayers-3geoserver

Why does OpenLayers-3 load too much map?

I am trying to load a map from my geoserver in a webpage, when it loads it almost doubles itself. The first map is a preview from the geoserver admin page, the second is how it loads it when pulled up on a webpage.

correct!

wrong!

Solution

  • I ended up figuring it out by adding some properties into the layers here is my code:

    mapInit: function() {         
          var _this = this;

          this.map = new ol.Map({
            target: 'mapdiv', //element to render in
            interactions: ol.interaction.defaults({
                shiftDragZoom: false,
                altShiftDragRotate: false,
                dragPan: false
            }),
            controls: ol.control.defaults({ 
                attributionOptions: ({ 
                    collapsible: true 
                })
            }).extend([ new ol.control.ScaleLine() ]),
            renderer: 'canvas',
            layers: [
                     new ol.layer.Tile({
                         source: new ol.source.TileWMS({
                             url: 'http://***.**.**.***:8080/geoserver/Global/wms',
                             params: {'LAYERS': 'Global Map', 'TILED': true},
                             noWrap: true, //<----added this
                             wrapX: false  //<----added this
                         }),
                         //constrain the extent of the servable tiles to only 1 world's coordinates.
                         extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34] //<----added this
                     }) 
                     ],