From 3f73a2f04fd1699e22120586613cdce4162e31cf Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Wed, 15 Dec 2021 08:26:42 -0700
Subject: [PATCH] Add a layer opacity example

---
 examples/layer-opacity.html | 17 +++++++++++++++
 examples/layer-opacity.js   | 42 +++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 examples/layer-opacity.html
 create mode 100644 examples/layer-opacity.js

diff --git a/examples/layer-opacity.html b/examples/layer-opacity.html
new file mode 100644
index 0000000000..35aaf182fc
--- /dev/null
+++ b/examples/layer-opacity.html
@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Layer Opacity
+shortdesc: Adjust layer opacity based on user input
+docs: >
+  The `layer.setOpacity()` method can be called to adjust the opacity of a layer.
+tags: "opacity"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+---
+<div id="map" class="map"></div>
+<label>
+  Layer opacity
+  <input id="opacity-input" type="range" min="0" max="1" step="0.01" value="1" />
+  <span id="opacity-output"></span>
+</label>
diff --git a/examples/layer-opacity.js b/examples/layer-opacity.js
new file mode 100644
index 0000000000..b172f5aca9
--- /dev/null
+++ b/examples/layer-opacity.js
@@ -0,0 +1,42 @@
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+
+const imagery = new TileLayer({
+  className: 'ol-layer-imagery',
+  source: new XYZ({
+    attributions:
+      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ',
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+    crossOrigin: '',
+  }),
+});
+
+const osm = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  layers: [imagery, osm],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+const opacityInput = document.getElementById('opacity-input');
+const opacityOutput = document.getElementById('opacity-output');
+function update() {
+  const opacity = parseFloat(opacityInput.value);
+  osm.setOpacity(opacity);
+  opacityOutput.innerText = opacity.toFixed(2);
+}
+opacityInput.addEventListener('input', update);
+
+update();