From 8129c061529a67dcdbca6c4a01abfeb39989e688 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 15 Aug 2024 12:06:11 +0200 Subject: [PATCH] wip: use CircleMarker instead of Circle icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This needs more work, but would allow: - better performance: - one svg for all features instead of one HTML per feature - as it inherits from path, only visible feature are added to DOM - controling the circle radius, which is something requested from time to time To move forward, we need: - [ ] to have default per UI class (instead of in the SCHEMA), as for example we do not want the same default weight for a line or for the CircleMarker - [ ] maybe to have some static properties, so to keep the circle border color always white, as now (but can be discussed) - [ ] when editing a feature, to show properties according to the current selected UI class, so user can define the radius when "Circle" is selected, but also other path related properties (fillColor, opacity…) --- umap/static/umap/js/modules/data/features.js | 2 ++ umap/static/umap/js/modules/schema.js | 7 +++++++ 2 files changed, 9 insertions(+) diff --git a/umap/static/umap/js/modules/data/features.js b/umap/static/umap/js/modules/data/features.js index 4a1daf4c0..ee2d3ecc5 100644 --- a/umap/static/umap/js/modules/data/features.js +++ b/umap/static/umap/js/modules/data/features.js @@ -14,6 +14,7 @@ import { LeafletPolyline, LeafletPolygon, MaskPolygon, + CircleMarker, } from '../rendering/ui.js' import loadPopup from '../rendering/popup.js' @@ -602,6 +603,7 @@ export class Point extends Feature { } getUIClass() { + if (this.getOption('iconClass') === 'Circle') return CircleMarker return super.getUIClass() || LeafletMarker } diff --git a/umap/static/umap/js/modules/schema.js b/umap/static/umap/js/modules/schema.js index 233c67420..079cd6805 100644 --- a/umap/static/umap/js/modules/schema.js +++ b/umap/static/umap/js/modules/schema.js @@ -407,6 +407,13 @@ export const SCHEMA = { ], default: 'Default', }, + radius: { + type: Number, + default: 4, + impacts: ['data'], + label: translate('Radius in px'), + inheritable: true, + }, remoteData: { type: Object, impacts: ['remote-data'],