From 26e6bf505c207f8798c3789f5c954bb053a505f9 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Sat, 19 Mar 2022 10:32:41 +0100
Subject: [PATCH] Add loading spinner example

---
 examples/load-events.css  | 30 ++++++++++++++++++++++++++++++
 examples/load-events.html | 13 +++++++++++++
 examples/load-events.js   | 31 +++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 examples/load-events.css
 create mode 100644 examples/load-events.html
 create mode 100644 examples/load-events.js

diff --git a/examples/load-events.css b/examples/load-events.css
new file mode 100644
index 0000000000..1e02f3ac67
--- /dev/null
+++ b/examples/load-events.css
@@ -0,0 +1,30 @@
+.map {
+  background: #85ccf9;
+  position: relative;
+}
+#map {
+  height: 400px;
+  position: relative;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner:after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  margin-left: -20px;
+  border-radius: 50%;
+  border: 5px solid rgba(180, 180, 180, 0.6);
+  border-top-color: rgba(0, 0, 0, 0.6);
+  animation: spinner 0.6s linear infinite;
+}
diff --git a/examples/load-events.html b/examples/load-events.html
new file mode 100644
index 0000000000..69a8db0e61
--- /dev/null
+++ b/examples/load-events.html
@@ -0,0 +1,13 @@
+---
+layout: example.html
+title: Loading Spinner
+shortdesc: Example using load events to show a loading spinner.
+docs: >
+  You can listen for the map's <code>loadstart</code> and <code>loadend</code> events
+  to show a loading spinner on top of the map.
+tags: "events, loading, spinner"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
+    value: Your Mapbox access token from https://mapbox.com/ here
+---
+<div id="map" class="map"></div>
diff --git a/examples/load-events.js b/examples/load-events.js
new file mode 100644
index 0000000000..1b6d026ce1
--- /dev/null
+++ b/examples/load-events.js
@@ -0,0 +1,31 @@
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+const source = new XYZ({
+  attributions: attributions,
+  url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+  tileSize: 512,
+});
+
+const map = new Map({
+  layers: [new TileLayer({source: source})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+map.on('loadstart', function () {
+  map.getTargetElement().classList.add('spinner');
+});
+map.on('loadend', function () {
+  map.getTargetElement().classList.remove('spinner');
+});