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

Build the website

Browse Source
This commit is contained in:
Tim Schaub
2022-08-08 19:57:34 -06:00
parent 3a05a73471
commit 9dff55a8ac
46 changed files with 1479 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -86,19 +86,7 @@ The [ol package](https://npmjs.com/package/ol) includes auto-generated TypeScrip
## Supported Browsers ## Supported Browsers
OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 2017](https://262.ecma-international.org/8.0/). This includes Chrome, Firefox, Safari and Edge. OpenLayers runs on all modern browsers (with greater than 1% global usage). This includes Chrome, Firefox, Safari and Edge. For older browsers, [polyfills](https://polyfill.io/) will likely need to be added.
For older browsers and platforms (Android 4.x, iOS v12 and older, Safari v12 and older), polyfills may be needed for the following browser features:
* [`fetch`](https://caniuse.com/fetch): Available from [polyfill.io](https://polyfill.io/).
* [`requestAnimationFrame`](https://caniuse.com/requestanimationframe): Available from [polyfill.io](https://polyfill.io/).
* [`element.prototype.classList` (`add`/`remove`)](https://caniuse.com/classlist): Available from [polyfill.io](https://polyfill.io/).
* [`URL` API](https://caniuse.com/url): Available from [polyfill.io](https://polyfill.io/) or [core-js](https://cdnjs.com/libraries/core-js/).
* [`TextDecoder`](https://caniuse.com/textencoder): Available from [polyfill.io](https://polyfill.io/).
* [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/) or [core-js](https://cdnjs.com/libraries/core-js/).
* [`Reflect`](https://caniuse.com/mdn-javascript_builtins_reflect): Available from [core-js](https://cdnjs.com/libraries/core-js/).
* [`Promise.allSettled`](https://caniuse.com/mdn-javascript_builtins_promise_allsettled): Available from [core-js](https://cdnjs.com/libraries/core-js/).
* [Pointer events](https://caniuse.com/pointer): Use [elm-pep](https://npmjs.com/package/elm-pep) (lightweight) or [pepjs](https://npmjs.com/package/pepjs) (for really, really old browsers).
## Documentation ## Documentation

1
config/jsdoc/api/template/static/logo-dark.svg
View File

@@ -1 +0,0 @@
../../../../../site/resources/logo-dark.svg

7
config/jsdoc/api/template/static/styles/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
config/jsdoc/api/template/static/styles/ol.css
View File

@@ -1 +0,0 @@
../../../../../../src/ol/ol.css

1
config/jsdoc/api/template/static/styles/site.css
View File

@@ -1 +0,0 @@
../../../../../../site/site.css

1
config/jsdoc/api/template/static/theme Symbolic link
View File

@@ -0,0 +1 @@
../../../../../site/src/theme

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

@@ -14,18 +14,18 @@ var version = obj.packageInfo.version;
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/jaguar.css"> <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
<link type="text/css" rel="stylesheet" href="styles/carbon.css"> <link type="text/css" rel="stylesheet" href="styles/carbon.css">
<link type="text/css" rel="stylesheet" href="styles/ol.css"> <link type="text/css" rel="stylesheet" href="/theme/ol.css">
<link type="text/css" rel="stylesheet" href="styles/site.css"> <link type="text/css" rel="stylesheet" href="/theme/site.css">
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<header class="navbar navbar-expand-sm navbar-dark mb-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="https://openlayers.org/"><img src="logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a> <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70px" height="70px" 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-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>
@@ -37,11 +37,11 @@ var version = obj.packageInfo.version;
<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-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-right" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/en/latest/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 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/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="/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="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-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="fa 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="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>

145
doc/quickstart.hbs
View File

@@ -1,145 +0,0 @@
---
title: Quick Start
layout: doc.hbs
---
# Quick Start
This primer shows you how to put a simple map on a web page.
**For production, we strongly recommend bundling the application together with its dependencies, as explained in the [Building an OpenLayers Application](./tutorials/bundle.html) tutorial.**
## Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
```xml
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4,
}),
});
</script>
</body>
</html>
```
## Understanding what is going on
To include a map a web page you will need 3 things:
1. Include OpenLayers
2. `<div>` map container
3. JavaScript to create a simple map
### Include OpenLayers
```xml
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/build/ol.js"></script>
```
The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
**Optional:** If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:
```xml
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
```
### `<div>` to contain the map
```xml
<div id="map" class="map"></div>
```
The map in the application is contained in a [`<div>` HTML element](https://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
```xml
<style>
.map {
height: 400px;
width: 100%;
}
</style>
```
### JavaScript to create a simple map
```js
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4,
}),
});
```
With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:
The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
```js
const map = new ol.Map({ ... });
```
To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
```js
target: 'map'
```
The `layers: [ ... ]` array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
```js
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
```
Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
The next part of the `Map` object is the `View`. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.
```js
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4,
}),
```
You will notice that the `center` specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

32
doc/tutorials/bundle.md
View File

@@ -1,32 +0,0 @@
---
title: Basic project setup using NPM and Vite
layout: doc.hbs
---
# Introduction
Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the [`ol`](https://npmjs.com/package/ol) package. This tutorial walks you through setting up a simple dev environment, which requires [node](https://nodejs.org) for everything to work.
In this tutorial, we will be using [Vite](https://vitejs.dev/) as a development tool and to bundle our application for production. There are several other options, some of which are linked from the [README](https://npmjs.com/package/ol).
## Application setup
Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project with
npx create-ol-app
*You will need to have `git` installed for the above command to work. If you receive an error, make sure that [Git is installed](https://github.com/git-guides/install-git) on your system.*
This will install the `ol` package, set up a development environment with additional dependencies, and give you an `index.html` and `main.js` starting point for your application. By default, [Vite](https://vitejs.dev/) will be used as a module loader and bundler. See the [`create-ol-app`](https://github.com/openlayers/create-ol-app) documentation for details on using another bundler.
To start the development server
npm start
You can now visit http://localhost:3000/ to view your application. Begin making changes to the `index.html` and `main.js` files to add additional functionality.
To create a production bundle of your application, simply type
npm run build
and copy the `dist/` folder to your production server.

4
examples/geolocation-orientation.html
View File

@@ -11,8 +11,8 @@ tags: "fullscreen, geolocation, orientation, mobile"
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css"> <link rel="stylesheet" href="./theme/ol.css" type="text/css">
<link rel="stylesheet" href="./css/site.css" type="text/css"> <link rel="stylesheet" href="./theme/site.css" type="text/css">
<title>Mobile Geolocation Tracking with Orientation</title> <title>Mobile Geolocation Tracking with Orientation</title>
<style type="text/css"> <style type="text/css">
html, body, .map { html, body, .map {

11
examples/index.html
View File

@@ -6,12 +6,11 @@
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/ol.css" type="text/css"> <link rel="stylesheet" href="/theme/ol.css" type="text/css">
<link rel="stylesheet" href="./css/site.css" type="text/css"> <link rel="stylesheet" href="/theme/site.css" type="text/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)" />
<style> <style>
body {
padding-top: 50px;
}
input.search-query { input.search-query {
color: var(--ol-foreground-color); color: var(--ol-foreground-color);
} }
@@ -42,7 +41,7 @@
<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 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./resources/logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a> <a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./theme/img/logo-dark.svg" width="70px" height="70px" 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-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>

1
examples/resources/logo-dark.svg
View File

@@ -1 +0,0 @@
../../site/resources/logo-dark.svg

1
examples/resources/logo-light.svg
View File

@@ -1 +0,0 @@
../../site/resources/logo-light.svg

249
examples/resources/prism/prism-1.20.0.css
View File

@@ -1,249 +0,0 @@
/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json&plugins=line-numbers+toolbar+copy-to-clipboard */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
}

11
examples/resources/prism/prism-1.20.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

36
examples/templates/example.html
View File

@@ -5,43 +5,46 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<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">
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script> <script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<link rel="stylesheet" href="./css/ol.css" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<link rel="stylesheet" href="./css/site.css" type="text/css"> <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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/theme/ol.css" type="text/css">
<link rel="stylesheet" href="/theme/site.css" type="text/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)" />
<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>
{{{ extraHead.local }}} {{{ extraHead.local }}}
{{{ css.tag }}} {{{ css.tag }}}
<title>{{ title }}</title> <title>{{ title }}</title>
</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-sm navbar-dark mb-3 py-0" role="navigation"> <a href='/' class='navbar-brand'><img src="/theme/img/logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a>
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-dark.svg" width="70px" height="70px" 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-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>
<!-- 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 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-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-right 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 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/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="/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="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-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="fa 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="fa fa-stack-overflow fa-fw mr-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"><a class="nav-link" href="/en/latest/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="/en/latest/apidoc/"><i class="fa fa-sitemap mr-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-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-right mb-3" aria-labelledby="codedropdown">
@@ -163,7 +166,6 @@
<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://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="./resources/prism/prism-1.20.0.min.js"></script>
<script src="./resources/common.js"></script> <script src="./resources/common.js"></script>
{{#each js.scripts}} {{#each js.scripts}}
<script src="{{{ . }}}"></script> <script src="{{{ . }}}"></script>

3
examples/webpack/config.mjs
View File

@@ -69,8 +69,7 @@ export default {
}), }),
new CopyPlugin({ new CopyPlugin({
patterns: [ patterns: [
{from: '../src/ol/ol.css', to: 'css'}, {from: '../site/src/theme', to: 'theme'},
{from: '../site/site.css', to: 'css'},
{from: 'data', to: 'data'}, {from: 'data', to: 'data'},
{from: 'resources', to: 'resources'}, {from: 'resources', to: 'resources'},
{from: 'index.html', to: 'index.html'}, {from: 'index.html', to: 'index.html'},

505
package-lock.json generated
View File

@@ -18,6 +18,9 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.6.4", "@babel/core": "^7.6.4",
"@babel/preset-env": "^7.4.4", "@babel/preset-env": "^7.4.4",
"@metalsmith/in-place": "^4.5.0",
"@metalsmith/layouts": "^2.5.1",
"@metalsmith/markdown": "^1.6.0",
"@openlayers/eslint-plugin": "^4.0.0", "@openlayers/eslint-plugin": "^4.0.0",
"@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-commonjs": "^22.0.0",
@@ -45,6 +48,7 @@
"jsdoc-plugin-intersection": "^1.0.4", "jsdoc-plugin-intersection": "^1.0.4",
"jsdoc-plugin-typescript": "^2.1.1", "jsdoc-plugin-typescript": "^2.1.1",
"json-stringify-safe": "^5.0.1", "json-stringify-safe": "^5.0.1",
"jstransformer-handlebars": "^1.2.0",
"karma": "^6.3.8", "karma": "^6.3.8",
"karma-chrome-launcher": "^3.1.0", "karma-chrome-launcher": "^3.1.0",
"karma-firefox-launcher": "^2.1.2", "karma-firefox-launcher": "^2.1.2",
@@ -53,6 +57,7 @@
"karma-webpack": "^5.0.0", "karma-webpack": "^5.0.0",
"loglevelnext": "^5.0.5", "loglevelnext": "^5.0.5",
"marked": "4.0.18", "marked": "4.0.18",
"metalsmith": "^2.5.0",
"mocha": "10.0.0", "mocha": "10.0.0",
"pixelmatch": "^5.1.0", "pixelmatch": "^5.1.0",
"pngjs": "^6.0.0", "pngjs": "^6.0.0",
@@ -1882,6 +1887,60 @@
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=" "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
}, },
"node_modules/@metalsmith/in-place": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@metalsmith/in-place/-/in-place-4.5.0.tgz",
"integrity": "sha512-gQoxhUF8PR7gUI8H6no6WqE/QBh//eVkiCs1kvF2T2uRuxffqryWxkYZelSww9Pag+rPFVK0PjIJdxjBov1N8w==",
"dev": true,
"dependencies": {
"debug": "^4.0.0",
"inputformat-to-jstransformer": "^1.2.1",
"is-utf8": "^0.2.1",
"jstransformer": "^1.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"metalsmith": "^2.4.1"
}
},
"node_modules/@metalsmith/layouts": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@metalsmith/layouts/-/layouts-2.5.1.tgz",
"integrity": "sha512-VJPCvCAu5SX5qie3Z4DdywtiT6GLjV1IFUaCHb/Mq/0DpvFQTsB7z63lizCpS82M1wPVG3yOOUXLb1FqBUvScg==",
"dev": true,
"dependencies": {
"debug": "^4.3.4",
"inputformat-to-jstransformer": "^1.4.0",
"is-utf8": "^0.2.1",
"jstransformer": "^1.0.0"
},
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"metalsmith": "^2.4.1"
}
},
"node_modules/@metalsmith/markdown": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@metalsmith/markdown/-/markdown-1.6.0.tgz",
"integrity": "sha512-WtgbJAXo29DMy6PFMrPRMJBJIaTcgwvZ2X6Cq5QXEbRTWzde8POeXKGxJZe5MMoiYYS1FoBq5j31ArSIqX2W5g==",
"dev": true,
"dependencies": {
"debug": "^4.3.4",
"dlv": "^1.1.3",
"dset": "^3.1.2",
"marked": "^4.0.16"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"metalsmith": "^2.3.0"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -2773,6 +2832,12 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
"dev": true
},
"node_modules/babel-loader": { "node_modules/babel-loader": {
"version": "8.2.5", "version": "8.2.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
@@ -3301,6 +3366,12 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/co": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
"integrity": "sha512-CQsjCRiNObI8AtTsNIBDRMQ4oMR83CzEswHYahClvul7gKk+lDQiOKv+5qh7LQWf5sh6jkZNispz/QlsZxyNgA==",
"dev": true
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3825,6 +3896,12 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true
},
"node_modules/dns-equal": { "node_modules/dns-equal": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3867,6 +3944,15 @@
"void-elements": "^2.0.0" "void-elements": "^2.0.0"
} }
}, },
"node_modules/dset": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/dset/-/dset-3.1.2.tgz",
"integrity": "sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/earcut": { "node_modules/earcut": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz", "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
@@ -4916,6 +5002,18 @@
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
"dev": true "dev": true
}, },
"node_modules/extend-shallow": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
"dev": true,
"dependencies": {
"is-extendable": "^0.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/extract-zip": { "node_modules/extract-zip": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -5476,6 +5574,21 @@
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
"dev": true "dev": true
}, },
"node_modules/gray-matter": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
"integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
"dev": true,
"dependencies": {
"js-yaml": "^3.13.1",
"kind-of": "^6.0.2",
"section-matter": "^1.0.0",
"strip-bom-string": "^1.0.0"
},
"engines": {
"node": ">=6.0"
}
},
"node_modules/handle-thing": { "node_modules/handle-thing": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -5881,6 +5994,18 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true "dev": true
}, },
"node_modules/inputformat-to-jstransformer": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/inputformat-to-jstransformer/-/inputformat-to-jstransformer-1.4.0.tgz",
"integrity": "sha512-Ub+Wjb0mjaND4IS/GDvQ+TEyd1i9U4OdrF58mBY7QTYu8CK5K34DPV7mrvo/WQBJLj7UJWQc7QAmFb7CbQ5lLw==",
"dev": true,
"dependencies": {
"require-one": "^1.0.3"
},
"engines": {
"node": ">=4"
}
},
"node_modules/internal-slot": { "node_modules/internal-slot": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -6012,6 +6137,15 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-extglob": { "node_modules/is-extglob": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6114,6 +6248,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
"dev": true
},
"node_modules/is-reference": { "node_modules/is-reference": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@@ -6199,6 +6339,12 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/is-utf8": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
"integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
"dev": true
},
"node_modules/is-weakref": { "node_modules/is-weakref": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz",
@@ -6480,6 +6626,28 @@
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
}, },
"node_modules/jstransformer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
"integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
"dev": true,
"dependencies": {
"is-promise": "^2.0.0",
"promise": "^7.0.1"
}
},
"node_modules/jstransformer-handlebars": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/jstransformer-handlebars/-/jstransformer-handlebars-1.2.0.tgz",
"integrity": "sha512-XqdE9hKMwyVxdMg52MmJOf6zmrXn2JJMvymHulUQxtkxeipVuxh5xJ1UVNcc06ioC61WG5B+XAnaEJY7efmFxQ==",
"dev": true,
"dependencies": {
"handlebars": "^4.7.7"
},
"engines": {
"node": ">=4"
}
},
"node_modules/just-extend": { "node_modules/just-extend": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz", "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz",
@@ -6958,6 +7126,40 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/metalsmith": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/metalsmith/-/metalsmith-2.5.0.tgz",
"integrity": "sha512-tBFpCMq8t/ZeD8qbvyWSLjyW7aO8RJYeFSk8LyclgHYaeMWiSPrMxXc3NORVCJ3iG17aRxuL/+nla58Qq3DBcQ==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"commander": "^6.2.1",
"cross-spawn": "^7.0.3",
"debug": "^4.3.3",
"gray-matter": "^4.0.3",
"is-utf8": "~0.2.0",
"micromatch": "^4.0.5",
"rimraf": "^3.0.2",
"stat-mode": "^1.0.0",
"ware": "^1.3.0"
},
"bin": {
"_metalsmith": "bin/_metalsmith",
"metalsmith": "bin/metalsmith"
},
"engines": {
"node": ">=12"
}
},
"node_modules/metalsmith/node_modules/commander": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/methods": { "node_modules/methods": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -6974,13 +7176,13 @@
"dev": true "dev": true
}, },
"node_modules/micromatch": { "node_modules/micromatch": {
"version": "4.0.4", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==", "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"braces": "^3.0.1", "braces": "^3.0.2",
"picomatch": "^2.2.3" "picomatch": "^2.3.1"
}, },
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
@@ -7663,9 +7865,9 @@
"dev": true "dev": true
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
"version": "2.2.3", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
@@ -7835,6 +8037,15 @@
"wkt-parser": "^1.3.1" "wkt-parser": "^1.3.1"
} }
}, },
"node_modules/promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"dependencies": {
"asap": "~2.0.3"
}
},
"node_modules/protocol-buffers-schema": { "node_modules/protocol-buffers-schema": {
"version": "3.5.1", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz", "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz",
@@ -8238,6 +8449,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/require-one": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/require-one/-/require-one-1.0.3.tgz",
"integrity": "sha512-5nXixwgbAZfQ65g7fXv5fDXYRiKByOT1NT3EffS+0W/1MoF+Lkbsly3MXIlPIAgEtspX5fWAbXnp6d4BNMx+xQ==",
"dev": true
},
"node_modules/requires-port": { "node_modules/requires-port": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -8441,6 +8658,19 @@
"url": "https://opencollective.com/webpack" "url": "https://opencollective.com/webpack"
} }
}, },
"node_modules/section-matter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
"integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
"dev": true,
"dependencies": {
"extend-shallow": "^2.0.1",
"kind-of": "^6.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/select-hose": { "node_modules/select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -8980,6 +9210,15 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true "dev": true
}, },
"node_modules/stat-mode": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
"integrity": "sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/statuses": { "node_modules/statuses": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -9091,6 +9330,15 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/strip-bom-string": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
"integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/strip-final-newline": { "node_modules/strip-final-newline": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -9683,6 +9931,15 @@
"foreachasync": "^3.0.0" "foreachasync": "^3.0.0"
} }
}, },
"node_modules/ware": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
"integrity": "sha512-Y2HUDMktriUm+SR2gZWxlrszcgtXExlhQYZ8QJNYbl22jum00KIUcHJ/h/sdAXhWTJcbSkiMYN9Z2tWbWYSrrw==",
"dev": true,
"dependencies": {
"wrap-fn": "^0.1.0"
}
},
"node_modules/watchpack": { "node_modules/watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -10288,6 +10545,15 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true "dev": true
}, },
"node_modules/wrap-fn": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/wrap-fn/-/wrap-fn-0.1.5.tgz",
"integrity": "sha512-xDLdGx0M8JQw9QDAC9s5NUxtg9MI09F6Vbxa2LYoSoCvzJnx2n81YMIfykmXEGsUvuLaxnblJTzhSOjUOX37ag==",
"dev": true,
"dependencies": {
"co": "3.1.0"
}
},
"node_modules/wrappy": { "node_modules/wrappy": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -11685,6 +11951,42 @@
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=" "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
}, },
"@metalsmith/in-place": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@metalsmith/in-place/-/in-place-4.5.0.tgz",
"integrity": "sha512-gQoxhUF8PR7gUI8H6no6WqE/QBh//eVkiCs1kvF2T2uRuxffqryWxkYZelSww9Pag+rPFVK0PjIJdxjBov1N8w==",
"dev": true,
"requires": {
"debug": "^4.0.0",
"inputformat-to-jstransformer": "^1.2.1",
"is-utf8": "^0.2.1",
"jstransformer": "^1.0.0"
}
},
"@metalsmith/layouts": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@metalsmith/layouts/-/layouts-2.5.1.tgz",
"integrity": "sha512-VJPCvCAu5SX5qie3Z4DdywtiT6GLjV1IFUaCHb/Mq/0DpvFQTsB7z63lizCpS82M1wPVG3yOOUXLb1FqBUvScg==",
"dev": true,
"requires": {
"debug": "^4.3.4",
"inputformat-to-jstransformer": "^1.4.0",
"is-utf8": "^0.2.1",
"jstransformer": "^1.0.0"
}
},
"@metalsmith/markdown": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@metalsmith/markdown/-/markdown-1.6.0.tgz",
"integrity": "sha512-WtgbJAXo29DMy6PFMrPRMJBJIaTcgwvZ2X6Cq5QXEbRTWzde8POeXKGxJZe5MMoiYYS1FoBq5j31ArSIqX2W5g==",
"dev": true,
"requires": {
"debug": "^4.3.4",
"dlv": "^1.1.3",
"dset": "^3.1.2",
"marked": "^4.0.16"
}
},
"@nodelib/fs.scandir": { "@nodelib/fs.scandir": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -12456,6 +12758,12 @@
"es-abstract": "^1.19.0" "es-abstract": "^1.19.0"
} }
}, },
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
"dev": true
},
"babel-loader": { "babel-loader": {
"version": "8.2.5", "version": "8.2.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
@@ -12837,6 +13145,12 @@
"shallow-clone": "^3.0.0" "shallow-clone": "^3.0.0"
} }
}, },
"co": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
"integrity": "sha512-CQsjCRiNObI8AtTsNIBDRMQ4oMR83CzEswHYahClvul7gKk+lDQiOKv+5qh7LQWf5sh6jkZNispz/QlsZxyNgA==",
"dev": true
},
"color-convert": { "color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -13245,6 +13559,12 @@
"path-type": "^4.0.0" "path-type": "^4.0.0"
} }
}, },
"dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true
},
"dns-equal": { "dns-equal": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -13281,6 +13601,12 @@
"void-elements": "^2.0.0" "void-elements": "^2.0.0"
} }
}, },
"dset": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/dset/-/dset-3.1.2.tgz",
"integrity": "sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==",
"dev": true
},
"earcut": { "earcut": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz", "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
@@ -14086,6 +14412,15 @@
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
"dev": true "dev": true
}, },
"extend-shallow": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
"dev": true,
"requires": {
"is-extendable": "^0.1.0"
}
},
"extract-zip": { "extract-zip": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -14514,6 +14849,18 @@
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
"dev": true "dev": true
}, },
"gray-matter": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
"integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
"dev": true,
"requires": {
"js-yaml": "^3.13.1",
"kind-of": "^6.0.2",
"section-matter": "^1.0.0",
"strip-bom-string": "^1.0.0"
}
},
"handle-thing": { "handle-thing": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -14807,6 +15154,15 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true "dev": true
}, },
"inputformat-to-jstransformer": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/inputformat-to-jstransformer/-/inputformat-to-jstransformer-1.4.0.tgz",
"integrity": "sha512-Ub+Wjb0mjaND4IS/GDvQ+TEyd1i9U4OdrF58mBY7QTYu8CK5K34DPV7mrvo/WQBJLj7UJWQc7QAmFb7CbQ5lLw==",
"dev": true,
"requires": {
"require-one": "^1.0.3"
}
},
"internal-slot": { "internal-slot": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -14890,6 +15246,12 @@
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true "dev": true
}, },
"is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
"dev": true
},
"is-extglob": { "is-extglob": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -14956,6 +15318,12 @@
"isobject": "^3.0.1" "isobject": "^3.0.1"
} }
}, },
"is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
"dev": true
},
"is-reference": { "is-reference": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@@ -15011,6 +15379,12 @@
"integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
"dev": true "dev": true
}, },
"is-utf8": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
"integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
"dev": true
},
"is-weakref": { "is-weakref": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz",
@@ -15229,6 +15603,25 @@
"universalify": "^2.0.0" "universalify": "^2.0.0"
} }
}, },
"jstransformer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
"integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
"dev": true,
"requires": {
"is-promise": "^2.0.0",
"promise": "^7.0.1"
}
},
"jstransformer-handlebars": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/jstransformer-handlebars/-/jstransformer-handlebars-1.2.0.tgz",
"integrity": "sha512-XqdE9hKMwyVxdMg52MmJOf6zmrXn2JJMvymHulUQxtkxeipVuxh5xJ1UVNcc06ioC61WG5B+XAnaEJY7efmFxQ==",
"dev": true,
"requires": {
"handlebars": "^4.7.7"
}
},
"just-extend": { "just-extend": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz", "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz",
@@ -15616,6 +16009,31 @@
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
"dev": true "dev": true
}, },
"metalsmith": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/metalsmith/-/metalsmith-2.5.0.tgz",
"integrity": "sha512-tBFpCMq8t/ZeD8qbvyWSLjyW7aO8RJYeFSk8LyclgHYaeMWiSPrMxXc3NORVCJ3iG17aRxuL/+nla58Qq3DBcQ==",
"dev": true,
"requires": {
"commander": "^6.2.1",
"cross-spawn": "^7.0.3",
"debug": "^4.3.3",
"gray-matter": "^4.0.3",
"is-utf8": "~0.2.0",
"micromatch": "^4.0.5",
"rimraf": "^3.0.2",
"stat-mode": "^1.0.0",
"ware": "^1.3.0"
},
"dependencies": {
"commander": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
"dev": true
}
}
},
"methods": { "methods": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -15629,13 +16047,13 @@
"dev": true "dev": true
}, },
"micromatch": { "micromatch": {
"version": "4.0.4", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==", "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"dev": true, "dev": true,
"requires": { "requires": {
"braces": "^3.0.1", "braces": "^3.0.2",
"picomatch": "^2.2.3" "picomatch": "^2.3.1"
} }
}, },
"mime": { "mime": {
@@ -16150,9 +16568,9 @@
"dev": true "dev": true
}, },
"picomatch": { "picomatch": {
"version": "2.2.3", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true "dev": true
}, },
"pixelmatch": { "pixelmatch": {
@@ -16273,6 +16691,15 @@
"wkt-parser": "^1.3.1" "wkt-parser": "^1.3.1"
} }
}, },
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"requires": {
"asap": "~2.0.3"
}
},
"protocol-buffers-schema": { "protocol-buffers-schema": {
"version": "3.5.1", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz", "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz",
@@ -16570,6 +16997,12 @@
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
"dev": true "dev": true
}, },
"require-one": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/require-one/-/require-one-1.0.3.tgz",
"integrity": "sha512-5nXixwgbAZfQ65g7fXv5fDXYRiKByOT1NT3EffS+0W/1MoF+Lkbsly3MXIlPIAgEtspX5fWAbXnp6d4BNMx+xQ==",
"dev": true
},
"requires-port": { "requires-port": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -16722,6 +17155,16 @@
"ajv-keywords": "^3.5.2" "ajv-keywords": "^3.5.2"
} }
}, },
"section-matter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
"integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
"dev": true,
"requires": {
"extend-shallow": "^2.0.1",
"kind-of": "^6.0.0"
}
},
"select-hose": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -17164,6 +17607,12 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true "dev": true
}, },
"stat-mode": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
"integrity": "sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==",
"dev": true
},
"statuses": { "statuses": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -17251,6 +17700,12 @@
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
"dev": true "dev": true
}, },
"strip-bom-string": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
"integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
"dev": true
},
"strip-final-newline": { "strip-final-newline": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -17675,6 +18130,15 @@
"foreachasync": "^3.0.0" "foreachasync": "^3.0.0"
} }
}, },
"ware": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
"integrity": "sha512-Y2HUDMktriUm+SR2gZWxlrszcgtXExlhQYZ8QJNYbl22jum00KIUcHJ/h/sdAXhWTJcbSkiMYN9Z2tWbWYSrrw==",
"dev": true,
"requires": {
"wrap-fn": "^0.1.0"
}
},
"watchpack": { "watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -18103,6 +18567,15 @@
} }
} }
}, },
"wrap-fn": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/wrap-fn/-/wrap-fn-0.1.5.tgz",
"integrity": "sha512-xDLdGx0M8JQw9QDAC9s5NUxtg9MI09F6Vbxa2LYoSoCvzJnx2n81YMIfykmXEGsUvuLaxnblJTzhSOjUOX37ag==",
"dev": true,
"requires": {
"co": "3.1.0"
}
},
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

