Merge pull request #1982 from umap-project/categorized-color

fix: use correct color for categorized/choropleth layers in browser

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.getPreviewColor()
     colorBox.style.backgroundColor = bgcolor
     if (symbol && symbol !== U.SCHEMA.iconUrl.default) {
       const icon = U.Icon.makeIconElement(symbol, colorBox)

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')

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)