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

Merge pull request #13996 from MoonE/bootstrap-5

Browse Source 
Update to bootstrap 5.2
This commit is contained in:
MoonE
2022-08-22 19:31:23 +02:00
committed by GitHub
parent 547ec358a1 ebfee35a78
commit 62914bb3df
59 changed files with 493 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
config/jsdoc/api/template/static/scripts/bootstrap.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
config/jsdoc/api/template/static/scripts/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
config/jsdoc/api/template/static/scripts/jquery.min.map
View File

File diff suppressed because one or more lines are too long

2
config/jsdoc/api/template/tmpl/container.tmpl
View File

@@ -46,7 +46,7 @@
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
</div>
<?js if (doc.classdesc) { ?>
<div class="class-description col-lg-7 align-self-center pl-0"><?js= doc.classdesc ?></div>
<div class="class-description col-lg-7 align-self-center ps-0"><?js= doc.classdesc ?></div>
<?js } ?>
</div>
</header>

78
config/jsdoc/api/template/tmpl/layout.tmpl
View File

@@ -4,13 +4,13 @@ var version = obj.packageInfo.version;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
@@ -21,42 +21,42 @@ var version = obj.packageInfo.version;
<link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>
<body>
<div class="container-fluid">
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<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="navbar-nav ml-auto">
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<ul class="navbar-nav ms-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" aria-labelledby="docdropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-end" 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>
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
<li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-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" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab 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>
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div>
</li>
</ul>
</nav>
</header>
</li>
</ul>
</nav>
</header>
<div class="container-fluid">
<div id="wrap" class="row">
<div class="navigation col-md-4 col-lg-3">
<div class="search-wrapper">
@@ -80,17 +80,17 @@ var version = obj.packageInfo.version;
</div>
<div class="main col-md-8 col-lg-9">
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
<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">&times;</span></button>
This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
</div>
<?js= content ?>
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
<button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
</div>
<?js= content ?>
</div>
</div>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/main.js"></script>
</div>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

2
config/jsdoc/api/template/tmpl/navigation.tmpl
View File

@@ -49,7 +49,7 @@ function listContent(item, title, listItemPrinter) {
} ?>
<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
<span class="title toggle">
<span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
<span class="fa <?js= getItemCssClass(item.type) ?> me-2 mt-1"></span>
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
</span><?js
listContent(item, 'Members', printListItem);

5
examples/.eslintrc
View File

@@ -2,14 +2,15 @@
"globals": {
"$": false,
"arc": false,
"common": false,
"bootstrap": false,
"chroma": false,
"common": false,
"createMapboxStreetsV6Style": false,
"d3": false,
"html2canvas": false,
"geojsonvt": false,
"gifler": false,
"GyroNorm": false,
"html2canvas": false,
"jspdf": false,
"jsts": false,
"JSZip": false,

3
examples/button-title.css
View File

@@ -1,3 +0,0 @@
.tooltip-inner {
white-space: nowrap;
}

7
examples/button-title.html
View File

@@ -3,12 +3,11 @@ layout: example.html
title: Custom Tooltips
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
docs: >
This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/components/tooltips/">Bootstrap</a>.
This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/5.2/components/tooltips/">Bootstrap</a>.
For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
tags: "custom, tooltip"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
---
<div id="map" class="map"></div>

15
examples/button-title.js
View File

@@ -17,11 +17,10 @@ const map = new Map({
}),
});
$('.ol-zoom-in, .ol-zoom-out').tooltip({
placement: 'right',
container: '#map',
});
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
placement: 'left',
container: '#map',
});
document
.querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
.forEach(function (el) {
new bootstrap.Tooltip(el, {
container: '#map',
});
});

33
examples/cartodb.html
View File

@@ -5,22 +5,21 @@ shortdesc: Example of a cartodb map.
docs: >
A simple example with an anonymous cartodb map
tags: "simple, openstreetmap, attribution"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div>
<form class="form-horizontal">
<label>
Show countries larger than
<select id="country-area" class="form-control">
<option value="0" default>0 ㎢</option>
<option value="5000">5000 ㎢</option>
<option value="10000">10000 ㎢</option>
<option value="50000">50000 ㎢</option>
<option value="100000">100000 ㎢</option>
</select>
</label>
</form>
<div id="map" class="map"></div>
<form class="row">
<div class="col-auto">
<div class="input-group">
<label for="country-area" class="input-group-text">Show european countries larger than</label>
<select id="country-area" class="form-select">
<option value="0" default>0 ㎢</option>
<option value="5000">5000 ㎢</option>
<option value="10000">10000 ㎢</option>
<option value="50000">50000 ㎢</option>
<option value="100000">100000 ㎢</option>
</select>
</div>
</div>
</div>
</form>

