From fa740a42a9371f75af50360c7910bef52325937f Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 9 Nov 2012 15:05:18 -0700 Subject: [PATCH] Making OpenLayers play well with Bootstrap Bootstrap CSS sets the max-width for images to 100%. This makes it so OpenLayers maps don't render (the layer container has 0 width, so all images are given the same). Even if our layer container had a more sensible width (e.g. 100% of the viewport), we would still have issues with tiles that are larger than the viewport. Since the OpenLayers stylesheet may be loaded before or after bootstrap.css, we should use !important when setting the max-width to none for images we control. --- examples/bootstrap.html | 77 +++++++++++++++++++++++++++++++++++++++++ examples/bootstrap.js | 31 +++++++++++++++++ theme/default/style.css | 5 +++ 3 files changed, 113 insertions(+) create mode 100644 examples/bootstrap.html create mode 100644 examples/bootstrap.js diff --git a/examples/bootstrap.html b/examples/bootstrap.html new file mode 100644 index 0000000000..7cb8a98be5 --- /dev/null +++ b/examples/bootstrap.html @@ -0,0 +1,77 @@ + + + + Bootstraped OpenLayers + + + + + + +
+
+
+ openlayers.org + +
+
+
+
+
+
+
+
+
+

OpenLayers and Bootstrap

+

+ This example demonstrates an OpenLayers map in a fluid + layout using Bootstrap CSS. +

+

+ Note that the OpenLayers stylesheet is loaded before + Bootstrap. The Bootstrap CSS sets the maximum width for + images to be 100% (of their containing element). +

img {
+    max-width: 100%;
+}
+
+ This causes problems for images that you might want to be + bigger than their containing element (e.g. big tile in small + map viewport). To overcome this, the OpenLayers CSS + overrides this max-width setting. If you are + not loading the OpenLayers default CSS or are having trouble + with tile sizing and Bootstrap, add the following to your + markup: +
<style>
+    max-width: none !important;
+</style>
+

+
+
+
+ + + + \ No newline at end of file diff --git a/examples/bootstrap.js b/examples/bootstrap.js new file mode 100644 index 0000000000..e31b0a1d7c --- /dev/null +++ b/examples/bootstrap.js @@ -0,0 +1,31 @@ +var map = new OpenLayers.Map({ + div: "map", + projection: "EPSG:900913", + layers: [ + new OpenLayers.Layer.XYZ( + "Imagery", + [ + "http://oatile1.mqcdn.com/naip/${z}/${x}/${y}.png", + "http://oatile2.mqcdn.com/naip/${z}/${x}/${y}.png", + "http://oatile3.mqcdn.com/naip/${z}/${x}/${y}.png", + "http://oatile4.mqcdn.com/naip/${z}/${x}/${y}.png" + ], + { + attribution: "Tiles Courtesy of MapQuest. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. ", + transitionEffect: "resize", + wrapDateLine: true + } + ) + ], + controls: [ + new OpenLayers.Control.Navigation({ + dragPanOptions: { + enableKinetic: true + } + }), + new OpenLayers.Control.Zoom(), + new OpenLayers.Control.Attribution() + ], + center: [0, 0], + zoom: 1 +}); diff --git a/theme/default/style.css b/theme/default/style.css index 8e0abb70f4..a681a9f269 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -482,3 +482,8 @@ a.olControlZoomOut { -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } + +/* override any max-width image settings (e.g. bootstrap.css) */ +img.olTileImage { + max-width: none !important; +}