From 0d6368d4ec3219c0e9bab283634b4f8b0f1924ab Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Tue, 25 Jun 2019 10:26:26 +0200
Subject: [PATCH 1/2] Remove underscore from protected function, fix
 indentation, remove typecast

---
 src/ol/style/Circle.js       | 10 +++++-----
 src/ol/style/RegularShape.js |  5 ++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js
index 659c71d305..b778cbde26 100644
--- a/src/ol/style/Circle.js
+++ b/src/ol/style/Circle.js
@@ -53,11 +53,11 @@ class CircleStyle extends RegularShape {
   }
 
   /**
-  * Set the circle radius.
-  *
-  * @param {number} radius Circle radius.
-  * @api
-  */
+   * Set the circle radius.
+   *
+   * @param {number} radius Circle radius.
+   * @api
+   */
   setRadius(radius) {
     this.radius_ = radius;
   }
diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index d8dd972151..b7fcf9b930 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -142,7 +142,7 @@ class RegularShape extends ImageStyle {
      */
     this.hitDetectionImageSize_ = null;
 
-    this.render_();
+    this.render();
 
   }
 
@@ -301,7 +301,7 @@ class RegularShape extends ImageStyle {
   /**
    * @protected
    */
-  render_() {
+  render() {
     let lineCap = '';
     let lineJoin = '';
     let miterLimit = 0;
@@ -338,7 +338,6 @@ class RegularShape extends ImageStyle {
 
     let size = 2 * (this.radius_ + strokeWidth) + 1;
 
-    /** @type {RenderOptions} */
     const renderOptions = {
       strokeStyle: strokeStyle,
       strokeWidth: strokeWidth,

From 9aa11d2e11ad4eb850bbfd8e4a712b1fec011532 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Tue, 25 Jun 2019 10:42:05 +0200
Subject: [PATCH 2/2] Update the circle style after setRadius calls

---
 rendering/cases/circle-style/expected.png | Bin 0 -> 4263 bytes
 rendering/cases/circle-style/main.js      |  57 ++++++++++++++++++++++
 src/ol/style/Circle.js                    |   1 +
 3 files changed, 58 insertions(+)
 create mode 100644 rendering/cases/circle-style/expected.png
 create mode 100644 rendering/cases/circle-style/main.js

diff --git a/rendering/cases/circle-style/expected.png b/rendering/cases/circle-style/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..84eef2b6e8421a370246cdf7d2126acdd96abfd7
GIT binary patch
literal 4263
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
W)iIw`f&AwIaI!!72l<%)wSNJFfcDt{

literal 0
HcmV?d00001

diff --git a/rendering/cases/circle-style/main.js b/rendering/cases/circle-style/main.js
new file mode 100644
index 0000000000..d4f743a627
--- /dev/null
+++ b/rendering/cases/circle-style/main.js
@@ -0,0 +1,57 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Circle from '../../../src/ol/style/Circle.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+
+const vectorSource = new VectorSource();
+
+vectorSource.addFeatures([
+  new Feature({
+    geometry: new Point([-50, 50]),
+    radius: 10
+  }),
+  new Feature({
+    geometry: new Point([50, -50]),
+    radius: 20
+  }),
+  new Feature({
+    geometry: new Point([50, 50]),
+    radius: 30
+  })
+]);
+
+const style = new Style({
+  image: new Circle({
+    radius: 1,
+    stroke: new Stroke({
+      color: '#00f',
+      width: 3
+    })
+  })
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource,
+      style: function(feature) {
+        style.getImage().setRadius(feature.get('radius'));
+        return style;
+      }
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();
diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js
index b778cbde26..59161e0456 100644
--- a/src/ol/style/Circle.js
+++ b/src/ol/style/Circle.js
@@ -60,6 +60,7 @@ class CircleStyle extends RegularShape {
    */
   setRadius(radius) {
     this.radius_ = radius;
+    this.render();
   }
 }