2
examples/chaikin.html
View File

@@ -12,7 +12,7 @@ docs: >
tags: "smooth, smoothing, chaikin"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="shall-smoothen">Smooth drawn geometry?</label>
<input id="shall-smoothen" type="checkbox" checked><br>
<label for="iterations">Number of smoothings</label>

10
examples/cluster.html
View File

@@ -5,19 +5,21 @@ shortdesc: Example of using ol/source/Cluster.
docs: >
This example shows how to do clustering on point features.
tags: "cluster, vector"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form>
<div class="form-group">
<label for="distance" class="col-form-label">Cluster distance</label>
<input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
<label for="distance" class="col-form-label pb-0">Cluster distance</label>
<input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
<small class="form-text text-muted">
The distance within which features will be clustered together.
</small>
</div>
<div class="form-group">
<label for="min-distance" class="col-form-label">Minimum distance</label>
<input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
<label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
<input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
<small class="form-text text-muted">
The minimum distance between clusters. Can't be larger than the configured distance.
</small>

2
examples/draw-and-modify-features.html
View File

@@ -7,7 +7,7 @@ docs: >
tags: "draw, edit, modify, vector, featureoverlay"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>

2
examples/draw-and-modify-geodesic.html
View File

@@ -13,7 +13,7 @@ docs: >
tags: "draw, edit, modify, vector, circle, sphere, geodesic"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>

28
examples/draw-features.html
View File

@@ -8,16 +8,22 @@ docs: >
point. To activate freehand drawing for lines, polygons, and circles, hold
the `Shift` key. To remove the last point of a line or polygon, press "Undo".
tags: "draw, edit, freehand, vector"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form class="form-inline">
<label for="type">Geometry type: &nbsp;</label>
<select class="form-control mr-2 mb-2 mt-2" id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">None</option>
</select>
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form>
<div class="row">
<div class="col-auto">
<span class="input-group">
<label class="input-group-text" for="type">Geometry type:</label>
<select class="form-select" id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">None</option>
</select>
<input class="form-control" type="button" value="Undo" id="undo">
</span>
</div>
</div>

2
examples/draw-freehand.html
View File

@@ -11,7 +11,7 @@ docs: >
tags: "draw, edit, freehand, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="LineString">LineString</option>

28
examples/draw-shapes.html
View File

@@ -12,16 +12,22 @@ docs: >
circle. Star drawing uses a custom geometry function that converts a circle
into a star using the center and radius provided by the draw interaction.
tags: "draw, edit, freehand, vector"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form class="form-inline">
<label for="type">Shape type: &nbsp;</label>
<select class="form-control mr-2 mb-2 mt-2" id="type">
<option value="Circle">Circle</option>
<option value="Square">Square</option>
<option value="Box">Box</option>
<option value="Star">Star</option>
<option value="None">None</option>
</select>
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form>
<div class="row">
<div class="col-auto">
<span class="input-group">
<label class="input-group-text" for="type">Shape type:</label>
<select class="form-select" id="type">
<option value="Circle">Circle</option>
<option value="Square">Square</option>
<option value="Box">Box</option>
<option value="Star">Star</option>
<option value="None">None</option>
</select>
<input class="form-control" type="button" value="Undo" id="undo">
</span>
</div>
</div>

4
examples/export-map.html
View File

@@ -6,10 +6,10 @@ docs: >
Example of exporting a map as a PNG image.
tags: "export, png, openstreetmap"
resources:
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
---
<div id="map" class="map"></div>
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
<a id="export-png" class="btn btn-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
<a id="image-download" download="map.png"></a>

5
examples/geographic.html
View File

@@ -8,9 +8,8 @@ docs: >
not geographic).
tags: "geographic"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
---
<div id="map" class="map">
<div id="popup"></div>

49
examples/geographic.js
View File

