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.
This commit is contained in:
Tim Schaub
77
examples/bootstrap.html
Normal file
77
examples/bootstrap.html
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Bootstraped OpenLayers</title>
|
||||||
|
<link rel="stylesheet" href="../theme/default/style.css">
|
||||||
|
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
padding-top: 60px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
#map {
|
||||||
|
height: 350px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
.olControlAttribution {
|
||||||
|
bottom: 3px;
|
||||||
|
left: 10px;
|
||||||
|
line-height: 9px;
|
||||||
|
font-size: 9px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="brand" href="/">openlayers.org</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li>
|
||||||
|
<a href="./">
|
||||||
|
<i class="icon-globe icon-white"></i> examples
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid" ng-controller="AlertsCtrl">
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span7">
|
||||||
|
<div id="map"></div>
|
||||||
|
</div>
|
||||||
|
<div class="span5">
|
||||||
|
<h4>OpenLayers and Bootstrap</h4>
|
||||||
|
<p>
|
||||||
|
This example demonstrates an OpenLayers map in a fluid
|
||||||
|
layout using Bootstrap CSS.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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).
|
||||||
|
<pre><code>img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
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 <code>max-width</code> 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:
|
||||||
|
<pre><code><style>
|
||||||
|
max-width: none !important;
|
||||||
|
</style><code></pre>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../lib/OpenLayers.js"></script>
|
||||||
|
<script src="bootstrap.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
31
examples/bootstrap.js
vendored
Normal file
31
examples/bootstrap.js
vendored
Normal file
@@ -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 <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a>. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
|
||||||
|
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
|
||||||
|
});
|
||||||
@@ -482,3 +482,8 @@ a.olControlZoomOut {
|
|||||||
-o-transition: opacity 0.2s linear;
|
-o-transition: opacity 0.2s linear;
|
||||||
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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user