78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
<!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>
|