@@ -36,9 +36,7 @@ const element = document.getElementById('popup');
const popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -10],
});
map.addOverlay(popup);
@@ -59,31 +57,34 @@ map.on('moveend', function () {
info.innerHTML = formatCoordinate(center);
});
let popover;
map.on('click', function (event) {
$(element).popover('dispose');
const feature = map.getFeaturesAtPixel(event.pixel)[0];
if (feature) {
const coordinate = feature.getGeometry().getCoordinates();
popup.setPosition([
coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
coordinate[1],
]);
$(element).popover({
container: element.parentElement,
html: true,
sanitize: false,
content: formatCoordinate(coordinate),
placement: 'top',
});
$(element).popover('show');
if (popover) {
popover.dispose();
popover = undefined;
}
const feature = map.getFeaturesAtPixel(event.pixel)[0];
if (!feature) {
return;
}
const coordinate = feature.getGeometry().getCoordinates();
popup.setPosition([
coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
coordinate[1],
]);
popover = new bootstrap.Popover(element, {
container: element.parentElement,
content: formatCoordinate(coordinate),
html: true,
offset: [0, 20],
placement: 'top',
sanitize: false,
});
popover.show();
});
map.on('pointermove', function (event) {
if (map.hasFeatureAtPixel(event.pixel)) {
map.getViewport().style.cursor = 'pointer';
} else {
map.getViewport().style.cursor = 'inherit';
}
const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
map.getViewport().style.cursor = type;
});

24
examples/geolocation-orientation.html
View File

@@ -4,16 +4,16 @@ title: Geolocation Tracking with Orientation
shortdesc: Example of a geolocated and oriented map.
tags: "fullscreen, geolocation, orientation, mobile"
---
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./theme/ol.css" type="text/css">
<link rel="stylesheet" href="./theme/site.css" type="text/css">
<title>Mobile Geolocation Tracking with Orientation</title>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./theme/ol.css">
<link rel="stylesheet" type="text/css" href="./theme/site.css">
<style>
html, body, .map {
margin: 0;
padding: 0;
@@ -28,23 +28,23 @@ tags: "fullscreen, geolocation, orientation, mobile"
background-color: lightgrey;
padding: 4px;
}
.button {
.geolocate-buttons {
position: absolute;
bottom: 40px;
left: 10px;
}
</style>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"></div>
<img id="geolocation_marker" src="data/geolocation_marker.png" />
<div class="button">
<button id="geolocate">Geolocate Me!</button>
<button id="simulate">Simulate</button>
<div class="geolocate-buttons">
<button id="geolocate" class="btn btn-primary">Geolocate Me!</button>
<button id="simulate" class="btn btn-secondary">Simulate</button>
</div>
<script src="common.js"></script>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script src="geolocation-orientation.js"></script>
<script src="common.js"></script>
</body>
</html>

6
examples/hit-tolerance.html
View File

@@ -12,13 +12,13 @@ tags: "hitTolerance"
---
<div id="map" class="map"></div>
<span id="status">Try to click the line in the map.</span>
<form class="form-inline">
<form>
<label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</label>
<select id="hitTolerance" class="form-control">
<select id="hitTolerance">
<option value="0" selected>0 Pixels</option>
<option value="5">5 Pixels</option>
<option value="10">10 Pixels</option>
</select>
&nbsp; Area: &nbsp;
<canvas id="circle" style="vertical-align: middle" />
<canvas id="circle" style="vertical-align: middle"></canvas>
</form>

5
examples/icon.html
View File

@@ -6,8 +6,7 @@ docs: >
Example using an icon to symbolize a point.
tags: "vector, style, icon, marker, popup"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
---
<div id="map" class="map"><div id="popup"></div></div>

31
examples/icon.js
View File

@@ -59,22 +59,29 @@ const popup = new Overlay({
});
map.addOverlay(popup);
let popover;
function disposePopover() {
if (popover) {
popover.dispose();
popover = undefined;
}
}
// display popup on click
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
popup.setPosition(evt.coordinate);
$(element).popover({
placement: 'top',
html: true,
content: feature.get('name'),
});
$(element).popover('show');
} else {
$(element).popover('dispose');
disposePopover();
if (!feature) {
return;
}
popup.setPosition(evt.coordinate);
popover = new bootstrap.Popover(element, {
placement: 'top',
html: true,
content: feature.get('name'),
});
popover.show();
});
// change mouse cursor when over marker
@@ -84,6 +91,4 @@ map.on('pointermove', function (e) {
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
// Close the popup when the map is moved
map.on('movestart', function () {
$(element).popover('dispose');
});
map.on('movestart', disposePopover);

56
examples/index.html
View File

@@ -1,9 +1,10 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<title>OpenLayers Examples</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
@@ -39,51 +40,45 @@
background-color: #f8f9fa !important;
}
</style>
<title>OpenLayers Examples</title>
</head>
<body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="/"><img class="header-logo" src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<form class="form-inline" role="search">
<form role="search">
<div class="input-group">
<input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
<div class="input-group-append">
<span class="input-group-text text-white bg-transparent" id="count"></span>
</div>
<input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
<span class="input-group-text text-white bg-transparent" id="count"></span>
</div>
</form>
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ms-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="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-end 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>
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-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"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-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="fab 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>
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div>
</li>
</li>
</ul>
</nav>
</header>
@@ -102,8 +97,7 @@
</div>
</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="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="resources/Jugl.js"></script>
<script type="text/javascript" src="examples-info.js"></script>
<script type="text/javascript" src="index.js"></script>

2
examples/index.js
View File

@@ -12,7 +12,7 @@
clone: true,
parent: target,
});
document.getElementById('count').innerHTML = ' ' + examples.length + ' ';
document.getElementById('count').innerHTML = String(examples.length);
}
let timerId;

