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; +}