Skip to content

Commit

Permalink
Merge pull request #4 from openlayers/2024
Browse files Browse the repository at this point in the history
2024
  • Loading branch information
tschaub authored Dec 5, 2024
2 parents 2749f45 + 12681c2 commit c621e90
Show file tree
Hide file tree
Showing 69 changed files with 18,520 additions and 134,191 deletions.
1 change: 0 additions & 1 deletion .eslintignore

This file was deleted.

45 changes: 28 additions & 17 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
name: Deploy

on:
workflow_dispatch:
push:
branches:
- main
Expand All @@ -11,33 +12,43 @@ permissions:
id-token: write

concurrency:
group: "pages"
cancel-in-progress: true
group: pages
cancel-in-progress: false

jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
build:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v3
- name: Clone Repository
uses: actions/checkout@v4

- name: Setup Node
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: "18"
cache: "npm"
node-version: 'lts/*'

- name: Install Dependencies
run: npm ci

- name: Build
run: npm run build
run: npm run build -- --base /${{github.event.repository.name}}/

- name: Setup Pages
uses: actions/configure-pages@v1
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
uses: actions/configure-pages@v4

- uses: actions/upload-pages-artifact@v3
with:
path: "dist"
path: dist

deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
name: Deploy
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@main
uses: actions/deploy-pages@v4
46 changes: 39 additions & 7 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -1,19 +1,51 @@
name: Test

on:
push:
branches:
- main
pull_request:
branches:
- main

permissions:
contents: read

jobs:
test:
name: Test
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- name: Clone Repository
uses: actions/checkout@v4

- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'npm'
- run: npm ci
- run: npm test
- run: npm run build
node-version: 'lts/*'

- name: Install Dependencies
run: npm ci

- name: Run Tests
run: npm test

build:
name: Build
runs-on: ubuntu-latest

steps:
- name: Clone Repository
uses: actions/checkout@v4

- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 'lts/*'

- name: Install Dependencies
run: npm ci

- name: Build
run: npm run build
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/node_modules/
/dist/
.env
27 changes: 27 additions & 0 deletions examples/band-math.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="./common.css">
<title>Band Math</title>
<style>
#overlay {
position: absolute;
top: 1rem;
right: 1rem;
color: white;
font-size: x-large;
text-shadow: rgb(0, 0, 0) 0 0 2px;
min-width: 8rem;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="overlay">NDVI: <span id="output"></span></div>
<script type="module" src="./band-math.js"></script>
</body>
</html>
94 changes: 94 additions & 0 deletions examples/band-math.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';

const source = new GeoTIFF({
sources: [
{
// visible red, band 1 in the style expression above
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',
max: 10000,
},
{
// near infrared, band 2 in the style expression above
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',
max: 10000,
},
],
});

const layer = new TileLayer({
style: {
color: [
'interpolate',
['linear'],
// calculate NDVI, bands come from the sources below
['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
// color ramp for NDVI values, ranging from -1 to 1
-0.2,
[191, 191, 191],
-0.1,
[219, 219, 219],
0,
[255, 255, 224],
0.025,
[255, 250, 204],
0.05,
[237, 232, 181],
0.075,
[222, 217, 156],
0.1,
[204, 199, 130],
0.125,
[189, 184, 107],
0.15,
[176, 194, 97],
0.175,
[163, 204, 89],
0.2,
[145, 191, 82],
0.25,
[128, 179, 71],
0.3,
[112, 163, 64],
0.35,
[97, 150, 54],
0.4,
[79, 138, 46],
0.45,
[64, 125, 36],
0.5,
[48, 110, 28],
0.55,
[33, 97, 18],
0.6,
[15, 84, 10],
0.65,
[0, 69, 0],
],
},
source: source,
});

const map = new Map({
target: 'map',
layers: [layer],
view: source.getView().then((sourceView) => ({
center: sourceView.center,
projection: sourceView.projection,
zoom: 13,
})),
});

const output = document.getElementById('output');
function displayPixelValue(event) {
const data = layer.getData(event.pixel);
if (!data) {
return;
}
const red = data[0];
const nir = data[1];
const ndvi = (nir - red) / (nir + red);
output.textContent = ndvi.toFixed(2);
}
map.on(['pointermove', 'click'], displayPixelValue);
32 changes: 32 additions & 0 deletions examples/basic-map.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-light.svg"
media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-dark.svg"
media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="./common.css">
<title>Basic Map</title>
<style>
#output {
position: absolute;
top: 1em;
right: 1em;
-webkit-text-stroke: 1px grey;
color: white;
font-weight: bold;
font-size: x-large;
}
</style>
</head>

<body>
<div id="map"></div>
<div id="output">FOSS4G Tour</div>
<script type="module" src="./basic-map.js"></script>
</body>

</html>
Loading

0 comments on commit c621e90

Please sign in to comment.