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

Add overviewmap-custom example, complex use case

Browse Source
This commit is contained in:
Alexandre Dubé
2014-10-09 10:10:47 -04:00
parent f17bb1a852
commit efbeba3bb9
2 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
examples/overviewmap-custom.html Normal file
View File

@@ -0,0 +1,77 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style type="text/css">
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
top: 0;
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button{
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
.ol-rotate {
top: 170px;
right: 0;
}
</style>
<title>ol3 OverviewMap control with advanced customization example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<h4 id="title">OverviewMap control, advanced</h4>
<div id="map" class="map"></div>
<div class="row-fluid">
<p id="shortdesc">Example of OverviewMap control with advanced customization.</p>
<div id="docs">
<p>See the <a href="overviewmap-custom.js" target="_blank">overviewmap-custom.js source</a> to see how this is done.</p>
<p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p>
</div>
<div id="tags">overview, overviewmap</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=overviewmap-custom" type="text/javascript"></script>
</body>
</html>