From ea346a785dc1b3f7c156f6fc33da634e1f1a627b Mon Sep 17 00:00:00 2001 From: Chris Schlaeger Date: Tue, 12 Aug 2014 21:56:44 +0200 Subject: Adding jquery, flot and openlayers to be included with the GEM. --- misc/openlayers/examples/bootstrap.html | 81 +++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 misc/openlayers/examples/bootstrap.html (limited to 'misc/openlayers/examples/bootstrap.html') diff --git a/misc/openlayers/examples/bootstrap.html b/misc/openlayers/examples/bootstrap.html new file mode 100644 index 0000000..7f3b78b --- /dev/null +++ b/misc/openlayers/examples/bootstrap.html @@ -0,0 +1,81 @@ + + + + Bootstraped OpenLayers + + + + + + + +
+
+
+
+
+
+

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>
+    img.olTileImage {
+        max-width: none;
+    }
+</style>
+
+
+
+ + + + -- cgit v1.2.3