From 8250e822c16d71832277c308b3c64927e48222db Mon Sep 17 00:00:00 2001
From: mgermerie <73115044+mgermerie@users.noreply.github.com>
Date: Thu, 16 Sep 2021 14:31:04 +0200
Subject: [PATCH] feature(Style): points can now be displayed as icons

---
 examples/source_file_shapefile.html |  5 ++++
 src/Converter/Feature2Texture.js    |  3 ++
 src/Layer/LabelLayer.js             | 43 +++++++++++++++++++++++++++++
 test/unit/label.js                  | 10 +++++++
 4 files changed, 61 insertions(+)

diff --git a/examples/source_file_shapefile.html b/examples/source_file_shapefile.html
index f03815db00..6a94ce4793 100644
--- a/examples/source_file_shapefile.html
+++ b/examples/source_file_shapefile.html
@@ -61,6 +61,8 @@
                     point: {
                         color: 'white',
                         line: 'green',
+                        radius: 5,
+                        width: 1,
                     },
                     text: {
                         field: '{name}\n(id: {station_id})',
@@ -68,6 +70,9 @@
                         haloColor: 'white',
                         haloWidth: 1,
                         font: ['monospace'],
+                        anchor: 'top-left',
+                        justify: 'left',
+                        offset: [5, 5],
                     },
                 });
 
diff --git a/src/Converter/Feature2Texture.js b/src/Converter/Feature2Texture.js
index b5f9611448..3159556f86 100644
--- a/src/Converter/Feature2Texture.js
+++ b/src/Converter/Feature2Texture.js
@@ -114,6 +114,9 @@ function drawFeature(ctx, feature, extent, style, invCtxScale) {
 
             if (contextStyle) {
                 if (feature.type === FEATURE_TYPES.POINT) {
+                    // Prevent trying to draw points when style.point is not defined by the user
+                    if (!contextStyle.point) { continue; }
+
                     // cross multiplication to know in the extent system the real size of
                     // the point
                     const px = (Math.round(contextStyle.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;
diff --git a/src/Layer/LabelLayer.js b/src/Layer/LabelLayer.js
index c143c8daa5..1ccb3a9973 100644
--- a/src/Layer/LabelLayer.js
+++ b/src/Layer/LabelLayer.js
@@ -57,6 +57,49 @@ class LabelLayer extends Layer {
         this.buildExtent = true;
 
         this.labelDomelement = config.domElement;
+
+        if (
+            this.style
+            && (this.style.point && (this.style.point.color || this.style.point.line))
+            && !(this.style.icon && (this.style.icon.source || this.style.icon.key))
+        ) {
+            // Create a canvas
+            const canvas = document.createElement('canvas');
+
+            // Set canvas dimensions
+            const width = this.style.point.radius + this.style.point.width;
+            canvas.width = 2 * width;
+            canvas.height = 2 * width;
+
+            if (canvas.getContext) {
+                const ctx = canvas.getContext('2d');
+
+                // Draw a circle with dimensions specified in layer style
+                ctx.beginPath();
+                ctx.arc(width, width, this.style.point.radius, 0, 2 * Math.PI);
+
+                // Apply transparency to the circle if specified in layer style
+                ctx.globalAlpha = this.style.point.opacity;
+
+                // Fill the circle if specified in layer style
+                if (this.style.point.color) {
+                    ctx.fillStyle = this.style.point.color;
+                    ctx.fill();
+                }
+
+                // Draw the circle's edges if specified in layer style
+                if (this.style.point.line) {
+                    ctx.lineWidth = this.style.point.width;
+                    ctx.strokeStyle = this.style.point.line;
+                    ctx.stroke();
+                }
+
+                this.style.icon = this.style.icon || {};
+                this.style.icon.source = canvas.toDataURL();
+                this.style.point.color = undefined;
+                this.style.point.line = undefined;
+            }
+        }
     }
 
     /**
diff --git a/test/unit/label.js b/test/unit/label.js
index 7007f043c3..b84350330f 100644
--- a/test/unit/label.js
+++ b/test/unit/label.js
@@ -38,6 +38,16 @@ describe('LabelLayer', function () {
         const labels = layer.convert(collection, extent);
         assert.ok(labels[0].isLabel);
     });
+
+    it('should replace style.point by style.icon', function () {
+        const labelLayer = new LabelLayer('labelLayer', {
+            source: false,
+            style: { point: { color: 'red', line: 'green' } },
+        });
+        labelLayer.source = {};
+        assert.strictEqual(labelLayer.style.point.color, undefined);
+        assert.strictEqual(labelLayer.style.point.line, undefined);
+    });
 });
 
 describe('Label', function () {