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

Converted examples

Browse Source
This commit is contained in:
Björn Harrtell
2015-04-02 18:40:16 +02:00
committed by Andreas Hocevar
parent b9074342a6
commit 9880a860a3
24 changed files with 497 additions and 1265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
examples_src/overviewmap-custom.html
View File

@@ -1,77 +1,14 @@
<!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>
---
template: "example.html"
title: "OverviewMap control example advanced"
shortdesc: "Example of OverviewMap control with advanced customization."
docs: >
<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>
tags: "overview, overviewmap"
resources: overviewmap-custom.css
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>