ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Port full-screen example to Bootstrap

Browse Source
This commit is contained in:
Frederic Junod
2013-03-06 14:40:31 +01:00
parent a8ec0c95a0
commit 6113ca2c59
2 changed files with 6 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/full-screen.html
+6 -39
View File
@@ -1,54 +1,21 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="style.css" type="text/css"> <title>Full-Screen example</title>
<style type="text/css"> <style type="text/css">
html, body, #map { html, body, .map {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#text {
position: absolute;
top: 8px;
right: 8px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
border-radius: 4px;
}
#geolocation {
background-color: white;
border: 1px solid #222;
border-radius: 10px 10px 10px 0;
padding: 3px;
}
@media only screen and (max-width: 600px) {
#text {
display: none;
}
}
</style> </style>
<title>Full-screen example</title>
</head> </head>
<body> <body>
<div id="map"> <div id="map" class="map"></div>
<div id="geolocation" style="display: none">you are here</div>
<div id="text">
<h1 id="title">Full-screen example</h1>
<div id="shortdesc">Example of a full-screen map.</div>
<div id="docs">
<p>See the
<a href="full-screen.js" target="_blank">full-screen.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">fullscreen, mapquest, openaerial, tile, tilelayer</div>
<script src="loader.js?id=full-screen" type="text/javascript"></script> <script src="loader.js?id=full-screen" type="text/javascript"></script>
</body> </body>
</html> </html>
examples/full-screen.js
-20
View File
@@ -1,7 +1,5 @@
goog.require('ol.AnchoredElement');
goog.require('ol.Collection'); goog.require('ol.Collection');
goog.require('ol.Coordinate'); goog.require('ol.Coordinate');
goog.require('ol.Geolocation');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.RendererHints'); goog.require('ol.RendererHints');
goog.require('ol.View2D'); goog.require('ol.View2D');
@@ -25,21 +23,3 @@ var map = new ol.Map({
zoom: 0 zoom: 0
}) })
}); });
var view2d = map.getView().getView2D();
view2d.fitExtent(view2d.getProjection().getExtent(), map.getSize());
var geolocation = new ol.Geolocation();
geolocation.bindTo('projection', map.getView());
var element = document.getElementById('geolocation');
var marker = new ol.AnchoredElement({
map: map,
element: element
});
marker.bindTo('position', geolocation);
// This is silly: gjslint generates a "No docs found for member
// 'element.style.display'" without the auto-executing function.
(function() {
element.style.display = 'block';
})();