1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstraped OpenLayers</title>
<link rel="stylesheet" href="openlayers/theme/default/style.css">
<link href="bootstrap/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).
</p>
<pre><code>img {
max-width: 100%;
}
</code></pre>
<p>
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:
</p>
<pre><code><style>
img.olTileImage {
max-width: none;
}
</style></code></pre>
</div>
</div>
</div>
<script src="openlayers/OpenLayers.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
|
