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

Update to bootstrap 5.2

Browse Source
This commit is contained in:
Maximilian Krög
2022-08-16 20:58:31 +02:00
parent 559712f728
commit bc9a6f230c
20 changed files with 181 additions and 175 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/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> <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
</div> </div>
<?js if (doc.classdesc) { ?> <?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 } ?> <?js } ?>
</div> </div>
</header> </header>

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

@@ -9,8 +9,8 @@ var version = obj.packageInfo.version;
<script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script> <script src="scripts/prettify/lang-css.js"></script>
<script src="scripts/jquery.min.js"></script> <script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.bundle.min.js"></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://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/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/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/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="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"> <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head> </head>
<body> <body>
<div class="container-fluid"> <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
<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>
<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"> <!-- menu items that get hidden below 768px width -->
<span class="navbar-toggler-icon"></span> <nav class="collapse navbar-collapse" id="olmenu">
</button> <ul class="navbar-nav ms-auto">
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <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> <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-right" aria-labelledby="docdropdown"> <div class="dropdown-menu dropdown-menu-end" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/doc/">Docs</a> <a class="dropdown-item" href="/doc/">Docs</a>
<div class="dropdown-divider"></div> <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/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 mr-2 fa-lg"></i>FAQ</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 mr-2 fa-lg"></i>Tutorials</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 mr-2 fa-lg"></i>Workshop</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> <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> </div>
</li> </li>
<li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></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"> <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> <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-right" aria-labelledby="codedropdown"> <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 mr-2 fa-lg"></i>Repository</a> <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 mr-2 fa-lg"></i>Download</a> <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div> </div>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="container-fluid">
<div id="wrap" class="row"> <div id="wrap" class="row">
<div class="navigation col-md-4 col-lg-3"> <div class="navigation col-md-4 col-lg-3">
<div class="search-wrapper"> <div class="search-wrapper">
@@ -80,17 +80,17 @@ var version = obj.packageInfo.version;
</div> </div>
<div class="main col-md-8 col-lg-9"> <div class="main col-md-8 col-lg-9">
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1> <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"> <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 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>. 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> </div>
<?js= content ?> <?js= content ?>
</div> </div>
</div> </div>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/main.js"></script>
</div> </div>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/main.js"></script>
</body> </body>
</html> </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() ?>"> <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="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= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
</span><?js </span><?js
listContent(item, 'Members', printListItem); listContent(item, 'Members', printListItem);

6
examples/button-title.html
View File

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

4
examples/draw-features.html
View File

@@ -12,12 +12,12 @@ tags: "draw, edit, freehand, vector"
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form class="form-inline">
<label for="type">Geometry type: &nbsp;</label> <label for="type">Geometry type: &nbsp;</label>
<select class="form-control mr-2 mb-2 mt-2" id="type"> <select class="form-control me-2 mb-2 mt-2" id="type">
<option value="Point">Point</option> <option value="Point">Point</option>
<option value="LineString">LineString</option> <option value="LineString">LineString</option>
<option value="Polygon">Polygon</option> <option value="Polygon">Polygon</option>
<option value="Circle">Circle</option> <option value="Circle">Circle</option>
<option value="None">None</option> <option value="None">None</option>
</select> </select>
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo"> <input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form> </form>

4
examples/draw-shapes.html
View File

@@ -16,12 +16,12 @@ tags: "draw, edit, freehand, vector"
<div id="map" class="map"></div> <div id="map" class="map"></div>
<form class="form-inline"> <form class="form-inline">
<label for="type">Shape type: &nbsp;</label> <label for="type">Shape type: &nbsp;</label>
<select class="form-control mr-2 mb-2 mt-2" id="type"> <select class="form-control me-2 mb-2 mt-2" id="type">
<option value="Circle">Circle</option> <option value="Circle">Circle</option>
<option value="Square">Square</option> <option value="Square">Square</option>
<option value="Box">Box</option> <option value="Box">Box</option>
<option value="Star">Star</option> <option value="Star">Star</option>
<option value="None">None</option> <option value="None">None</option>
</select> </select>
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo"> <input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form> </form>

2
examples/export-map.html
View File

@@ -6,7 +6,7 @@ docs: >
Example of exporting a map as a PNG image. Example of exporting a map as a PNG image.
tags: "export, png, openstreetmap" tags: "export, png, openstreetmap"
resources: 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/fontawesome.min.css
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
--- ---

