From 9aa3c00879371a8e028045603be74fef72052d53 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Sat, 1 Jan 2022 11:22:41 -0700
Subject: [PATCH] Update export map example

---
 examples/box-selection.js |  2 +-
 examples/export-map.js    | 36 +++++++++++++++++++++---------------
 examples/vector-layer.js  |  2 +-
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/examples/box-selection.js b/examples/box-selection.js
index 292d42424d..22c9ffd745 100644
--- a/examples/box-selection.js
+++ b/examples/box-selection.js
@@ -14,7 +14,7 @@ const vectorSource = new VectorSource({
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: '#eeeeee',
   }),
 });
 
diff --git a/examples/export-map.js b/examples/export-map.js
index f33467988d..060fbcc5c4 100644
--- a/examples/export-map.js
+++ b/examples/export-map.js
@@ -2,28 +2,33 @@ import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Fill, Stroke, Style} from '../src/ol/style.js';
+import {Fill, Style} from '../src/ol/style.js';
 import {
   Heatmap as HeatmapLayer,
   Vector as VectorLayer,
 } from '../src/ol/layer.js';
+import {asArray} from '../src/ol/color.js';
+
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
 
 const map = new Map({
   layers: [
     new VectorLayer({
-      background: '#a9d3df',
       source: new VectorSource({
-        url: 'data/geojson/countries.geojson',
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
         format: new GeoJSON(),
       }),
-      style: new Style({
-        stroke: new Stroke({
-          color: '#ccc',
-        }),
-        fill: new Fill({
-          color: 'white',
-        }),
-      }),
+      background: 'white',
+      style: function (feature) {
+        const color = asArray(feature.get('COLOR_NNH') || '#eeeeee');
+        color[3] = 0.75;
+        style.getFill().setColor(color);
+        return style;
+      },
     }),
     new HeatmapLayer({
       source: new VectorSource({
@@ -35,7 +40,7 @@ const map = new Map({
       },
       radius: 15,
       blur: 15,
-      opacity: 0.5,
+      opacity: 0.75,
     }),
   ],
   target: 'map',
@@ -56,15 +61,16 @@ document.getElementById('export-png').addEventListener('click', function () {
       map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
       function (canvas) {
         if (canvas.width > 0) {
+          const opacity =
+            canvas.parentNode.style.opacity || canvas.style.opacity;
+          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+
           const backgroundColor = canvas.parentNode.style.backgroundColor;
           if (backgroundColor) {
             mapContext.fillStyle = backgroundColor;
             mapContext.fillRect(0, 0, canvas.width, canvas.height);
           }
 
-          const opacity =
-            canvas.parentNode.style.opacity || canvas.style.opacity;
-          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
           let matrix;
           const transform = canvas.style.transform;
           if (transform) {
diff --git a/examples/vector-layer.js b/examples/vector-layer.js
index b721469907..85da839068 100644
--- a/examples/vector-layer.js
+++ b/examples/vector-layer.js
@@ -7,7 +7,7 @@ import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: '#eeeeee',
   }),
 });