9
examples/kml-earthquakes.html
View File

@@ -6,8 +6,9 @@ docs: >
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
tags: "KML, vector, style, tooltip"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
---
<div id="map" class="map"><div id="info"></div></div>
<div id="map" class="map">
<div id="info"></div>
</div>

33
examples/kml-earthquakes.js
View File

@@ -58,33 +58,46 @@ const map = new Map({
}),
});
const info = $('#info');
info.tooltip({
const info = document.getElementById('info');
info.style.pointerEvents = 'none';
const tooltip = new bootstrap.Tooltip(info, {
animation: false,
customClass: 'pe-none',
offset: [0, 5],
title: '-',
trigger: 'manual',
});
let currentFeature;
const displayFeatureInfo = function (pixel) {
info.css({
left: pixel[0] + 'px',
top: pixel[1] - 15 + 'px',
});
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
info.attr('data-original-title', feature.get('name')).tooltip('show');
info.style.left = pixel[0] + 'px';
info.style.top = pixel[1] + 'px';
if (feature !== currentFeature) {
tooltip.setContent({'.tooltip-inner': feature.get('name')});
}
if (currentFeature) {
tooltip.update();
} else {
tooltip.show();
}
} else {
info.tooltip('hide');
tooltip.hide();
}
currentFeature = feature;
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
info.tooltip('hide');
tooltip.hide();
currentFeature = undefined;
return;
}
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {

9
examples/kml-timezones.html
View File

@@ -7,8 +7,9 @@ docs: >
yellow with an opacity calculated based on the current offset to local noon.
tags: "KML, vector, style"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
---
<div id="map" class="map"><div id="info"></div></div>
<div id="map" class="map">
<div id="info"></div>
</div>

33
examples/kml-timezones.js
View File

@@ -82,33 +82,46 @@ const map = new Map({
}),
});
const info = $('#info');
info.tooltip({
const info = document.getElementById('info');
info.style.pointerEvents = 'none';
const tooltip = new bootstrap.Tooltip(info, {
animation: false,
customClass: 'pe-none',
offset: [0, 5],
title: '-',
trigger: 'manual',
});
let currentFeature;
const displayFeatureInfo = function (pixel) {
info.css({
left: pixel[0] + 'px',
top: pixel[1] - 15 + 'px',
});
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
info.attr('data-original-title', feature.get('name')).tooltip('show');
info.style.left = pixel[0] + 'px';
info.style.top = pixel[1] + 'px';
if (feature !== currentFeature) {
tooltip.setContent({'.tooltip-inner': feature.get('name')});
}
if (currentFeature) {
tooltip.update();
} else {
tooltip.show();
}
} else {
info.tooltip('hide');
tooltip.hide();
}
currentFeature = feature;
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
info.tooltip('hide');
tooltip.hide();
currentFeature = undefined;
return;
}
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {

10
examples/layer-extent.html
View File

@@ -10,9 +10,11 @@ tags: "extent, tilejson"
cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
value: Your Mapbox access token from https://mapbox.com/ here
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<button type="button" class="btn btn-default" id="India">India</button>
<button type="button" class="btn btn-default" id="Argentina">Argentina</button>
<button type="button" class="btn btn-default" id="Nigeria">Nigeria</button>
<button type="button" class="btn btn-default" id="Sweden">Sweden</button>
<button type="button" class="btn btn-light" id="India">India</button>
<button type="button" class="btn btn-light" id="Argentina">Argentina</button>
<button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
<button type="button" class="btn btn-light" id="Sweden">Sweden</button>

2
examples/layer-group.html
View File

@@ -6,7 +6,7 @@ docs: >
Example of a map with layer group.
tags: "tilejson, input, bind, group, layergroup"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://code.jquery.com/jquery-3.6.0.min.js
cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
value: Your Mapbox access token from https://mapbox.com/ here

2
examples/measure-style.html
View File

@@ -18,7 +18,7 @@ docs: >
tags: "draw, edit, measure, modify, style, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Measurement type &nbsp;</label>
<select id="type">
<option value="LineString">Length (LineString)</option>

2
examples/measure.html
View File

@@ -15,7 +15,7 @@ docs: >
tags: "draw, edit, measure, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Measurement type &nbsp;</label>
<select id="type">
<option value="length">Length (LineString)</option>

8
examples/mobile-full-screen.html
View File

@@ -7,14 +7,14 @@ cloak:
- key: AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN
value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
---
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mobile full screen example</title>
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style type="text/css">
<link rel="stylesheet" type="text/css" href="../theme/ol.css">
<style>
html, body, .map {
margin: 0;
padding: 0;

2
examples/modify-scale-and-rotate.html
View File

@@ -18,7 +18,7 @@ docs: >
tags: "draw, edit, modify, vector, scale, rotate"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>

9
examples/overlay.html
View File

@@ -3,12 +3,11 @@ layout: example.html
title: Overlay
shortdesc: Demonstrates overlays.
docs: >
<p>The popups are created using <a href="https://getbootstrap.com/docs/4.5/components/popovers/">Popovers</a> from Bootstrap.</p>
<p>The popups are created using <a href="https://getbootstrap.com/docs/5.2/components/popovers/">Popovers</a> from Bootstrap.</p>
tags: "overlay, popup, bootstrap, popover"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
---
<div id="map" class="map"></div>
<div style="display: none;">
@@ -16,5 +15,5 @@ resources:
<a class="overlay" id="vienna" target="_blank" href="https://en.wikipedia.org/wiki/Vienna">Vienna</a>
<div id="marker" title="Marker"></div>
<!-- Popup -->
<div id="popup" title="Welcome to OpenLayers"></div>
<div id="popup"></div>
</div>

19
examples/overlay.js
View File

@@ -43,19 +43,22 @@ const vienna = new Overlay({
});
map.addOverlay(vienna);
const element = popup.getElement();
map.on('click', function (evt) {
const element = popup.getElement();
const coordinate = evt.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
container: element,
placement: 'top',
let popover = bootstrap.Popover.getInstance(element);
if (popover) {
popover.dispose();
}
popover = new bootstrap.Popover(element, {
animation: false,
html: true,
container: element,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
html: true,
placement: 'top',
title: 'Welcome to OpenLayers',
});
$(element).popover('show');
popover.show();
});

44
examples/reprojection-by-code.html
View File

@@ -7,27 +7,31 @@ docs: >
OSM (EPSG:3857) to arbitrary projection by searching
in <a href="https://epsg.io/">EPSG.io</a> database.
tags: "reprojection, projection, proj4js, epsg.io, graticule"
resources:
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form class="form-inline">
<label for="epsg-query">Search projection:&nbsp</label>
<input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
<button id="epsg-search" class="btn">Search</button>
<span id="epsg-result"></span>
<form class="row">
<span class="col-auto">
<span class="input-group">
<label class="input-group-text" for="epsg-query">Search projection:&nbsp</label>
<input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
<button class="btn btn-outline-secondary" id="epsg-search">Search</button>
</span>
</span>
<span class="mt-2" id="epsg-result">&nbsp;</span>
</form>
<form class="form-inline">
<label for="render-edges">
Render reprojection edges:&nbsp;
<input type="checkbox" id="render-edges" />
</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="show-tiles">
Show tile coordinates:&nbsp;
<input type="checkbox" id="show-tiles" />
</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="show-graticule">
Show graticule:&nbsp;
<input type="checkbox" id="show-graticule" />
</label>
<form>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="render-edges" />
<label class="form-check-label" for="render-edges">Render reprojection edges</label><br>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="show-tiles" />
<label class="form-check-label" for="show-tiles">Show tile coordinates</label><br>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="show-graticule" />
<label class="form-check-label" for="show-graticule">Show graticule</label>
</div>
</form>

7
examples/reprojection.css
View File

@@ -1,3 +1,6 @@
.form-inline label {
justify-content: left;
.reprojection-form {
display: grid;
grid-template-columns: max-content max-content;
grid-gap: 5px;
gap: 5px;
}

67
examples/reprojection.html
View File

@@ -7,42 +7,33 @@ docs: >
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
---
<div id="map" class="map"></div>
<form class="form-inline">
<div class="col-md-3">
<label for="base-layer">Base map:</label>
<select id="base-layer">
<option value="osm">OSM (EPSG:3857)</option>
<option value="wms4326">WMS (EPSG:4326)</option>
</select>
</div>
<div class="col-md-4">
<label for="overlay-layer">Overlay map:</label>
<select id="overlay-layer">
<option value="bng">British National Grid (EPSG:27700)</option>
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
<option value="states">United States (EPSG:3857)</option>
</select>
</div>
<div class="col-md-5">
<label for="view-projection">View projection:</label>
<select id="view-projection">
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
</select>
</div>
</form>
<form class="form-inline">
<div class="col-md-auto">
<label>
Render reprojection edges:&nbsp;
<input type="checkbox" id="render-edges" />
</label>
</div>
<form class="reprojection-form">
<label for="base-layer">Base map:</label>
<select id="base-layer">
<option value="osm">OSM (EPSG:3857)</option>
<option value="wms4326">WMS (EPSG:4326)</option>
</select>
<label for="overlay-layer">Overlay map:</label>
<select id="overlay-layer">
<option value="bng">British National Grid (EPSG:27700)</option>
<option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
<option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
<option value="states">United States (EPSG:3857)</option>
</select>
<label for="view-projection">View projection:</label>
<select id="view-projection">
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
<option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
<option value="ESRI:54009">Mollweide (ESRI:54009)</option>
<option value="EPSG:27700">British National Grid (EPSG:27700)</option>
<option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
<option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
<option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
<option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
</select>
<label for="render-edges">Render reprojection edges:</label>
<span><input type="checkbox" id="render-edges" /></span>
</form>

6
examples/resources/external-map-map.html
View File

@@ -1,7 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
<meta charset="UTF-8">
<title>Map</title>
<link rel="stylesheet" type="text/css" href="../theme/ol.css">
<style>
body {
margin: 0;

4
examples/select-features.html
View File

@@ -9,9 +9,9 @@ docs: >
tags: "select, vector"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Action type &nbsp;</label>
<select id="type" class="form-control">
<select id="type">
<option value="click" selected>Click</option>
<option value="singleclick">Single-click</option>
<option value="pointermove">Hover</option>

94
examples/templates/example.html
View File

@@ -3,100 +3,101 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<title>{{ title }}</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
<link rel="stylesheet" type="text/css" href="/theme/site.css">
{{#each css.local}}
<link rel="stylesheet" href="{{{ . }}}" type="text/css">
<link rel="stylesheet" type="text/css" href="{{{ . }}}">
{{/each}}
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
<title>{{ title }}</title>
</head>
<body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a href='/' class='navbar-brand'><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="nav navbar-nav ms-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="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-end 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>
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-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="fab 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>
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div>
</li>
</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">&times;</span></button>
<button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></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}}
{{#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">&times;</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>
<button id="experimental-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
This example uses features that are not part of the stable API and subject to change between releases. Consult the <a href="/en/latest/apidoc/">API documentation</a>
to see what is supported in the latest release.
</div>
{{/if}}
{{/if}}
<div class="row-fluid">
<a href="#" id="codepen-button" class="btn btn-link float-right">
<a href="#" id="codepen-button" class="btn btn-link float-end">
<i class="fab fa-codepen fa-lg"></i> Edit
</a>
<div class="span12">
<h4 id="title">{{ title }}</h4>
<p class="tags">
{{#each 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"
class="badge badge-info tag-modal-toggle"
data-bs-toggle="modal"
data-bs-target="#tag-example-list"
data-title="{{ ./tag }}"
data-content="{{#each ./examples}}
&lt;a class=&quot;list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}&quot; href=&quot;./{{ ./link }}&quot;&gt;{{escape ./title}}&lt;/a&gt;{{/each}}"
data-content="&lt;ul class=&quot;list-group&quot;&gt;
{{#each ./examples}}
&lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}&quot; href=&quot;./{{ ./link }}&quot;&gt;{{escape ./title}}&lt;/a&gt;
{{/each}}
&lt;/ul&gt;"
tabindex="0"
>{{ ./examples.length }}</a>
</span>
{{/each}}
{{/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">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="list-group"></div>
@@ -165,8 +166,7 @@
</div>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<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="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
{{#each js.local}}
<script src="{{{ . }}}"></script>
{{/each}}
@@ -176,14 +176,12 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
<script src="./resources/common.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);
});
document.getElementById('tag-example-list')
.addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget; // Button that triggered the modal
this.querySelector('.modal-title').innerText = button.dataset.title;
this.querySelector('.modal-body').innerHTML = button.dataset.content;
});
</script>
<script>
const releaseUrl = 'https://api.github.com/repos/openlayers/openlayers/releases/latest';

2
examples/topolis.html
View File

@@ -8,7 +8,7 @@ docs: >
tags: "draw, edit, vector, topology, topolis"
resources:
- https://unpkg.com/topolis@0.2.5/dist/topolis.js
- https://code.jquery.com/jquery-3.5.1.min.js
- https://code.jquery.com/jquery-3.6.0.min.js
- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js
- https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css
---

2
examples/tracing.html
View File

@@ -12,7 +12,7 @@ docs: >
tags: "draw, trace, snap, vector, topology"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Geometry type &nbsp;</label>
<select id="type">
<option value="Polygon">Polygon</option>

4
examples/vector-esri-edit.html
View File

@@ -6,10 +6,10 @@ docs: >
This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server, edit, updateFeature, addFeature"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://code.jquery.com/jquery-3.6.0.min.js
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Draw or modify &nbsp;</label>
<select id="type">
<option value="DRAW">Draw</option>

2
examples/vector-esri.html
View File

@@ -6,7 +6,7 @@ docs: >
This example loads new features from ArcGIS REST Feature Service when the view extent changes.
tags: "vector, esri, ArcGIS, REST, Feature, Service, loading, server"
resources:
- https://code.jquery.com/jquery-3.5.1.min.js
- https://code.jquery.com/jquery-3.6.0.min.js
---
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

4
examples/vector-tile-selection.html
View File

@@ -14,9 +14,9 @@ docs: >
tags: "vector tiles, selection"
---
<div id="map" class="map"></div>
<form class="form-inline">
<form>
<label for="type">Action type &nbsp;</label>
<select id="type" class="form-control">
<select id="type">
<option value="singleselect" selected>Single Select</option>
<option value="multiselect">Multi Select</option>
<option value="singleselect-hover">Single Select on hover</option>

3
examples/webpack/example-builder.js
View File

@@ -14,8 +14,7 @@ const baseDir = dirname(fileURLToPath(import.meta.url));
const isCssRegEx = /\.css(\?.*)?$/;
const isJsRegEx = /\.js(\?.*)?$/;
const importRegEx = /\s?import .*? from '([^']+)'/g;
const isTemplateJs =
/\/(jquery(-\d+\.\d+\.\d+)?|(bootstrap(\.bundle)?))(\.min)?\.js(\?.*)?$/;
const isTemplateJs = /\/(?:bootstrap(?:\.bundle)?)(?:\.min)?\.js(?:\?.*)?$/;
const isTemplateCss =
/\/(?:bootstrap|fontawesome-free@[\d.]+\/css\/(?:fontawesome|brands|solid))(?:\.min)?\.css(?:\?.*)?$/;

87
site/layouts/default.hbs
View File

@@ -2,77 +2,78 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenLayers - {{ title }}</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>OpenLayers - {{ title }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
<link rel="stylesheet" type="text/css" href="/theme/site.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
<link rel="stylesheet" type="text/css" href="/theme/site.css">
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
{{#each head}}
{{{ this }}}
{{/each}}
{{#each head}}
{{{ this }}}
{{/each}}
</head>
<body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a href='/' class='navbar-brand'><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="nav navbar-nav ms-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="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-end 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>
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap me-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="fab 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>
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div>
</li>
</li>
</ul>
</nav>
</header>
{{#if uncontained}}
{{#if uncontained}}
{{{ contents }}}
{{else}}
<div class="container">
{{{ contents }}}
{{else}}
<div class="container">
{{{ contents }}}
</div>
{{/if}}
</div>
{{/if}}
<footer>
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>. All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>. Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
<br>
<a href="https://www.netlify.com">
This site is powered by Netlify.
</a>
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
{{#each scripts}}
{{{this}}}
{{/each}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
{{#each scripts}}
{{{this}}}
{{/each}}
</body>
</html>

1
site/src/doc/quickstart.md
View File

@@ -41,6 +41,7 @@ Open the `index.html` file in a text editor. It should look something like this
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quick Start</title>
</head>
<body>
<div id="map"></div>

6
site/src/index.hbs
View File

@@ -3,11 +3,11 @@ title: Welcome
layout: default.hbs
uncontained: true
head:
- <link rel="stylesheet" href="./theme/index.css" type="text/css">
- <link rel="stylesheet" type="text/css" href="./theme/index.css">
---
<div id='map'></div>
<div class='container'>
<blockquote id='tagline' class='text-right plain'>
<blockquote id='tagline' class='text-end plain'>
<p>A high-performance, feature-packed library for all your mapping needs.</p>
</blockquote>
<div class='row' id='news'>
@@ -101,7 +101,7 @@ head:
<li>Latest v3: <a href="https://github.com/openlayers/openlayers/releases/tag/v3.20.1">v3.20.1</a>, released 2016-12-12 &mdash; <a href="/en/v3.20.1/doc/">docs</a>, <a href="/en/v3.20.1/apidoc/">API</a> &amp; <a href="/en/v3.20.1/examples/">examples</a></li>
<li>Latest v2: v2.13.1, released 2013-07-09 &mdash; you'll find everything you need on the <a href="./two">2.x page</a></li>
</ul>
<p>Please consider upgrading to benefit of the latest features and bug fixes. Get best performance and usability for free by using recent versions of OpenLayers</p>
<p>Please consider upgrading to benefit from the latest features and bug fixes. Get better performance and usability for free by using recent versions of OpenLayers.</p>
</div>
</div>
<div class='row'>

34
site/src/theme/site.css
View File

@@ -7,11 +7,6 @@ body {
padding-top: 54px;
}
h1 {
margin-top: 30px;
margin-bottom: 20px;
}
h1,
h2,
h3,
@@ -27,6 +22,12 @@ h6,
font-weight: 700
}
h1,
.row h1 {
margin-top: 30px;
margin-bottom: 20px;
}
h1.topic {
font-size: 1.5rem;
color: var(--ol-subtle-foreground-color);
@@ -58,9 +59,7 @@ a :not(:first-child) {
}
a:hover,
a:focus,
footer a:hover,
footer a:focus {
a:focus {
color: var(--ol-brand-color);
text-decoration: underline;
}
@@ -95,6 +94,14 @@ footer a:focus {
color: var(--ol-brand-color);
}
.navbar-brand:focus,
.navbar-brand:hover,
.nav-link:focus,
.nav-link:hover {
text-decoration: none;
color: var(--ol-brand-color);
}
footer {
background-color: var(--ol-foreground-color);
color: var(--ol-background-color);
@@ -111,7 +118,7 @@ a.dropdown-item {
.dropdown-item:hover {
color: var(--ol-brand-color);
text-decoration: none;
background-color: var(--ol-background-color)
background-color: var(--ol-background-color);
}
.navbar-nav>li>a {
@@ -169,6 +176,7 @@ a.badge-info:focus,
a.badge-info:hover {
background-color: var(--ol-foreground-color);
color: var(--ol-brand-color);
text-decoration: none;
}
.tag-modal-toggle {
@@ -510,4 +518,10 @@ div.code-toolbar>.toolbar button:before {
.nameContainer .anchor:target+h4 {
background-color: inherit;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1140px;
}
}

7
test/rendering/cases/linestring-style-css-filter/index.html
View File

@@ -1,7 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="stylesheet" href="/ol/ol.css" type="text/css">
<meta charset="UTF-8">
<title>linestring-style-css-filter</title>
<link rel="stylesheet" type="text/css" href="/ol/ol.css">
<style>
html, body {
margin: 0;
@@ -25,5 +27,4 @@
<div id="map"></div>
<script src="main.js"></script>
</body>
</script>
</html>

5
test/rendering/cases/map-text-align/index.html
View File

@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map-text-align</title>
<style>
html, body {
margin: 0;
@@ -22,5 +24,4 @@
<div id="map"></div>
<script src="main.js"></script>
</body>
</script>
</html>

5
test/rendering/cases/render-context/index.html
View File

@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render-context</title>
<style>
html, body {
margin: 0;
@@ -14,5 +16,4 @@
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>
</script>
</html>

7
test/rendering/default/index.html
View File

@@ -1,7 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="stylesheet" href="/ol/ol.css" type="text/css">
<meta charset="UTF-8">
<title>default</title>
<link rel="stylesheet" type="text/css" href="/ol/ol.css">
<style>
html, body {
margin: 0;
@@ -36,5 +38,4 @@
<div id="map"></div>
<script src="main.js"></script>
</body>
</script>
</html>