You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
454 lines
19 KiB
HTML
454 lines
19 KiB
HTML
2 weeks ago
|
<!DOCTYPE html>
|
||
|
<html lang="en-US">
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||
|
<script>
|
||
|
var gaProperty = 'UA-2577926-1';
|
||
|
// Disable tracking if the opt-out cookie exists.
|
||
|
var disableStr = 'ga-disable-' + gaProperty;
|
||
|
if (document.cookie.indexOf(disableStr + '=true') > -1) {
|
||
|
window[disableStr] = true;
|
||
|
}
|
||
|
function gaOptout() {
|
||
|
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||
|
window[disableStr] = true;
|
||
|
}
|
||
|
function gaOptoutRevoke() {
|
||
|
document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||
|
window[disableStr] = false;
|
||
|
}
|
||
|
</script>
|
||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
|
||
|
<script>
|
||
|
window.dataLayer = window.dataLayer || [];
|
||
|
function gtag(){dataLayer.push(arguments);}
|
||
|
gtag('js', new Date());
|
||
|
gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
|
||
|
</script>
|
||
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
|
||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
|
||
|
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
|
||
|
<script>
|
||
|
window.addEventListener("load", function() {
|
||
|
window.cookieconsent.initialise({
|
||
|
'palette': {
|
||
|
'popup': {
|
||
|
'background': '#eaf7f7',
|
||
|
'text': '#5c7291'
|
||
|
},
|
||
|
'button': {
|
||
|
'background': '#56cbdb',
|
||
|
'text': '#ffffff'
|
||
|
}
|
||
|
},
|
||
|
'theme': 'edgeless',
|
||
|
'type': 'opt-out',
|
||
|
'onInitialise': function (status) {
|
||
|
if (!this.hasConsented()) {
|
||
|
gaOptout()
|
||
|
}
|
||
|
},
|
||
|
'onStatusChange': function(status, chosenBefore) {
|
||
|
if (!this.hasConsented()) {
|
||
|
gaOptout()
|
||
|
}
|
||
|
},
|
||
|
'onRevokeChoice': function() {
|
||
|
gaOptoutRevoke()
|
||
|
}
|
||
|
})
|
||
|
});
|
||
|
</script>
|
||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
|
||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
|
||
|
<link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
|
||
|
<link rel="stylesheet" href="./css/ol.css" type="text/css">
|
||
|
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
||
|
<script src="https://unpkg.com/elm-pep"></script>
|
||
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
|
||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
|
||
|
|
||
|
<link rel="stylesheet" href="view-padding.css">
|
||
|
<title>View Padding</title>
|
||
|
</head>
|
||
|
<body>
|
||
|
|
||
|
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
|
||
|
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt=""> OpenLayers</a>
|
||
|
|
||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
<span class="navbar-toggler-icon"></span>
|
||
|
</button>
|
||
|
|
||
|
<!-- menu items that get hidden below 768px width -->
|
||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||
|
<ul class="nav navbar-nav ml-auto">
|
||
|
<li class="nav-item dropdown">
|
||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
||
|
<a class="dropdown-item" href="../doc/">Docs</a>
|
||
|
<div class="dropdown-divider"></div>
|
||
|
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
||
|
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
||
|
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
||
|
<div class="dropdown-divider"></div>
|
||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
|
||
|
</div>
|
||
|
</li>
|
||
|
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
|
||
|
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
||
|
<li class="nav-item dropdown">
|
||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
||
|
</div>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</nav>
|
||
|
</header>
|
||
|
|
||
|
<div class="container-fluid line-numbers">
|
||
|
|
||
|
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||
|
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||
|
This example uses OpenLayers v<span>6.12.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div class="row-fluid">
|
||
|
<a href="#" id="codepen-button" class="btn btn-link float-right">
|
||
|
<i class="fa fa-codepen fa-lg"></i> Edit
|
||
|
</a>
|
||
|
<div class="span12">
|
||
|
<h4 id="title">View Padding</h4>
|
||
|
<p class="tags">
|
||
|
<span class="badge-group">
|
||
|
<a
|
||
|
href="./index.html?q=center" class="badge badge-info">center</a
|
||
|
><a
|
||
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
data-toggle="modal"
|
||
|
data-target="#tag-example-list"
|
||
|
data-title="center"
|
||
|
data-content="
|
||
|
<a class="list-group-item list-group-item-action" href="./center.html">Advanced View Positioning</a>
|
||
|
<a class="list-group-item list-group-item-action active" href="./view-padding.html">View Padding</a>"
|
||
|
tabindex="0"
|
||
|
>2</a>
|
||
|
</span>
|
||
|
<span class="badge-group">
|
||
|
<a
|
||
|
href="./index.html?q=padding" class="badge badge-info">padding</a
|
||
|
><a
|
||
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
data-toggle="modal"
|
||
|
data-target="#tag-example-list"
|
||
|
data-title="padding"
|
||
|
data-content="
|
||
|
<a class="list-group-item list-group-item-action active" href="./view-padding.html">View Padding</a>"
|
||
|
tabindex="0"
|
||
|
>1</a>
|
||
|
</span>
|
||
|
<span class="badge-group">
|
||
|
<a
|
||
|
href="./index.html?q=view" class="badge badge-info">view</a
|
||
|
><a
|
||
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
data-toggle="modal"
|
||
|
data-target="#tag-example-list"
|
||
|
data-title="view"
|
||
|
data-content="
|
||
|
<a class="list-group-item list-group-item-action" href="./extent-constrained.html">Constrained Extent</a>
|
||
|
<a class="list-group-item list-group-item-action active" href="./view-padding.html">View Padding</a>"
|
||
|
tabindex="0"
|
||
|
>2</a>
|
||
|
</span>
|
||
|
<span class="badge-group">
|
||
|
<a
|
||
|
href="./index.html?q=shift" class="badge badge-info">shift</a
|
||
|
><a
|
||
|
class="badge badge-info tag-modal-toggle text-white"
|
||
|
data-toggle="modal"
|
||
|
data-target="#tag-example-list"
|
||
|
data-title="shift"
|
||
|
data-content="
|
||
|
<a class="list-group-item list-group-item-action active" href="./view-padding.html">View Padding</a>"
|
||
|
tabindex="0"
|
||
|
>1</a>
|
||
|
</span>
|
||
|
</p>
|
||
|
<div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
|
||
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||
|
<div class="modal-content">
|
||
|
<div class="modal-header">
|
||
|
<h5 class="modal-title" id="tag-example-title"></h5>
|
||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
|
<span aria-hidden="true">×</span>
|
||
|
</button>
|
||
|
</div>
|
||
|
<div class="modal-body">
|
||
|
<div class="list-group"></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="mapcontainer">
|
||
|
<div id="map" class="map"></div>
|
||
|
<div class="padding-top"></div>
|
||
|
<div class="padding-left"></div>
|
||
|
<div class="padding-right"></div>
|
||
|
<div class="padding-bottom"></div>
|
||
|
</div>
|
||
|
<button id="zoomtoswitzerland">Zoom to Switzerland</button>
|
||
|
<button id="centerlausanne">Center on Lausanne</button>
|
||
|
|
||
|
</div>
|
||
|
<form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
|
||
|
<input id="codesandbox-params" type="hidden" name="parameters">
|
||
|
</form>
|
||
|
</div>
|
||
|
|
||
|
<div class="row-fluid">
|
||
|
<div class="span12">
|
||
|
<p id="shortdesc">This example demonstrates the use of the view's padding option.</p>
|
||
|
<div id="docs"><p>This example demonstrates how a map's view can be configured to accommodate for viewport space covered by other elements. If the map viewport is partially covered with other content (overlays) along its edges, the <code>padding</code> option allows to shift the center of the viewport away from that content. The shifted viewport center will also be the anchor for zooming in and out with the Zoom controls, and for rotating. <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="row-fluid">
|
||
|
<h5 class="source-heading">main.js</h5>
|
||
|
<pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
|
||
|
import GeoJSON from 'ol/format/GeoJSON';
|
||
|
import Map from 'ol/Map';
|
||
|
import View from 'ol/View';
|
||
|
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
|
||
|
import {OSM, Vector as VectorSource} from 'ol/source';
|
||
|
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
||
|
import {fromLonLat} from 'ol/proj';
|
||
|
|
||
|
/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
|
||
|
const source = new VectorSource({
|
||
|
url: 'data/geojson/switzerland.geojson',
|
||
|
format: new GeoJSON(),
|
||
|
});
|
||
|
const style = new Style({
|
||
|
fill: new Fill({
|
||
|
color: 'rgba(255, 255, 255, 0.6)',
|
||
|
}),
|
||
|
stroke: new Stroke({
|
||
|
color: '#319FD3',
|
||
|
width: 1,
|
||
|
}),
|
||
|
image: new CircleStyle({
|
||
|
radius: 5,
|
||
|
fill: new Fill({
|
||
|
color: 'rgba(255, 255, 255, 0.6)',
|
||
|
}),
|
||
|
stroke: new Stroke({
|
||
|
color: '#319FD3',
|
||
|
width: 1,
|
||
|
}),
|
||
|
}),
|
||
|
});
|
||
|
const vectorLayer = new VectorLayer({
|
||
|
source: source,
|
||
|
style: style,
|
||
|
});
|
||
|
const view = new View({
|
||
|
center: fromLonLat([6.6339863, 46.5193823]),
|
||
|
padding: [170, 50, 30, 150],
|
||
|
zoom: 6,
|
||
|
});
|
||
|
const map = new Map({
|
||
|
layers: [
|
||
|
new TileLayer({
|
||
|
source: new OSM(),
|
||
|
}),
|
||
|
vectorLayer,
|
||
|
],
|
||
|
target: 'map',
|
||
|
view: view,
|
||
|
});
|
||
|
|
||
|
vectorLayer.getSource().on('featuresloadend', function () {
|
||
|
const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
|
||
|
zoomtoswitzerland.addEventListener(
|
||
|
'click',
|
||
|
function () {
|
||
|
const feature = source.getFeatures()[0];
|
||
|
const polygon = feature.getGeometry();
|
||
|
view.fit(polygon);
|
||
|
},
|
||
|
false
|
||
|
);
|
||
|
|
||
|
const centerlausanne = document.getElementById('centerlausanne');
|
||
|
centerlausanne.addEventListener(
|
||
|
'click',
|
||
|
function () {
|
||
|
const feature = source.getFeatures()[1];
|
||
|
const point = feature.getGeometry();
|
||
|
view.setCenter(point.getCoordinates());
|
||
|
},
|
||
|
false
|
||
|
);
|
||
|
});
|
||
|
</code></pre>
|
||
|
</div>
|
||
|
|
||
|
<div class="row-fluid">
|
||
|
<h5 class="source-heading">index.html</h5>
|
||
|
<pre><code id="example-html-source" class="language-markup"><!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<title>View Padding</title>
|
||
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
||
|
<script src="https://unpkg.com/elm-pep"></script>
|
||
|
<!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
|
||
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
|
||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
|
||
|
<style>
|
||
|
.map {
|
||
|
width: 100%;
|
||
|
height:400px;
|
||
|
}
|
||
|
.mapcontainer {
|
||
|
position: relative;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
.map {
|
||
|
width: 1000px;
|
||
|
height: 600px;
|
||
|
}
|
||
|
.map .ol-zoom {
|
||
|
top: 178px;
|
||
|
left: 158px;
|
||
|
}
|
||
|
.map .ol-rotate {
|
||
|
top: 178px;
|
||
|
right: 58px;
|
||
|
}
|
||
|
.map .ol-attribution,
|
||
|
.map .ol-attribution.ol-uncollapsible {
|
||
|
bottom: 30px;
|
||
|
right: 50px;
|
||
|
}
|
||
|
.padding-top {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0px;
|
||
|
width: 1000px;
|
||
|
height: 170px;
|
||
|
background: rgba(255, 255, 255, 0.5);
|
||
|
}
|
||
|
.padding-left {
|
||
|
position: absolute;
|
||
|
top: 170px;
|
||
|
left: 0;
|
||
|
width: 150px;
|
||
|
height: 400px;
|
||
|
background: rgba(255, 255, 255, 0.5);
|
||
|
}
|
||
|
.padding-right {
|
||
|
position: absolute;
|
||
|
top: 170px;
|
||
|
left: 950px;
|
||
|
width: 50px;
|
||
|
height: 400px;
|
||
|
background: rgba(255, 255, 255, 0.5);
|
||
|
}
|
||
|
.padding-bottom {
|
||
|
position: absolute;
|
||
|
top: 570px;
|
||
|
left: 0px;
|
||
|
width: 1000px;
|
||
|
height: 30px;
|
||
|
background: rgba(255, 255, 255, 0.5);
|
||
|
}
|
||
|
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div class="mapcontainer">
|
||
|
<div id="map" class="map"></div>
|
||
|
<div class="padding-top"></div>
|
||
|
<div class="padding-left"></div>
|
||
|
<div class="padding-right"></div>
|
||
|
<div class="padding-bottom"></div>
|
||
|
</div>
|
||
|
<button id="zoomtoswitzerland">Zoom to Switzerland</button>
|
||
|
<button id="centerlausanne">Center on Lausanne</button>
|
||
|
<script src="main.js"></script>
|
||
|
</body>
|
||
|
</html></code></pre>
|
||
|
</div>
|
||
|
|
||
|
<div class="row-fluid">
|
||
|
<h5 class="source-heading">package.json</h5>
|
||
|
<pre><code id="example-pkg-source" class="language-json">{
|
||
|
"name": "view-padding",
|
||
|
"dependencies": {
|
||
|
"ol": "6.12.0"
|
||
|
},
|
||
|
"devDependencies": {
|
||
|
"parcel": "^2.0.0"
|
||
|
},
|
||
|
"scripts": {
|
||
|
"start": "parcel index.html",
|
||
|
"build": "parcel build --public-url . index.html"
|
||
|
}
|
||
|
}</code></pre>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
||
|
<script src="./resources/prism/prism-1.20.0.min.js"></script>
|
||
|
<script src="./resources/common.js"></script>
|
||
|
<script src="common.js"></script>
|
||
|
<script src="view-padding.js"></script>
|
||
|
<script>
|
||
|
$('#tag-example-list').on('show.bs.modal', function (event) {
|
||
|
const button = $(event.relatedTarget); // Button that triggered the modal
|
||
|
const title = button.data('title');
|
||
|
const content = button.data('content');
|
||
|
const modal = $(this)
|
||
|
modal.find('.modal-title').text(title);
|
||
|
modal.find('.modal-body').html(content);
|
||
|
});
|
||
|
|
||
|
var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
|
||
|
fetch(packageUrl).then(function(response) {
|
||
|
return response.json();
|
||
|
}).then(function(json) {
|
||
|
var latestVersion = json.version;
|
||
|
document.getElementById('latest-version').innerHTML = latestVersion;
|
||
|
var url = window.location.href;
|
||
|
var branchSearch = url.match(/\/([^\/]*)\/examples\//);
|
||
|
var cookieText = 'dismissed=-' + latestVersion + '-';
|
||
|
var dismissed = document.cookie.indexOf(cookieText) != -1;
|
||
|
if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '6.12.0' != latestVersion) {
|
||
|
var link = url.replace(branchSearch[0], '/latest/examples/');
|
||
|
fetch(link, {method: 'head'}).then(function(response) {
|
||
|
var a = document.getElementById('latest-link');
|
||
|
a.href = response.status == 200 ? link : '../../latest/examples/';
|
||
|
});
|
||
|
var latestCheck = document.getElementById('latest-check');
|
||
|
latestCheck.style.display = '';
|
||
|
document.getElementById('latest-dismiss').onclick = function() {
|
||
|
latestCheck.style.display = 'none';
|
||
|
document.cookie = cookieText;
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|