4
examples/geographic.html
View File

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

2
examples/geolocation-orientation.html
View File

@@ -10,7 +10,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mobile Geolocation Tracking with Orientation</title> <title>Mobile Geolocation Tracking with Orientation</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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/ol.css">
<link rel="stylesheet" type="text/css" href="./theme/site.css"> <link rel="stylesheet" type="text/css" href="./theme/site.css">
<style> <style>

4
examples/icon.html
View File

@@ -7,7 +7,7 @@ docs: >
tags: "vector, style, icon, marker, popup" tags: "vector, style, icon, marker, popup"
resources: resources:
- https://code.jquery.com/jquery-3.5.1.min.js - https://code.jquery.com/jquery-3.5.1.min.js
- 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://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js - 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> <div id="map" class="map"><div id="popup"></div></div>

46
examples/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>OpenLayers Examples</title> <title>OpenLayers Examples</title>
<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/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/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/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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
@@ -42,11 +42,9 @@
</style> </style>
</head> </head>
<body> <body>
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
<header class="navbar navbar-expand-md 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>
<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-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<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> <span class="navbar-toggler-icon"></span>
</button> </button>
@@ -54,35 +52,33 @@
<nav class="collapse navbar-collapse" id="olmenu"> <nav class="collapse navbar-collapse" id="olmenu">
<form class="form-inline" role="search"> <form class="form-inline" role="search">
<div class="input-group"> <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> <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>
<span class="input-group-text text-white bg-transparent" id="count"></span>
</div>
</div> </div>
</form> </form>
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item dropdown"> <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> <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-right mb-3" aria-labelledby="docdropdown"> <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/doc/">Docs</a> <a class="dropdown-item" href="/doc/">Docs</a>
<div class="dropdown-divider"></div> <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/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 mr-2 fa-lg"></i>FAQ</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 mr-2 fa-lg"></i>Tutorials</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 mr-2 fa-lg"></i>Workshop</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> <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> </div>
</li> </li>
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></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"> <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> <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-right mb-3" aria-labelledby="codedropdown"> <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 mr-2 fa-lg"></i>Repository</a> <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 mr-2 fa-lg"></i>Download</a> <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div> </div>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
@@ -102,7 +98,7 @@
</div> </div>
</div> </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.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>
<script type="text/javascript" src="resources/Jugl.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="examples-info.js"></script>
<script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="index.js"></script>

2
examples/index.js
View File

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

4
examples/kml-earthquakes.html
View File

@@ -7,7 +7,7 @@ docs: >
tags: "KML, vector, style, tooltip" tags: "KML, vector, style, tooltip"
resources: resources:
- https://code.jquery.com/jquery-3.5.1.min.js - https://code.jquery.com/jquery-3.5.1.min.js
- 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://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js - 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>

4
examples/kml-timezones.html
View File

@@ -8,7 +8,7 @@ docs: >
tags: "KML, vector, style" tags: "KML, vector, style"
resources: resources:
- https://code.jquery.com/jquery-3.5.1.min.js - https://code.jquery.com/jquery-3.5.1.min.js
- 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://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js - 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>

6
examples/overlay.html
View File

@@ -3,12 +3,12 @@ layout: example.html
title: Overlay title: Overlay
shortdesc: Demonstrates overlays. shortdesc: Demonstrates overlays.
docs: > 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" tags: "overlay, popup, bootstrap, popover"
resources: resources:
- https://code.jquery.com/jquery-3.5.1.min.js - https://code.jquery.com/jquery-3.5.1.min.js
- 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://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div style="display: none;"> <div style="display: none;">

