8b733c2eba
With bootstrap js always included there is no need to add own js to dismiss it. Only generate the notice for experimental pages, no need to have js for that.
273 lines
13 KiB
HTML
273 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<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>
|
|
<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">
|
|
<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.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://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
{{{ extraHead.local }}}
|
|
{{{ css.tag }}}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
|
|
<title>{{ title }}</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"> 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">
|
|
|
|
<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>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
|
</div>
|
|
|
|
{{#if ./experimental}}
|
|
<div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert">
|
|
<button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
This example uses features that are not part of the stable API and subject to change between releases. Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a>
|
|
to see what is supported in the latest release.
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="row-fluid">
|
|
<a href="" class="codepen-button float-right"><i class="fa fa-codepen fa-lg"></i> Edit</a>
|
|
<div class="span12">
|
|
<h4 id="title">
|
|
{{ title }}
|
|
</h4>
|
|
<p class="tags">
|
|
{{#each tags}}
|
|
<span class="badge-group">
|
|
<a
|
|
href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a
|
|
><a
|
|
class="badge badge-info tag-modal-toggle text-white"
|
|
data-toggle="modal"
|
|
data-target="#tag-example-list"
|
|
data-title="{{ ./tag }}"
|
|
data-content="{{#each ./examples}}
|
|
<a class="list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}" href="./{{ ./link }}">{{escape ./title}}</a>{{/each}}"
|
|
tabindex="0"
|
|
>{{ ./examples.length }}</a>
|
|
</span>
|
|
{{/each}}
|
|
</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>
|
|
{{{ contents }}}
|
|
</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">{{ shortdesc }}</p>
|
|
<div id="docs">{{ md docs }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="source-controls">
|
|
<button class="copy-button btn btn-link" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
|
|
</div>
|
|
<pre><legend>main.js</legend><hr /><code id="example-js-source" class="language-js">import 'ol/ol.css';
|
|
{{ js.source }}</code></pre>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="source-controls">
|
|
<button class="copy-button btn btn-link" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
|
|
</div>
|
|
<pre><legend>index.html</legend><hr /><code id="example-html-source" class="language-markup"><!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{{ title }}</title>
|
|
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/@openlayers/pepjs"></script>{{#if extraHead.remote}}
|
|
{{ indent extraHead.remote spaces=4 }}{{/if}}
|
|
<style>
|
|
.map {
|
|
width: 100%;
|
|
height:400px;
|
|
}
|
|
{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}} </style>
|
|
</head>
|
|
<body>
|
|
{{ indent contents spaces=4 }} <script src="main.js"></script>
|
|
</body>
|
|
</html></code></pre>
|
|
</div>
|
|
|
|
{{#if worker.source}}
|
|
<div class="row-fluid">
|
|
<div class="source-controls">
|
|
<button class="copy-button btn btn-link" id="copy-worker-button" data-clipboard-target="#example-worker-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
|
|
</div>
|
|
<pre><legend>worker.js</legend><hr /><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="row-fluid">
|
|
<div class="source-controls">
|
|
<button class="copy-button btn btn-link" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button>
|
|
</div>
|
|
<pre><legend>package.json</legend><hr /><code id="example-pkg-source" class="language-js">{{ pkgJson }}</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/common.js"></script>
|
|
<script src="./resources/prism/prism.min.js"></script>
|
|
{{{ js.tag }}}
|
|
<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]) && '{{ olVersion }}' != 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>
|