7
package.json
View File

@@ -23,7 +23,7 @@
"build-package": "npm run transpile && npm run copy-css && npm run generate-types && node tasks/prepare-package.js", "build-package": "npm run transpile && npm run copy-css && npm run generate-types && node tasks/prepare-package.js",
"build-index": "shx rm -f build/index.js && npm run build-package && node tasks/generate-index.js", "build-index": "shx rm -f build/index.js && npm run build-package && node tasks/generate-index.js",
"build-legacy": "shx rm -rf build/legacy && npm run build-index && webpack --config config/webpack-config-legacy-build.mjs && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css", "build-legacy": "shx rm -rf build/legacy && npm run build-index && webpack --config config/webpack-config-legacy-build.mjs && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
"build-site": "shx rm -rf build/site && npm run build-examples && npm run apidoc && npm run build-legacy && shx mkdir -p build/site && shx cp site/index.html build/site/ && shx mv build/apidoc build/examples build/legacy build/site/", "build-site": "shx rm -rf build/site && node site/build.js && npm run build-examples && npm run apidoc && npm run build-legacy && shx mkdir -p build/site/en/latest && shx cp -r site/build/* build/site/ && shx mv build/apidoc build/examples build/legacy build/site/en/latest/",
"copy-css": "shx cp src/ol/ol.css build/ol/ol.css", "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
"generate-types": "tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol", "generate-types": "tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol",
"transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build && node tasks/serialize-workers.cjs", "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build && node tasks/serialize-workers.cjs",
@@ -54,6 +54,9 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.6.4", "@babel/core": "^7.6.4",
"@babel/preset-env": "^7.4.4", "@babel/preset-env": "^7.4.4",
"@metalsmith/in-place": "^4.5.0",
"@metalsmith/layouts": "^2.5.1",
"@metalsmith/markdown": "^1.6.0",
"@openlayers/eslint-plugin": "^4.0.0", "@openlayers/eslint-plugin": "^4.0.0",
"@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-commonjs": "^22.0.0",
@@ -81,6 +84,7 @@
"jsdoc-plugin-intersection": "^1.0.4", "jsdoc-plugin-intersection": "^1.0.4",
"jsdoc-plugin-typescript": "^2.1.1", "jsdoc-plugin-typescript": "^2.1.1",
"json-stringify-safe": "^5.0.1", "json-stringify-safe": "^5.0.1",
"jstransformer-handlebars": "^1.2.0",
"karma": "^6.3.8", "karma": "^6.3.8",
"karma-chrome-launcher": "^3.1.0", "karma-chrome-launcher": "^3.1.0",
"karma-firefox-launcher": "^2.1.2", "karma-firefox-launcher": "^2.1.2",
@@ -89,6 +93,7 @@
"karma-webpack": "^5.0.0", "karma-webpack": "^5.0.0",
"loglevelnext": "^5.0.5", "loglevelnext": "^5.0.5",
"marked": "4.0.18", "marked": "4.0.18",
"metalsmith": "^2.5.0",
"mocha": "10.0.0", "mocha": "10.0.0",
"pixelmatch": "^5.1.0", "pixelmatch": "^5.1.0",
"pngjs": "^6.0.0", "pngjs": "^6.0.0",

