Get in touch:
01524 851 877
07718 896 553

Openlayers + Bootstrap tiles missing

Posted on Apr 19 2014 by Matthew Jakeman

I’ve just implemented a mapping system that uses openlayers for the mapping engine. I am also using twitter bootstrap to help with the CSS for the site.

Unfortunately these two together result in only half of the tiles being displayed in the map. This is down to bootstrap setting a global property for the img tag as follows:

img { max-width:100%; }

This can be overcome by overriding this setting for your map as follows (presuming your map has an id of #map)

.map img { max-width:none; }

Thanks to this blog post for pointing me in the right direction.

Leave a comment