From 00483882a1c822557fa4abb74efdbbe5d5cb7b36 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 9 Jul 2024 11:58:29 +0200 Subject: [PATCH 1/2] fix: use correct color for categorized/choropleth layers in browser --- umap/static/umap/js/modules/browser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js index db988d7e..2f9a8741 100644 --- a/umap/static/umap/js/modules/browser.js +++ b/umap/static/umap/js/modules/browser.js @@ -37,7 +37,7 @@ export default class Browser { ? U.Icon.prototype.formatUrl(feature._getIconUrl(), feature) : null title.textContent = feature.getDisplayName() || '—' - const bgcolor = feature.getDynamicOption('color') + const bgcolor = feature.getDynamicOption(feature.staticOptions.mainColor) colorBox.style.backgroundColor = bgcolor if (symbol && symbol !== U.SCHEMA.iconUrl.default) { const icon = U.Icon.makeIconElement(symbol, colorBox) From e3f59850a74f8d90cc287965e0ee1f1d8b37a06f Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 9 Jul 2024 12:47:10 +0200 Subject: [PATCH 2/2] fix: fix preview color for polygons Use usually set the `color` property, but we want to use the fillColor if it sets. --- umap/static/umap/js/modules/browser.js | 2 +- umap/static/umap/js/umap.features.js | 12 ++++++++++++ umap/static/umap/js/umap.popup.js | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js index 2f9a8741..a5ef3c36 100644 --- a/umap/static/umap/js/modules/browser.js +++ b/umap/static/umap/js/modules/browser.js @@ -37,7 +37,7 @@ export default class Browser { ? U.Icon.prototype.formatUrl(feature._getIconUrl(), feature) : null title.textContent = feature.getDisplayName() || '—' - const bgcolor = feature.getDynamicOption(feature.staticOptions.mainColor) + const bgcolor = feature.getPreviewColor() colorBox.style.backgroundColor = bgcolor if (symbol && symbol !== U.SCHEMA.iconUrl.default) { const icon = U.Icon.makeIconElement(symbol, colorBox) diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index df355a9a..191fa638 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -1,6 +1,10 @@ U.FeatureMixin = { staticOptions: { mainColor: 'color' }, + getPreviewColor: function () { + return this.getDynamicOption(this.staticOptions.mainColor) + }, + getSyncMetadata: function () { return { subject: 'feature', @@ -1203,6 +1207,14 @@ U.Polygon = L.Polygon.extend({ return options }, + getPreviewColor: function () { + // If user set a fillColor, use it, otherwise default to color + // which is usually the only one set + const color = this.getDynamicOption(this.staticOptions.mainColor) + if (color && color !== U.SCHEMA.color.default) return color + return this.getDynamicOption('color') + }, + getInteractionOptions: () => { const options = U.FeatureMixin.getInteractionOptions() options.push('properties._umap_options.interactive') diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js index 411e14bd..6c4d48e1 100644 --- a/umap/static/umap/js/umap.popup.js +++ b/umap/static/umap/js/umap.popup.js @@ -265,7 +265,7 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({ const props = this.feature.properties const container = L.DomUtil.add('div') const title = L.DomUtil.add('h3', 'popup-title', container) - const color = this.feature.getDynamicOption('color') + const color = this.feature.getPreviewColor() title.style.backgroundColor = color const iconUrl = this.feature.getDynamicOption('iconUrl') const icon = U.Icon.makeIconElement(iconUrl, title)