1
site/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/build/

26
site/build.js Normal file
View File

@@ -0,0 +1,26 @@
import Metalsmith from 'metalsmith';
import inPlace from '@metalsmith/in-place';
import layouts from '@metalsmith/layouts';
import markdown from '@metalsmith/markdown';
import {dirname} from 'node:path';
import {env} from 'node:process';
import {fileURLToPath} from 'node:url';
const baseDir = dirname(fileURLToPath(import.meta.url));
const builder = Metalsmith(baseDir)
.source('./src')
.destination('./build')
.clean(true)
.metadata({
version: env.OL_VERSION || 'dev',
})
.use(inPlace())
.use(markdown())
.use(layouts());
builder.build((err) => {
if (err) {
throw err;
}
});

37
site/index.html
View File

@@ -1,37 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='https://openlayers.org/assets/theme/site.css' rel='stylesheet' type='text/css'>
<link href="./legacy/ol.css" rel='stylesheet' type='text/css'>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
</head>
<body>
<ul>
<li><a href="./apidoc/">API Docs</a></li>
<li><a href="./examples/">Examples</a></li>
</ul>
<div id="map" style="width:400px;height:400px;"></div>
<script src="./legacy/ol.js"></script>
<script>
new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 0
})
})
</script>
</body>
</html>

76
site/layouts/default.hbs Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers - {{ title }}</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
<script src="//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/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/clipboard.js/2.0.4/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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='/theme/ol.css' rel='stylesheet' type='text/css'>
<link href='/theme/site.css' rel='stylesheet' type='text/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}}
</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="70px" height="70px" 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">
<span class="navbar-toggler-icon"></span>
</button>
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
<a class="dropdown-item" href="/doc/">Docs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item"><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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
</div>
</li>
</ul>
</nav>
</header>
{{#if uncontained}}
{{{ contents }}}
{{else}}
<div class="container">
{{{ contents }}}
</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='/sponsors.html'>sponsors</a>.
<br>
<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}}
</body>
</html>

120
site/src/3rd-party/index.hbs vendored Normal file
View File

@@ -0,0 +1,120 @@
---
title: '3rd party'
layout: default.hbs
---
<div class="container mt-4 pt-4">
<h3 class="mb-3">Useful 3rd party libraries</h3>
<p class="lead">
The libraries below provide additional functionality by extending OpenLayers or integrating well with it.
</p>
<table class="table table-hover">
<tbody>
<tr><th>Library</th><th>Description</th><th>Maintainer</th></tr>
<tr>
<td><a href="https://github.com/openlayers/ol-cesium">OL-Cesium</a></td>
<td>Cesium integration library.</td>
<td><a href="https://github.com/openlayers">OpenLayers</a></td>
</tr>
<tr>
<td><a href="https://npmjs.com/package/ol-mapbox-style">ol-mapbox-style</a></td>
<td>Create OpenLayers maps from Mapbox Style objects.</td>
<td><a href="https://github.com/openlayers">OpenLayers</a></td>
</tr>
<tr>
<td><a href="https://github.com/walkermatt/ol-layerswitcher">OL-LayerSwitcher</a></td>
<td>Layer control for OpenLayers.</td>
<td><a href="https://github.com/walkermatt">Matt Walker</a></td>
</tr>
<tr>
<td><a href="https://github.com/walkermatt/ol-popup">OL-Popup</a></td>
<td>Basic popup overlay for OpenLayers.</td>
<td><a href="https://github.com/walkermatt">Matt Walker</a></td>
</tr>
<tr>
<td><a href="https://github.com/bjornharrtell/jsts">JSTS</a></td>
<td>JavaScript Topology Suite.</td>
<td><a href="https://github.com/bjornharrtell">Björn Harrtell</a></td>
</tr>
<tr>
<td><a href="https://github.com/jonataswalker/ol-geocoder">OL-Geocoder</a></td>
<td>Geocoder Nominatim for OpenLayers.</td>
<td><a href="https://github.com/jonataswalker">Jonatas Walker</a></td>
</tr>
<tr>
<td><a href="https://github.com/webgeodatavore/ol3-photon">OL3-Photon</a></td>
<td>Photon geocoder for OpenLayers.</td>
<td><a href="https://github.com/ThomasG77">Thomas Gratier</a></td>
</tr>
<tr>
<td><a href="https://github.com/OpenCageData/geosearch/tree/master/packages/ol-opencage-geosearch">ol-opencage-geosearch</a></td>
<td>OpenCage GeoSearch for OpenLayers.</td>
<td><a href="https://github.com/OpenCageData">OpenCage</a></td>
</tr>
<tr>
<td><a href="https://github.com/jonataswalker/ol-contextmenu">OL-ContextMenu</a></td>
<td>Custom Context Menu for OpenLayers.</td>
<td><a href="https://github.com/jonataswalker">Jonatas Walker</a></td>
</tr>
<tr>
<td><a href="https://github.com/mapgears/ol3-google-maps">OL-Google-Maps</a></td>
<td>Google Maps integration library.</td>
<td><a href="https://github.com/mapgears">Mapgears</a></td>
</tr>
<tr>
<td><a href="https://github.com/mapgears/ol3-panzoom">OL3-PanZoom</a></td>
<td>PanZoom and PanZoomBar controls for OpenLayers.</td>
<td><a href="https://github.com/mapgears">Mapgears</a></td>
</tr>
<tr>
<td><a href="https://github.com/Viglino/ol-ext">OL-Ext</a></td>
<td>Miscellanous classes and functions for OpenLayers.</td>
<td><a href="https://github.com/Viglino">Jean-Marc Viglino</a></td>
</tr>
<tr>
<td><a href="https://github.com/nsidc/ol3-projection-switcher">OL3-Projection-Switcher</a></td>
<td>An OpenLayers Control to switch between projections.</td>
<td><a href="https://github.com/nsidc">NSIDC</a></td>
</tr>
<tr>
<td><a href="https://github.com/boundlessgeo/ole">Olé</a></td>
<td>Integration of OpenLayers and Esri ArcGIS REST services.</td>
<td><a href="https://github.com/boundlessgeo">Boundless</a></td>
</tr>
<tr>
<td><a href="https://github.com/allenhwkim/react-openlayers">React OpenLayers</a></td>
<td>A minimal React wrapper of OpenLayers 3+ written in TypeScript</td>
<td><a href="https://github.com/allenhwkim">Allen Kim</a></td>
</tr>
<tr>
<td><a href="https://github.com/TDesjardins/gwt-ol">GWT-OpenLayers 3+</a></td>
<td>A GWT wrapper for OpenLayers 3+ written in Java</td>
<td><a href="https://github.com/TDesjardins">Tino Desjardins</a></td>
</tr>
<tr>
<td><a href="https://github.com/terrestris/react-geo">react-geo</a></td>
<td>A set of geo related modules to use in combination with React, Ant Design UI and OpenLayers</td>
<td><a href="https://github.com/terrestris">terrestris</a></td>
</tr>
<tr>
<td><a href="https://github.com/dayjournal/ol-opacity">ol-opacity</a></td>
<td>A layer switcher control with opacity sliders for overlays.</td>
<td><a href="https://github.com/dayjournal">dayjournal</a></td>
</tr>
<tr>
<td><a href="https://github.com/symbioquine/ol-grid">ol-grid</a></td>
<td>A dynamic grid for OpenLayers - intended for use as part of advanced snapping controls.</td>
<td><a href="https://github.com/symbioquine">Symbioquine</a></td>
</tr>
<tr>
<td><a href="https://github.com/MelihAltintas/vue3-openlayers">vue3-openlayers</a></td>
<td>vue3-openlayers is a components library that brings the power of OpenLayers to the Vue3 reactive world.</td>
<td><a href="https://github.com/MelihAltintas/">Melih Altıntaş</a></td>
</tr>
<tr>
<td><a href="https://github.com/ahocevar/ol-marker-feature">ol-marker-feature</a></td>
<td>The OpenLayers Marker Feature plugin provides an easy way to add markers to a map and associate them with popups, e.g. using <a href="https://github.com/walkermatt/ol-popup">OL-Popup</a>.</td>
<td><a href="https://github.com/ahocevar">Andreas Hocevar</a></td>
</tr>
</tbody>
</table>
</div>

2
doc/errors/index.md → site/src/doc/errors/index.md
View File

@@ -1,6 +1,6 @@
--- ---
title: Errors title: Errors
layout: doc.hbs layout: default.hbs
--- ---
# Errors # Errors

2
doc/faq.md → site/src/doc/faq.md
View File

@@ -1,6 +1,6 @@
--- ---
title: Frequently Asked Questions (FAQ) title: Frequently Asked Questions (FAQ)
layout: doc.hbs layout: default.hbs
--- ---
# Frequently Asked Questions (FAQ) # Frequently Asked Questions (FAQ)

10
doc/index.hbs → site/src/doc/index.md
View File

@@ -1,21 +1,21 @@
--- ---
title: Documentation title: Documentation
layout: doc.hbs layout: default.hbs
--- ---
# Documentation # Documentation
If you're eager to get your first OpenLayers map on a page, dive into the [quick start](quickstart.html). If you're eager to get your first OpenLayers map on a page, dive into the [quick start](./quickstart.html).
For a more in-depth overview of OpenLayers core concepts, check out the [tutorials](tutorials/). For a more in-depth overview of OpenLayers core concepts, check out the [tutorials](./tutorials/).
Make sure to also check out the [OpenLayers workshop](/workshop/). Make sure to also check out the [OpenLayers workshop](/workshop/).
Find additional reference material in the [API docs](../apidoc) and [examples](../examples). Find additional reference material in the [API docs](/en/latest/apidoc/) and [examples](/en/latest/examples/).
# Frequently Asked Questions (FAQ) # Frequently Asked Questions (FAQ)
We have put together a document that lists [Frequently Asked Questions (FAQ)](faq.html) and our answers. Common problems that may arise when using OpenLayers are explained there, and chances are you'll find an appropriate solution in this document. We have put together a document that lists [Frequently Asked Questions (FAQ)](./faq.html) and our answers. Common problems that may arise when using OpenLayers are explained there, and chances are you'll find an appropriate solution in this document.
# More questions? # More questions?

119
site/src/doc/quickstart.md Normal file
View File

@@ -0,0 +1,119 @@
---
title: Quick Start
layout: default.hbs
---
# Quick Start
This primer shows you how to put a map on a web page. The development setup uses [Node](https://nodejs.org/) (14 or higher) and requires that you have [`git`](https://github.com/git-guides/install-git) installed.
## Set up a new project
The easiest way to start building a project with OpenLayers is to run `npm create ol-app`:
```bash
npm create ol-app my-app
cd my-app
npm start
```
The first command will create a directory called `my-app` (you can use a different name if you wish), install OpenLayers and a development server, and set up a basic app with `index.html`, `main.js`, and `style.css` files.
The second command (`cd my-app`) changes the working directory to your new `my-app` project so you can start working with it.
The third command (`npm start`) starts a development server so you can view your application in a browser while working on it. After running `npm start`, you'll see output that tells you the URL to open. Open http://localhost:5173/ (or whatever URL is displayed) to see your new application.
## Exploring the parts
An OpenLayers application is composed of three basic parts:
* The HTML markup with an element to contain the map (`index.html`)
* The JavaScript that initializes the map (`main.js`)
* The CSS styles that determine the map size and any other customizations (`style.css`)
### The markup
Open the `index.html` file in a text editor. It should look something like this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="map"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
```
The two important parts in the markup are the `<div>` element to contain the map and the `<script>` tag to pull in the JavaScript. The map container or target should be a block level element (like a `<div>`) and it must appear in the document before the `<script>` tag that initializes the map.
## The script
Open the `main.js` file in a text editor. It should look something like this:
```js
import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
```
OpenLayers is packaged as a collection of [ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). The `import` lines are used to pull in the modules that your application needs. Take a look through the [examples](/en/latest/examples/) and [API docs](/en/latest/apidoc/) to understand which modules you might want to use.
The `import './style.css';` line might be a bit unexpected. In this example, we're using [Vite](https://vitejs.dev/) as a development server. Vite allows CSS to be imported from JavaScript modules. If you were using a different development server, you might include the `style.css` in a `<link>` tag in the `index.html` instead.
The `main.js` module serves as an entry point for your application. It initializes a new map, giving it a single layer with an OSM source and a view describing the center and zoom level. Read through the [Basic Concepts tutorial](./tutorials/concepts.html) to learn more about `Map`, `View`, `Layer`, and `Source` components.
## The style
Open the `style.css` file in a text editor. It should look something like this:
```css
@import "node_modules/ol/ol.css";
html,
body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
```
The first line imports the `ol.css` file that comes with the `ol` package (OpenLayers is published as the [`ol` package](https://www.npmjs.com/package/ol) in the npm registry). The `ol` package was installed in the `npm create ol-app` step above. If you were starting with an existing application instead of using `npm create ol-app`, you would install the package with `npm install ol`. The `ol.css` stylesheet includes styles for the elements that OpenLayers creates – things like buttons for zooming in and out.
The remaining rules in the `style.css` file make it so the `<div id="map">` element that contains the map fills the entire page.
## Deploying your app
You can make edits to the `index.html`, `main.js`, or `style.css` files and see the resulting change in your browser while running the development server (with `npm start`). After you have finished making edits, it is time to bundle or build your application so that it can be deployed as a static website (without needing to run a development server like Vite).
To build your application, run the following:
```bash
npm run build
```
This will create a `dist` directory with a new `index.html` and assets that make up your application. These `dist` files can be deployed with your production website.

14
doc/tutorials/background.md → site/src/doc/tutorials/background.md
View File

@@ -1,11 +1,11 @@
--- ---
title: Introduction title: Background
layout: doc.hbs layout: default.hbs
--- ---
# Introduction # Background
## Objectives ## Overview
OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data. OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.
@@ -15,11 +15,9 @@ The library comes with built-in support for a wide range of commercial and free
OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), which provides all modules of the officially supported [API](../../apidoc). OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), which provides all modules of the officially supported [API](../../apidoc).
## Renderers and Browser Support ## Browser Support
By default, OpenLayers uses a performance optimized Canvas renderer. OpenLayers runs on all modern browsers (with greater than 1% global usage). This includes Chrome, Firefox, Safari and Edge. For older browsers, [polyfills](https://polyfill.io/) will likely need to be added.
OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](https://262.ecma-international.org/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](https://polyfill.io/), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io/)) and bundled with polyfills for `fetch`, `requestAnimationFrame`, `Element.prototype.classList`, `URL`, `TextDecoder` and `Number.isInteger`.
The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions. The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.

12
doc/tutorials/concepts.hbs → site/src/doc/tutorials/concepts.md
View File

@@ -1,13 +1,13 @@
--- ---
title: Basic Concepts title: Basic Concepts
layout: doc.hbs layout: default.hbs
--- ---
# Basic Concepts # Basic Concepts
## Map ## Map
The core component of OpenLayers is the map (`ol/Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`. The core component of OpenLayers is the map (from the `ol/Map` module). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
The markup below could be used to create a `<div>` that contains your map. The markup below could be used to create a `<div>` that contains your map.
@@ -48,12 +48,12 @@ To get remote data for a layer, OpenLayers uses `ol/source/Source` subclasses. T
```js ```js
import OSM from 'ol/source/OSM'; import OSM from 'ol/source/OSM';
const osmSource = OSM(); const source = OSM();
``` ```
## Layer ## Layer
A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers: A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:
* `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions. * `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
* `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions. * `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions.
@@ -64,8 +64,8 @@ A layer is a visual representation of data from a `source`. OpenLayers has four
import TileLayer from 'ol/layer/Tile'; import TileLayer from 'ol/layer/Tile';
// ... // ...
const osmLayer = new TileLayer({source: osmSource}); const layer = new TileLayer({source: source});
map.addLayer(osmLayer); map.addLayer(layer);
``` ```
## Putting it all together ## Putting it all together

3
doc/tutorials/index.hbs → site/src/doc/tutorials/index.md
View File

@@ -1,11 +1,10 @@
--- ---
title: Tutorials title: Tutorials
layout: doc.hbs layout: default.hbs
--- ---
# Tutorials # Tutorials
* [Building an OpenLayers Application](bundle.html)
* [Basic Concepts](concepts.html) * [Basic Concepts](concepts.html)
* [Some Background on OpenLayers](background.html) * [Some Background on OpenLayers](background.html)
* [Raster Reprojection](raster-reprojection.html) * [Raster Reprojection](raster-reprojection.html)

0
doc/tutorials/raster-reprojection-resources/double-occurrence.jpg → site/src/doc/tutorials/raster-reprojection-resources/double-occurrence.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

0
doc/tutorials/raster-reprojection-resources/how-it-works.jpg → site/src/doc/tutorials/raster-reprojection-resources/how-it-works.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 127 KiB

0
doc/tutorials/raster-reprojection-resources/iterative-triangulation.png → site/src/doc/tutorials/raster-reprojection-resources/iterative-triangulation.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

39
doc/tutorials/raster-reprojection.md → site/src/doc/tutorials/raster-reprojection.md
View File

@@ -1,6 +1,6 @@
--- ---
title: Raster Reprojection title: Raster Reprojection
layout: doc.hbs layout: default.hbs
--- ---
# Raster Reprojection # Raster Reprojection
@@ -10,7 +10,9 @@ Transformation of the map projections of the image happens directly in a web bro
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid. The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.
# Usage # Usage
The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`: The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`:
```js ```js
import {Map, View} from 'ol'; import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile'; import TileLayer from 'ol/layer/Tile';
@@ -19,14 +21,14 @@ import TileWMS from 'ol/source/TileWMS';
const map = new Map({ const map = new Map({
target: 'map', target: 'map',
view: new View({ view: new View({
projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION projection: 'EPSG:3857', // here is the view projection
center: [0, 0], center: [0, 0],
zoom: 2, zoom: 2,
}), }),
layers: [ layers: [
new TileLayer({ new TileLayer({
source: new TileWMS({ source: new TileWMS({
projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION projection: 'EPSG:4326', // here is the source projection
url: 'https://ahocevar.com/geoserver/wms', url: 'https://ahocevar.com/geoserver/wms',
params: { params: {
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR', 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
@@ -36,15 +38,18 @@ const map = new Map({
], ],
}); });
``` ```
If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood. If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood.
### Examples ### Examples
- [Raster reprojection demo](https://openlayers.org/en/latest/examples/reprojection.html)
- [OpenStreetMap to WGS84 reprojection](https://openlayers.org/en/latest/examples/reprojection-wgs84.html) - [Raster reprojection demo](/en/latest/examples/reprojection.html)
- [Reprojection with EPSG.io database search](https://openlayers.org/en/latest/examples/reprojection-by-code.html) - [OpenStreetMap to WGS84 reprojection](/en/latest/examples/reprojection-wgs84.html)
- [Image reprojection](https://openlayers.org/en/latest/examples/reprojection-image.html) - [Reprojection with EPSG.io database search](/en/latest/examples/reprojection-by-code.html)
- [Image reprojection](/en/latest/examples/reprojection-image.html)
### Custom projection ### Custom projection
The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string. It can be installed with The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string. It can be installed with
npm install proj4 npm install proj4
@@ -65,16 +70,19 @@ proj27700.setExtent([0, 0, 700000, 1300000]);
``` ```
### Change of the view projection ### Change of the view projection
To switch the projection used to display the map you have to set a new `ol/View` with selected projection on the `ol/Map`: To switch the projection used to display the map you have to set a new `ol/View` with selected projection on the `ol/Map`:
``` javascript
```js
map.setView(new View({ map.setView(new View({
projection: 'EPSG:27700', projection: 'EPSG:27700',
center: [400000, 650000], center: [400000, 650000],
zoom: 4, zoom: 4,
})); }));
``` ```
## TileGrid and Extents ## TileGrid and Extents
When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles. When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles.
The TileGrid of the reprojected tiles is by default internally constructed using `ol/tilegrid~getForProjection(projection)`. The TileGrid of the reprojected tiles is by default internally constructed using `ol/tilegrid~getForProjection(projection)`.
The projection should have extent defined (see above) for this to work properly. The projection should have extent defined (see above) for this to work properly.
@@ -85,7 +93,7 @@ In certain cases, this can be used to optimize performance (by tweaking tile siz
# How it works # How it works
The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol/proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations). The reprojection process is based on triangles – the target raster is divided into a limited number of triangles with vertices transformed using `ol/proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context): The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):
<img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" /> <img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" />
@@ -96,7 +104,7 @@ The precision of the reprojection is then limited by the number of triangles.
The reprojection process preserves transparency on the raster data supplied from the source (png or gif) and the gaps and no-data pixels generated by reprojection are automatically transparent. The reprojection process preserves transparency on the raster data supplied from the source (png or gif) and the gaps and no-data pixels generated by reprojection are automatically transparent.
###Dynamic triangulation ### Dynamic triangulation
The above image above shows a noticeable error (especially on the edges) when the original image (left; EPSG:27700) is transformed with only a limited number of triangles (right; EPSG:3857). The above image above shows a noticeable error (especially on the edges) when the original image (left; EPSG:27700) is transformed with only a limited number of triangles (right; EPSG:3857).
The error can be minimized by increasing the number of triangles used. The error can be minimized by increasing the number of triangles used.
@@ -110,10 +118,11 @@ For debugging, rendering of the reprojection edges can be enabled by `ol.source.
# Advanced # Advanced
### Triangulation precision threshold ### Triangulation precision threshold
The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ERROR_THRESHOLD` (0.5 pixel). The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ERROR_THRESHOLD` (0.5 pixel).
In case a different threshold needs to be defined for different sources, the `reprojectionErrorThreshold` option can be passed when constructing the tile image source. In case a different threshold needs to be defined for different sources, the `reprojectionErrorThreshold` option can be passed when constructing the tile image source.
###Limiting visibility of reprojected map by extent ### Limiting visibility of reprojected map by extent
The reprojection algorithm uses inverse transformation (from *view projection* to *data projection*). The reprojection algorithm uses inverse transformation (from *view projection* to *data projection*).
For certain coordinate systems this can result in a "double occurrence" of the source data on a map. For certain coordinate systems this can result in a "double occurrence" of the source data on a map.

52
site/src/download/index.hbs Normal file
View File

@@ -0,0 +1,52 @@
---
title: 'Get the Code'
layout: default.hbs
---
<div class="container mt-4 pt-4">
<div class="row">
<h3 class="col-sm-12">The <code>ol</code> package</h3>
<div class="col-sm-12">
<p>
The recommended way to use OpenLayers is to work with the <a href="https://www.npmjs.com/package/ol"><code>ol</code> package</a>. You can install the latest with <code>npm</code>:
<pre><code class="language-shell-session">npm install ol</code></pre>
</p>
</div>
</div>
<div class="row">
<h3 class="col-sm-12">Hosted builds for development</h3>
<div class="col-sm-12">
<p>
If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page:
<pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/build/ol.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/css/ol.css"&gt;
</code></pre>
</p>
</div>
</div>
<div class="row">
<h3 class="col-sm-12">Downloads for the {{ version }} release</h3>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-hover">
<tbody>
<tr><th>Archive</th><th>Description</th></tr>
<tr>
<td><a href="https://github.com/openlayers/openlayers/releases/download/{{ version }}/{{ version }}-dist.zip">{{ version }}-dist.zip</a></td>
<td>Includes a full build of the library (<code>ol.js</code>), a source map (<code>ol.js.map</code>), and library CSS (<code>ol.css</code> with source map <code>ol.css.map</code>).</td>
</tr>
<tr>
<td><a href="https://github.com/openlayers/openlayers/releases/download/{{ version }}/{{ version }}.zip">{{ version }}.zip</a></td>
<td>Includes all of the above plus examples, API docs, and sources.</td>
</tr>
</tbody>
</table>
<p>
See the <a href="https://github.com/openlayers/openlayers/releases/tag/{{ version }}">{{ version }} release page</a> for a changelog and any special upgrade notes.
</p>
<p>
For archives of previous releases, see the <a href="https://github.com/openlayers/openlayers/releases/">complete list of releases</a>.
</p>
</div>
</div>
</div>

223
site/src/index.hbs Normal file
View File

@@ -0,0 +1,223 @@
---
title: Welcome
layout: default.hbs
uncontained: true
head:
- <link rel="stylesheet" href="./theme/index.css" type="text/css">
---
<div id='map'></div>
<div class='container'>
<blockquote id='tagline' class='text-right plain'>
<p>A high-performance, feature-packed library for all your mapping needs.</p>
</blockquote>
<div class='row'>
<div id='news' class='col-sm-12'>
<h1 class='topic'><i class='fa fa-rss'></i> Latest</h1>
<p><strong>OpenLayers <a href="/download/">{{ version }}</a> is here!</strong> Check out the <a href="/doc/">docs</a> and the <a href="/en/latest/examples/">examples</a> to get started. The full distribution can be downloaded from the <a href="/download/">release page</a>.</p>
</div>
</div>
<div class='row'>
<h1 class='topic col-sm-12'>Overview</h1>
</div>
<div class='row'>
<div class='col-sm-12'>
<p>OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).</p>
</div>
</div>
<div class='row'>
<h1 class='topic col-sm-12'>Features</h1>
</div>
<div class='row'>
<div class='col-sm-6'>
<h3>Tiled Layers</h3>
<img src='/theme/img/tiled-layers.png' class='thumb'>
<p>Pull tiles from OSM, Bing, MapBox, Stamen, and any other XYZ source you can find. OGC mapping services and untiled layers also supported.</p>
</div>
<div class='col-sm-6'>
<h3>Vector Layers</h3>
<img src='/theme/img/vector-layers.png' class='thumb'>
<p>Render vector data from GeoJSON, TopoJSON, KML, GML, Mapbox vector tiles, and other formats.</p>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<h3>Cutting Edge, Fast &amp; Mobile Ready</h3>
<img src='/theme/img/timeline.png' class='thumb'>
<p>Leverages Canvas 2D, WebGL, and all the latest greatness from HTML5. Mobile support out of the box. Build lightweight custom profiles with just the components you need.</p>
</div>
<div class='col-sm-6'>
<h3>Easy to Customize and Extend</h3>
<img src='/theme/img/popup.png' class='thumb'>
<p>Style your map controls with straight-forward CSS. Hook into different levels of the API or use <a href="/3rd-party/">3rd party libraries</a> to customize and extend functionality.</p>
</div>
</div>
<div class='row'>
<h1 class='topic col-sm-12'>Learn More</h1>
</div>
<div class='row'>
<div class='col-sm-6'>
<a href='/doc/quickstart.html' class='big-link'>
<h3><i class='fa fa-check'></i> Quick Start</h3>
<p>Seen enough already? Go here to get started.</p>
</a>
</div>
<div class='col-sm-6'>
<a href='/download/' class='big-link'>
<h3><i class='fa fa-download'></i> Get the Code</h3>
<p>Get the latest release or dig through the archives.</p>
</a>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<a href='/doc/tutorials/' class='big-link'>
<h3><i class='fa fa-book'></i> Tutorials</h3>
<p>Spend time learning the basics and graduate up to advanced mapping techniques.</p>
</a>
</div>
<div class='col-sm-6'>
<a href='/workshop/' class='big-link'>
<h3><i class='fa fa-graduation-cap'></i> Workshop</h3>
<p>Want to learn OpenLayers hands-on? Get started with the workshop.</p>
</a>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<a href='/en/latest/apidoc/' class='big-link'>
<h3><i class='fa fa-sitemap'></i> API Docs</h3>
<p>Browse through the API docs for details on code usage.</p>
</a>
</div>
</div>
<div class='row'>
<h1 class='topic col-sm-12'>Older versions</h1>
<div class='col-sm-12'>
<p>In case you are not ready (yet) for the latest version of OpenLayers, we provide links to selected resources of older major versions of the software.</p>
<ul>
<li>Latest v5: <a href="https://github.com/openlayers/openlayers/releases/tag/v5.3.0">v5.3.0</a> released 2018-11-06 &mdash; <a href="/en/v5.3.0/doc/">docs</a>, <a href="/en/v5.3.0/apidoc/">API</a> &amp; <a href="/en/v5.3.0/examples/">examples</a></li>
<li>Latest v4: <a href="https://github.com/openlayers/openlayers/releases/tag/v4.6.5">v4.6.5</a> released 2018-03-20 &mdash; <a href="/en/v4.6.5/doc/">docs</a>, <a href="/en/v4.6.5/apidoc/">API</a> &amp; <a href="/en/v4.6.5/examples/">examples</a></li>
<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 (July 2013 i.e. really old) &mdash; you'll find everything you need on the <a href="./two">2.x page</a></li>
<li>Latest v1 &mdash; You're kidding, right?</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>
</div>
</div>
<div class='row'>
<h1 class='topic col-sm-12'>Get Involved</h1>
</div>
<div class='row'>
<div class='col-sm-4'>
<a href='https://github.com/openlayers/openlayers' class='big-link'>
<h3><i class="fa fa-code-fork"></i> Fork the repo</h3>
</a>
</div>
<div class='col-sm-4'>
<a href='https://github.com/openlayers/openlayers/issues' class='big-link'>
<h3><i class="fa fa-bug"></i> Open a ticket</h3>
</a>
</div>
<div class='col-sm-4'>
<a href='http://stackoverflow.com/questions/tagged/openlayers' class='big-link'>
<h3><i class="fa fa-user"></i> Ask a question</h3>
</a>
</div>
</div>
</div>
<script src='/en/latest/legacy/ol.js'></script>
<script src='https://unpkg.com/ol-mapbox-style@latest/dist/olms.js'></script>
<script>
const locations = [
{
center: [0, 4050000],
zoom: 2,
},
{
center: [-10026264.955714773, 3498225.377934253],
zoom: 12.3,
},
{
center: [-8120333.846364162, -5972314.327727663],
zoom: 10.15,
},
{
center: [12700564.586161729, 2575397.3413926377],
zoom: 13.8,
},
{
center: [8976666.32253083, 814262.3154676007],
zoom: 15.7,
},
{
center: [1284003.7367688504, 5950927.737276901],
zoom: 11.19,
},
{
center: [-8468554.506387988, 5696886.564463913],
zoom: 10.11,
},
{
center: [707717.3609533564, 6361291.958635207],
zoom: 10.02,
},
{
center: [3345381.3050933336, -216864.19183635892],
zoom: 13.9,
},
{
center: [3318257.9642649507, -1786301.1175574847],
zoom: 6.1,
},
{
center: [19365301.097574536, -5033096.120372388],
zoom: 10.77,
},
{
center: [-13542913.807564376, 5913315.884147839],
zoom: 11.59,
},
{
center: [9680854.2477813, 3231923.470902604],
zoom: 8.06,
},
{
center: [-10341383.185823392, 1826844.1155603195],
zoom: 9.27,
},
{
center: [3232422.751942559, 5017252.706810253],
zoom: 12.25,
},
{
center: [-16373943.169136822, 8651360.275919426],
zoom: 8.49,
},
{
center: [12475943.19806142, 4172022.2635435928],
zoom: 9.91,
},
];
const container = document.getElementById('map');
const map = new ol.Map({
target: container,
view: new ol.View(locations[Math.random() * locations.length | 0]),
});
map.addControl(new ol.control.FullScreen());
olms.apply(
map,
'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
);
container.onmouseover = function() {
container.className = 'over';
};
container.onmouseout = function() {
container.className = '';
};
</script>

0
site/resources/logo-dark.svg → site/src/theme/img/logo-dark.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 739 B

After

Width:  |  Height:  |  Size: 739 B

0
site/resources/logo-light.svg → site/src/theme/img/logo-light.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 739 B

After

Width:  |  Height:  |  Size: 739 B

BIN
site/src/theme/img/popup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
site/src/theme/img/tiled-layers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
site/src/theme/img/timeline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
site/src/theme/img/vector-layers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

49
site/src/theme/index.css Normal file
View File

@@ -0,0 +1,49 @@
#map {
position: relative;
height: 120px;
}
#tagline {
padding-left: 25%;
margin-bottom: 10px;
}
#tagline p {
font-size: 150%;
font-style: italic;
}
#news {
clear: both;
border: 1px solid #eee;
background-color: #f8f8f8;
border-radius: 4px;
padding: 1rem;
margin: 0 1rem 0 1rem;
}
#news h1 {
margin: 0;
}
img.thumb {
float: right;
margin-left: 10px;
}
/* ol customizations */
.ol-overlaycontainer-stopevent {
opacity: 0;
transition: opacity 300ms ease;
}
/* not done with :hover because the overlay blocks events and has no height */
.over .ol-overlaycontainer-stopevent {
opacity: 1;
}
ul.sponsors {
background-color: #f8f8f8;
}

1
site/src/theme/ol.css Symbolic link
View File

@@ -0,0 +1 @@
../../../src/ol/ol.css

242
site/site.css → site/src/theme/site.css
View File

@@ -4,6 +4,33 @@ body {
font-family: 'Quattrocento Sans', sans-serif; font-family: 'Quattrocento Sans', sans-serif;
font-size: 16px; font-size: 16px;
color: var(--ol-foreground-color); color: var(--ol-foreground-color);
padding-top: 54px;
}
h1 {
margin-top: 40px;
margin-bottom: 30px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 700
}
h1.topic {
font-size: 1.5rem;
color: var(--ol-subtle-foreground-color);
text-transform: uppercase;
} }
code { code {
@@ -13,8 +40,8 @@ code {
border-radius: 3px; border-radius: 3px;
} }
a > code, a>code,
pre > code { pre>code {
color: inherit; color: inherit;
background-color: initial; background-color: initial;
padding: initial; padding: initial;
@@ -26,6 +53,10 @@ a {
text-decoration: none text-decoration: none
} }
a :not(:first-child) {
color: var(--ol-foreground-color);
}
a:hover, a:hover,
a:focus, a:focus,
footer a:hover, footer a:hover,
@@ -61,13 +92,11 @@ pre {
.navbar-brand img { .navbar-brand img {
height: 35px; height: 35px;
width: 35px; width: 35px;
;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
display: inline-block; display: inline-block;
} }
.navbar-dark .navbar-nav .nav-link { .navbar-dark .navbar-nav .nav-link {
color: var(--ol-background-color); color: var(--ol-background-color);
} }
@@ -76,6 +105,14 @@ pre {
color: var(--ol-brand-color); color: var(--ol-brand-color);
} }
footer {
background-color: var(--ol-foreground-color);
color: var(--ol-background-color);
margin-top: 40px;
padding: 10px;
text-align: center;
}
a.dropdown-item { a.dropdown-item {
color: var(--ol-foreground-color); color: var(--ol-foreground-color);
} }
@@ -117,7 +154,7 @@ a.dropdown-item {
} }
#title { #title {
margin-top: 0; margin-top: 1em;
} }
.badge-group { .badge-group {
@@ -225,10 +262,200 @@ ol.inline>li {
margin-bottom: 10px; margin-bottom: 10px;
} }
/* START PRISM THEME */
/**
* VS theme by Andrew Lock (https://andrewlock.net)
* Inspired by Visual Studio syntax coloring
*/
code[class*="language-"],
pre[class*="language-"] {
color: #393A34;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: .9em;
line-height: 1.2em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre>code[class*="language-"] {
font-size: 1em;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
background: #C1DEF1;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
background: #C1DEF1;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border: 1px solid #dddddd;
background-color: white;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .2em;
padding-top: 1px;
padding-bottom: 1px;
background: #f8f8f8;
border: 1px solid #dddddd;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #008000;
font-style: italic;
}
.token.namespace {
opacity: .7;
}
.token.string {
color: #A31515;
}
.token.punctuation,
.token.operator {
color: #393A34;
/* no highlight */
}
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
color: #36acaa;
}
.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*="language-css"] {
color: #0000ff;
}
.token.function {
color: #393A34;
}
.token.deleted,
.language-autohotkey .token.tag {
color: #9a050f;
}
.token.selector,
.language-autohotkey .token.keyword {
color: #00009f;
}
.token.important {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.class-name,
.language-json .token.property {
color: #2B91AF;
}
.token.tag,
.token.selector {
color: #800000;
}
.token.attr-name,
.token.property,
.token.regex,
.token.entity {
color: #ff0000;
}
.token.directive.tag .tag {
background: #ffff00;
color: #393A34;
}
/* overrides color-values for the Line Numbers plugin
* http://prismjs.com/plugins/line-numbers/
*/
.line-numbers.line-numbers .line-numbers-rows {
border-right-color: #a5a5a5;
}
.line-numbers .line-numbers-rows>span:before {
color: #2B91AF;
}
/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight.line-highlight {
background: rgba(193, 222, 241, 0.2);
background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
}
/* END PRISM THEME */
/* restyle prism copy button */ /* restyle prism copy button */
div.code-toolbar {
position: relative;
}
div.code-toolbar>.toolbar { div.code-toolbar>.toolbar {
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity .2s ease-in-out;
}
div.code-toolbar:hover>.toolbar,
div.code-toolbar:focus-within>.toolbar {
opacity: 1; opacity: 1;
top: -2.4em;
} }
div.code-toolbar>.toolbar button { div.code-toolbar>.toolbar button {
@@ -237,6 +464,7 @@ div.code-toolbar>.toolbar button {
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
padding: .615rem .75rem; padding: .615rem .75rem;
border: none;
} }
div.code-toolbar>.toolbar button:hover, div.code-toolbar>.toolbar button:hover,
@@ -286,6 +514,6 @@ div.code-toolbar>.toolbar button:before {
color: var(--ol-foreground-color); color: var(--ol-foreground-color);
} }
.nameContainer .anchor:target + h4 { .nameContainer .anchor:target+h4 {
background-color: inherit; background-color: inherit;
} }