Openlayers / Openstreetmap background is vertically striped and squished

Question

So the background of my openlayers implementation appears to be squished into vertical stripes. The weird thing is that it wasn't always like this but even when I stash all my changes back to a point where I know it was working, it still is broken. It makes me wonder if perhaps something has changed about the way the tile assets are being delivered. I have tried switching between using osm and wms layers with no change, any help would be appreciated.

Here is the pertinent code:

initMap: function() {
  var view = this;
  var map = this.map = new OpenLayers.Map();
  map.render(this.$map[0]);

  var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

  var osmLayer = new OpenLayers.Layer.OSM();

  this.layers = {
    point: new OpenLayers.Layer.Vector("Point Layer"),
    line: new OpenLayers.Layer.Vector("Line Layer"),
    polygon: new OpenLayers.Layer.Vector("Polygon Layer")
  };

  this.setValue(this.value);

  map.addLayers([this.layers.point, this.layers.line, this.layers.polygon, osmLayer]);

  drawControls = {
    point: new OpenLayers.Control.DrawFeature(this.layers.point,
      OpenLayers.Handler.Point),
    line: new OpenLayers.Control.DrawFeature(this.layers.line,
      OpenLayers.Handler.Path),
    polygon: new OpenLayers.Control.DrawFeature(this.layers.polygon,
      OpenLayers.Handler.Polygon)
  };

  this.layers[this.layerType].events.on({'sketchcomplete': function(feature) {

    if (!view.multiple) {
      // deactivate polygon layer once a polygon has been added
      drawControls[view.layerType].deactivate();
    }

  }});

  for(var key in drawControls) {
    map.addControl(drawControls[key]);
  }

  if (this.layers[this.layerType].features.length) {
    var bounds = this.layers[this.layerType].getDataExtent();
    var zoom = this.layers[this.layerType].getZoomForExtent(bounds);
    var lon = (bounds.top - bounds.bottom) / 2;
    var lat = (bounds.right - bounds.left) / 2;
    map.setCenter(new OpenLayers.LonLat(lon,lat), 3);
    map.zoomToExtent(bounds);

    if (view.multiple) {
      drawControls[view.layerType].activate();
    }

  } else {
    map.setCenter(new OpenLayers.LonLat(-11174482.03751,4861394.9982606), 4);
    drawControls[view.layerType].activate();
  }

  this.$('.clear').click(function(e) {
    e.preventDefault();
    view.layers[view.layerType].destroyFeatures();
    drawControls[view.layerType].activate();
  });
},

Here is the output:

here is the output

score 19 · Answer 1 · answered Jun 29 '12 at 22:48

19

So I found the problem. Twitter bootstrap has a line in its reset file that sets:

img { max-width: 100% }

This was squishing the images. You can fix it by doing:

img { max-width: none; }

answered Jun 29 '12 at 22:48

joshontheweb

612
1
6
18

score 7 · Answer 2 · answered Jun 29 '12 at 23:13

I was having the same problem, are you using bootstrap of twitter? 

I found out there was a selector for img elements that was affecting the map. I had the next selector into the bootstrap.css"

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

I don't know whay the parameter max-width: 100%; makes the vertical stripes in my case. I remove the propertie max-width: 100% and now is working.

score 2 · Answer 3 · answered May 08 '13 at 14:08

Setting img { max-width: 100% } to img { max-width:none; } does resolve the problem.

However this will have an unintended effect on images throughout your website. I am also using Bootstrap Twitter's carousel component for images and when I made the above changed the images did not fit in the carousel. Therefore I changed it so that it only targets the images in the OpenLayers / OpenStreetMap div.

div#outlet_map img { max-width:none; }

Openlayers / Openstreetmap background is vertically striped and squished

3 Answers3