73
examples/templates/example.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>{{ title }}</title> <title>{{ title }}</title>
<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/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/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/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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
@@ -17,86 +17,87 @@
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" /> <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
</head> </head>
<body> <body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation"> <header class="navbar navbar-expand-md navbar-dark mb-3 px-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> <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-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- menu items that get hidden below 768px width --> <!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu"> <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"> <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> <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-right mb-3" aria-labelledby="docdropdown"> <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/doc/">Docs</a> <a class="dropdown-item" href="/doc/">Docs</a>
<div class="dropdown-divider"></div> <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/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 mr-2 fa-lg"></i>FAQ</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 mr-2 fa-lg"></i>Tutorials</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 mr-2 fa-lg"></i>Workshop</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> <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> </div>
</li> </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="../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="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
<li class="nav-item dropdown"> <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> <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-right mb-3" aria-labelledby="codedropdown"> <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 mr-2 fa-lg"></i>Repository</a> <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 mr-2 fa-lg"></i>Download</a> <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div> </div>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="container-fluid line-numbers"> <div class="container-fluid line-numbers">
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none"> <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>. 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> </div>
{{#if ./experimental}} {{#if ./experimental}}
<div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert"> <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> <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="https://openlayers.org/en/latest/apidoc/">API documentation</a> 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. to see what is supported in the latest release.
</div> </div>
{{/if}} {{/if}}
<div class="row-fluid"> <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 <i class="fab fa-codepen fa-lg"></i> Edit
</a> </a>
<div class="span12"> <div class="span12">
<h4 id="title">{{ title }}</h4> <h4 id="title">{{ title }}</h4>
<p class="tags"> <p class="tags">
{{#each tags}} {{#each tags}}
<span class="badge-group"> <span class="badge-group">
<a <a
href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a
><a ><a
class="badge badge-info tag-modal-toggle text-white" class="badge badge-info tag-modal-toggle"
data-toggle="modal" data-bs-toggle="modal"
data-target="#tag-example-list" data-bs-target="#tag-example-list"
data-title="{{ ./tag }}" data-title="{{ ./tag }}"
data-content="{{#each ./examples}} data-content="&lt;ul class=&quot;list-group&quot;&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}}" {{#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" tabindex="0"
>{{ ./examples.length }}</a> >{{ ./examples.length }}</a>
</span> </span>
{{/each}} {{/each}}
</p> </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 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-dialog modal-dialog-scrollable" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="tag-example-title"></h5> <h5 class="modal-title" id="tag-example-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="list-group"></div> <div class="list-group"></div>
@@ -166,7 +167,7 @@
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script> <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://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}} {{#each js.local}}
<script src="{{{ . }}}"></script> <script src="{{{ . }}}"></script>
{{/each}} {{/each}}

74
site/layouts/default.hbs
View File

@@ -2,15 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>OpenLayers - {{ title }}</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>OpenLayers - {{ title }}</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<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/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/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/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> <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://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/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/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/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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
@@ -18,61 +18,63 @@
<link rel="stylesheet" type="text/css" href="/theme/site.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-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)" /> <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
{{#each head}} {{#each head}}
{{{ this }}} {{{ this }}}
{{/each}} {{/each}}
</head> </head>
<body> <body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation"> <header class="navbar navbar-expand-md navbar-dark mb-3 px-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> <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-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- menu items that get hidden below 768px width --> <!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu"> <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"> <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> <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-right mb-3" aria-labelledby="docdropdown"> <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/doc/">Docs</a> <a class="dropdown-item" href="/doc/">Docs</a>
<div class="dropdown-divider"></div> <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/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 mr-2 fa-lg"></i>FAQ</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 mr-2 fa-lg"></i>Tutorials</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 mr-2 fa-lg"></i>Workshop</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> <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> </div>
</li> </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/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"> <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> <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-right mb-3" aria-labelledby="codedropdown"> <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 mr-2 fa-lg"></i>Repository</a> <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 mr-2 fa-lg"></i>Download</a> <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
</div> </div>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
{{#if uncontained}}
{{#if uncontained}}
{{{ contents }}}
{{else}}
<div class="container">
{{{ contents }}} {{{ contents }}}
{{else}} </div>
<div class="container"> {{/if}}
{{{ contents }}}
</div>
{{/if}}
<footer> <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> <br>
<a href="https://www.netlify.com"> <a href="https://www.netlify.com">This site is powered by Netlify.</a>
This site is powered by Netlify.
</a>
</footer> </footer>
<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 scripts}} {{#each scripts}}
{{{this}}} {{{this}}}
{{/each}} {{/each}}
</body> </body>
</html> </html>

2
site/src/index.hbs
View File

@@ -7,7 +7,7 @@ head:
--- ---
<div id='map'></div> <div id='map'></div>
<div class='container'> <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> <p>A high-performance, feature-packed library for all your mapping needs.</p>
</blockquote> </blockquote>
<div class='row' id='news'> <div class='row' id='news'>

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

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