From c182bbf66b09c4d90fa82e7e05b4b0c7e9f47853 Mon Sep 17 00:00:00 2001
From: Duck <dan.little@planet.com>
Date: Thu, 16 Jun 2022 07:56:03 -0700
Subject: [PATCH] Show an example of changing the color with setfill

---
 examples/regularshape.html   |  3 +++
 examples/regularshape.js     | 11 +++++++++++
 src/ol/style/RegularShape.js |  2 ++
 3 files changed, 16 insertions(+)

diff --git a/examples/regularshape.html b/examples/regularshape.html
index 59cbf4b762..138ae58ac4 100644
--- a/examples/regularshape.html
+++ b/examples/regularshape.html
@@ -12,3 +12,6 @@ docs: >
 tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x"
 ---
 <div id="map" class="map"></div>
+<div>
+  <button id="color-changer">Change Square Colors</button>
+</div>
diff --git a/examples/regularshape.js b/examples/regularshape.js
index 91279aea76..5fa56f8edb 100644
--- a/examples/regularshape.js
+++ b/examples/regularshape.js
@@ -129,3 +129,14 @@ const map = new Map({
     zoom: 2,
   }),
 });
+
+const colors = ['blue', 'green', 'yellow', 'aqua', 'red'];
+let currentColor = 0;
+
+document.getElementById('color-changer').addEventListener('click', function () {
+  styles.square
+    .getImage()
+    .setFill(new Fill({color: colors[currentColor % colors.length]}));
+  vectorLayer.changed();
+  currentColor++;
+});
diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index 587877ec47..06564fb5e5 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -207,6 +207,7 @@ class RegularShape extends ImageStyle {
    */
   setFill(fill) {
     this.fill_ = fill;
+    this.render();
   }
 
   /**
@@ -325,6 +326,7 @@ class RegularShape extends ImageStyle {
    */
   setStroke(stroke) {
     this.stroke_ = stroke;
+    this.render();
   }
 
   /**