Merge pull request #1160 from umap-project/smart-color

Allow to use properties as color value

umap/static/umap/js/umap.features.js

@@ -109,7 +109,7 @@ L.U.FeatureMixin = {
     properties.unshift('properties.name')
     builder = new L.U.FormBuilder(this, properties, {
       id: 'umap-feature-properties',
-      callback: this.resetTooltip,
+      callback: this._redraw, // In case we have dynamic options…
     })
     container.appendChild(builder.build())
     this.appendEditFieldsets(container)
@@ -273,6 +273,18 @@ L.U.FeatureMixin = {
     return value
   },
 
+  getDynamicOption: function (option, fallback) {
+    let value = this.getOption(option, fallback)
+    // There is a variable inside.
+    if (typeof value === 'string' && value.indexOf('{') != -1) {
+      value = L.Util.greedyTemplate(value, this.properties)
+      // We've not been able to replace the variable, let's reset
+      // so we can set a decent default at next step.
+      if (value.indexOf('{') != -1) value = undefined
+    }
+    return value
+  },
+
   zoomTo: function (e) {
     e = e || {}
     const easing = e.easing !== undefined ? e.easing : this.map.options.easing
@@ -709,7 +721,7 @@ L.U.PathMixin = {
     let option
     for (const idx in this.styleOptions) {
       option = this.styleOptions[idx]
-      options[option] = this.getOption(option)
+      options[option] = this.getDynamicOption(option)
     }
     if (options.interactive) this.options.pointerEvents = 'visiblePainted'
     else this.options.pointerEvents = 'stroke'

umap/static/umap/js/umap.icon.js

@@ -24,7 +24,7 @@ L.U.Icon = L.DivIcon.extend({
 
   _getColor: function () {
     let color
-    if (this.feature) color = this.feature.getOption('color')
+    if (this.feature) color = this.feature.getDynamicOption('color')
     else if (this.options.color) color = this.options.color
     else color = this.map.getDefaultOption('color')
     return color

umap/static/umap/test/DataLayer.js

@@ -373,6 +373,36 @@ describe('L.U.DataLayer', function () {
       assert.ok(qs('div.icon_container'))
     })
   })
+  describe('#smart-options()', function () {
+    let poly, marker
+    before(function () {
+      this.datalayer.eachLayer(function (layer) {
+        if (!poly && layer instanceof L.Polygon) {
+          poly = layer
+        }
+        if (!marker && layer instanceof L.Marker) {
+          marker = layer
+        }
+      })
+    })
+
+    it('should parse color variable', function () {
+      let icon = qs('div.umap-div-icon .icon_container')
+      poly.properties.mycolor = 'DarkGoldenRod'
+      marker.properties.mycolor = 'DarkRed'
+      marker.properties._umap_options.color = undefined
+      assert.notOk(qs('path[fill="DarkGoldenRod"]'))
+      assert.equal(icon.style.backgroundColor, 'olivedrab')
+      this.datalayer.options.color = '{mycolor}'
+      this.datalayer.options.fillColor = '{mycolor}'
+      this.datalayer.indexProperties(poly)
+      this.datalayer.indexProperties(marker)
+      this.datalayer.redraw()
+      icon = qs('div.umap-div-icon .icon_container')
+      assert.equal(icon.style.backgroundColor, 'darkred')
+      assert.ok(qs('path[fill="DarkGoldenRod"]'))
+    })
+  })
   describe('#advanced-filters()', function () {
     before(function () {
       this.server.respondWith(
@@ -399,7 +429,5 @@ describe('L.U.DataLayer', function () {
       // so it should not be affected by the filter
       assert.ok(qs('path[fill="SteelBlue"]'))
     })
-
-
   })
 })