diff options
| author | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
|---|---|---|
| committer | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
| commit | ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch) | |
| tree | af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/bootstrap.html | |
| parent | 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff) | |
| download | postrunner-fb1989bda5d3e0a5472ba7644d57cae197733a8f.zip | |
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/bootstrap.html')
| -rw-r--r-- | misc/openlayers/examples/bootstrap.html | 81 |
1 files changed, 81 insertions, 0 deletions
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 @@ +<!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). + </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="../lib/OpenLayers.js"></script> + <script src="bootstrap.js"></script> +</body> +</html> |