1 | <!DOCTYPE html> |
---|
2 | <html> |
---|
3 | <head> |
---|
4 | <title>Bootstraped OpenLayers</title> |
---|
5 | <link rel="stylesheet" href="../theme/default/style.css"> |
---|
6 | <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet"> |
---|
7 | <style> |
---|
8 | body { |
---|
9 | padding-top: 60px; |
---|
10 | padding-bottom: 40px; |
---|
11 | } |
---|
12 | #map { |
---|
13 | height: 350px; |
---|
14 | background-color: #eee; |
---|
15 | } |
---|
16 | .olControlAttribution { |
---|
17 | bottom: 3px; |
---|
18 | left: 10px; |
---|
19 | line-height: 9px; |
---|
20 | font-size: 9px; |
---|
21 | color: #ccc; |
---|
22 | } |
---|
23 | </style> |
---|
24 | <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-responsive.min.css" rel="stylesheet"> |
---|
25 | </head> |
---|
26 | <body> |
---|
27 | <div class="navbar navbar-inverse navbar-fixed-top"> |
---|
28 | <div class="navbar-inner"> |
---|
29 | <div class="container-fluid"> |
---|
30 | <a class="brand" href="/">openlayers.org</a> |
---|
31 | <ul class="nav"> |
---|
32 | <li> |
---|
33 | <a href="./"> |
---|
34 | <i class="icon-globe icon-white"></i> examples |
---|
35 | </a> |
---|
36 | </li> |
---|
37 | </ul> |
---|
38 | </div> |
---|
39 | </div> |
---|
40 | </div> |
---|
41 | <div class="container-fluid" ng-controller="AlertsCtrl"> |
---|
42 | <div class="row-fluid"> |
---|
43 | <div class="span7"> |
---|
44 | <div id="map"></div> |
---|
45 | </div> |
---|
46 | <div class="span5"> |
---|
47 | <h4>OpenLayers and Bootstrap</h4> |
---|
48 | <p> |
---|
49 | This example demonstrates an OpenLayers map in a fluid |
---|
50 | layout using Bootstrap CSS. |
---|
51 | </p> |
---|
52 | <p> |
---|
53 | Note that the OpenLayers stylesheet is loaded before |
---|
54 | Bootstrap. The Bootstrap CSS sets the maximum width for |
---|
55 | images to be 100% (of their containing element). |
---|
56 | </p> |
---|
57 | <pre><code>img { |
---|
58 | max-width: 100%; |
---|
59 | } |
---|
60 | </code></pre> |
---|
61 | <p> |
---|
62 | This causes problems for images that you might want to be |
---|
63 | bigger than their containing element (e.g. big tile in small |
---|
64 | map viewport). To overcome this, the OpenLayers CSS |
---|
65 | overrides this <code>max-width</code> setting. If you are |
---|
66 | not loading the OpenLayers default CSS or are having trouble |
---|
67 | with tile sizing and Bootstrap, add the following to your |
---|
68 | markup: |
---|
69 | </p> |
---|
70 | <pre><code><style> |
---|
71 | img.olTileImage { |
---|
72 | max-width: none; |
---|
73 | } |
---|
74 | </style></code></pre> |
---|
75 | </div> |
---|
76 | </div> |
---|
77 | </div> |
---|
78 | <script src="../lib/OpenLayers.js"></script> |
---|
79 | <script src="bootstrap.js"></script> |
---|
80 | </body> |
---|
81 | </html> |
---|