ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
gh-pages
openlayers/vectortile/examples/overviewmap-custom.html
Andreas Hocevar 1c53a46d7d Update vectortiles
2015-09-13 15:36:23 +09:00

232 lines
7.9 KiB
HTML
Raw Permalink Blame History

<!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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<link rel="stylesheet" href="overviewmap-custom.css">
<link rel="stylesheet" href="overviewmap-custom.css">
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>OverviewMap control example advanced</title>
</head>
<body>
<header class="navbar" role="navigation">
<div class="container" id="navbar-inner-container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">OverviewMap control example advanced</h4>
<p id="shortdesc">Example of OverviewMap control with advanced customization.</p>
<div id="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>
</div>
<div id="tags">overview, overviewmap</div>
<div id="api-links">Related API documentation: <ul class="inline"><li><a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a></li>,<li><a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a></li>,<li><a href="../apidoc/ol.control.html" title="API documentation for ol.control">ol.control</a></li>,<li><a href="../apidoc/ol.control.OverviewMap.html" title="API documentation for ol.control.OverviewMap">ol.control.OverviewMap</a></li>,<li><a href="../apidoc/ol.interaction.html" title="API documentation for ol.interaction">ol.interaction</a></li>,<li><a href="../apidoc/ol.interaction.DragRotateAndZoom.html" title="API documentation for ol.interaction.DragRotateAndZoom">ol.interaction.DragRotateAndZoom</a></li>,<li><a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a></li>,<li><a href="../apidoc/ol.source.OSM.html" title="API documentation for ol.source.OSM">ol.source.OSM</a></li></ul></div>
</div>
</div>
<div class="row-fluid">
<div id="source-controls">
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
</div>
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<textarea class="hidden" name="js">var overviewMapControl = new ol.control.OverviewMap({
// see in overviewmap-custom.html to see the custom CSS used
className: &#x27;ol-overviewmap ol-custom-overviewmap&#x27;,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
&#x27;url&#x27;: &#x27;http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png&#x27;
})
})
],
collapseLabel: &#x27;\u00BB&#x27;,
label: &#x27;\u00AB&#x27;,
collapsed: false
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
overviewMapControl
]),
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: &#x27;map&#x27;,
view: new ol.View({
center: [500000, 6000000],
zoom: 7
})
});
</textarea>
<textarea class="hidden" name="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;
}
</textarea>
<textarea class="hidden" name="html">&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</textarea>
<input type="hidden" name="wrap" value="l">
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v3.9.0/css/ol.css,http://openlayers.org/en/v3.9.0/build/ol.js">
</form>
<pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;OverviewMap control example advanced&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css"&gt;
&lt;script src="http://openlayers.org/en/v3.9.0/build/ol.js"&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;overviewmap-custom.css&quot;&gt;
&lt;style&gt;
.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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container-fluid"&gt;
&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
var overviewMapControl = new ol.control.OverviewMap({
// see in overviewmap-custom.html to see the custom CSS used
className: &#x27;ol-overviewmap ol-custom-overviewmap&#x27;,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
&#x27;url&#x27;: &#x27;http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png&#x27;
})
})
],
collapseLabel: &#x27;\u00BB&#x27;,
label: &#x27;\u00AB&#x27;,
collapsed: false
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
overviewMapControl
]),
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: &#x27;map&#x27;,
view: new ol.View({
center: [500000, 6000000],
zoom: 7
})
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="./resources/common.js"></script>
<script src="./resources/prism/prism.min.js"></script>
<script src="loader.js?id=overviewmap-custom"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink