Skip to content

Commit c621e90

Browse files
tschaubtschaub
authored
Merge pull request #4 from openlayers/2024
2024
2 parents 2749f45 + 12681c2 commit c621e90

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+18520
-134191
lines changed

‎.eslintignore

-1
This file was deleted.

‎.github/workflows/deploy.yml

+28-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
name: Deploy
22

33
on:
4+
workflow_dispatch:
45
push:
56
branches:
67
- main
@@ -11,33 +12,43 @@ permissions:
1112
id-token: write
1213

1314
concurrency:
14-
group: "pages"
15-
cancel-in-progress: true
15+
group: pages
16+
cancel-in-progress: false
1617

1718
jobs:
18-
deploy:
19-
environment:
20-
name: github-pages
21-
url: ${{ steps.deployment.outputs.page_url }}
19+
build:
2220
runs-on: ubuntu-latest
21+
2322
steps:
24-
- name: Checkout
25-
uses: actions/checkout@v3
23+
- name: Clone Repository
24+
uses: actions/checkout@v4
25+
2626
- name: Setup Node
27-
uses: actions/setup-node@v3
27+
uses: actions/setup-node@v4
2828
with:
29-
node-version: "18"
30-
cache: "npm"
29+
node-version: 'lts/*'
30+
3131
- name: Install Dependencies
3232
run: npm ci
33+
3334
- name: Build
34-
run: npm run build
35+
run: npm run build -- --base /${{github.event.repository.name}}/
36+
3537
- name: Setup Pages
36-
uses: actions/configure-pages@v1
37-
- name: Upload artifact
38-
uses: actions/upload-pages-artifact@v1
38+
uses: actions/configure-pages@v4
39+
40+
- uses: actions/upload-pages-artifact@v3
3941
with:
40-
path: "dist"
42+
path: dist
43+
44+
deploy:
45+
environment:
46+
name: github-pages
47+
url: ${{ steps.deployment.outputs.page_url }}
48+
needs: build
49+
runs-on: ubuntu-latest
50+
name: Deploy
51+
steps:
4152
- name: Deploy to GitHub Pages
4253
id: deployment
43-
uses: actions/deploy-pages@main
54+
uses: actions/deploy-pages@v4

‎.github/workflows/test.yml

+39-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,51 @@
11
name: Test
22

33
on:
4+
push:
5+
branches:
6+
- main
47
pull_request:
58
branches:
69
- main
710

11+
permissions:
12+
contents: read
13+
814
jobs:
915
test:
16+
name: Test
1017
runs-on: ubuntu-latest
18+
1119
steps:
12-
- uses: actions/checkout@v3
13-
- uses: actions/setup-node@v3
20+
- name: Clone Repository
21+
uses: actions/checkout@v4
22+
23+
- name: Setup Node
24+
uses: actions/setup-node@v4
1425
with:
15-
node-version: '18'
16-
cache: 'npm'
17-
- run: npm ci
18-
- run: npm test
19-
- run: npm run build
26+
node-version: 'lts/*'
27+
28+
- name: Install Dependencies
29+
run: npm ci
30+
31+
- name: Run Tests
32+
run: npm test
33+
34+
build:
35+
name: Build
36+
runs-on: ubuntu-latest
37+
38+
steps:
39+
- name: Clone Repository
40+
uses: actions/checkout@v4
41+
42+
- name: Setup Node
43+
uses: actions/setup-node@v4
44+
with:
45+
node-version: 'lts/*'
46+
47+
- name: Install Dependencies
48+
run: npm ci
49+
50+
- name: Build
51+
run: npm run build

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
/node_modules/
22
/dist/
3+
.env

‎examples/band-math.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-light.svg" media="(prefers-color-scheme: light)">
7+
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
8+
<link rel="stylesheet" href="./common.css">
9+
<title>Band Math</title>
10+
<style>
11+
#overlay {
12+
position: absolute;
13+
top: 1rem;
14+
right: 1rem;
15+
color: white;
16+
font-size: x-large;
17+
text-shadow: rgb(0, 0, 0) 0 0 2px;
18+
min-width: 8rem;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="map"></div>
24+
<div id="overlay">NDVI: <span id="output"></span></div>
25+
<script type="module" src="./band-math.js"></script>
26+
</body>
27+
</html>

‎examples/band-math.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import GeoTIFF from 'ol/source/GeoTIFF.js';
2+
import Map from 'ol/Map.js';
3+
import TileLayer from 'ol/layer/WebGLTile.js';
4+
5+
const source = new GeoTIFF({
6+
sources: [
7+
{
8+
// visible red, band 1 in the style expression above
9+
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/B04.tif',
10+
max: 10000,
11+
},
12+
{
13+
// near infrared, band 2 in the style expression above
14+
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/B08.tif',
15+
max: 10000,
16+
},
17+
],
18+
});
19+
20+
const layer = new TileLayer({
21+
style: {
22+
color: [
23+
'interpolate',
24+
['linear'],
25+
// calculate NDVI, bands come from the sources below
26+
['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
27+
// color ramp for NDVI values, ranging from -1 to 1
28+
-0.2,
29+
[191, 191, 191],
30+
-0.1,
31+
[219, 219, 219],
32+
0,
33+
[255, 255, 224],
34+
0.025,
35+
[255, 250, 204],
36+
0.05,
37+
[237, 232, 181],
38+
0.075,
39+
[222, 217, 156],
40+
0.1,
41+
[204, 199, 130],
42+
0.125,
43+
[189, 184, 107],
44+
0.15,
45+
[176, 194, 97],
46+
0.175,
47+
[163, 204, 89],
48+
0.2,
49+
[145, 191, 82],
50+
0.25,
51+
[128, 179, 71],
52+
0.3,
53+
[112, 163, 64],
54+
0.35,
55+
[97, 150, 54],
56+
0.4,
57+
[79, 138, 46],
58+
0.45,
59+
[64, 125, 36],
60+
0.5,
61+
[48, 110, 28],
62+
0.55,
63+
[33, 97, 18],
64+
0.6,
65+
[15, 84, 10],
66+
0.65,
67+
[0, 69, 0],
68+
],
69+
},
70+
source: source,
71+
});
72+
73+
const map = new Map({
74+
target: 'map',
75+
layers: [layer],
76+
view: source.getView().then((sourceView) => ({
77+
center: sourceView.center,
78+
projection: sourceView.projection,
79+
zoom: 13,
80+
})),
81+
});
82+
83+
const output = document.getElementById('output');
84+
function displayPixelValue(event) {
85+
const data = layer.getData(event.pixel);
86+
if (!data) {
87+
return;
88+
}
89+
const red = data[0];
90+
const nir = data[1];
91+
const ndvi = (nir - red) / (nir + red);
92+
output.textContent = ndvi.toFixed(2);
93+
}
94+
map.on(['pointermove', 'click'], displayPixelValue);

‎examples/basic-map.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-light.svg"
8+
media="(prefers-color-scheme: light)">
9+
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-dark.svg"
10+
media="(prefers-color-scheme: dark)">
11+
<link rel="stylesheet" href="./common.css">
12+
<title>Basic Map</title>
13+
<style>
14+
#output {
15+
position: absolute;
16+
top: 1em;
17+
right: 1em;
18+
-webkit-text-stroke: 1px grey;
19+
color: white;
20+
font-weight: bold;
21+
font-size: x-large;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<div id="map"></div>
28+
<div id="output">FOSS4G Tour</div>
29+
<script type="module" src="./basic-map.js"></script>
30+
</body>
31+
32+
</html>

0 commit comments

Comments
 (0)