maps: add possibility to set marker colour from a geojson property (#57296)

combo/apps/maps/forms.py

@@ -28,6 +28,10 @@ class IconRadioSelect(forms.RadioSelect):
     option_template_name = 'maps/icon_radio_option.html'
 
 
+class ColourOrTextInput(forms.TextInput):
+    template_name = 'maps/colour_or_text_input.html'
+
+
 class MapLayerForm(forms.ModelForm):
     geojson_url = TemplatableURLField(label=_('Geojson URL'))
 
@@ -35,7 +39,7 @@ class MapLayerForm(forms.ModelForm):
         model = MapLayer
         exclude = ('kind',)
         widgets = {
-            'marker_colour': forms.TextInput(attrs={'type': 'color'}),
+            'marker_colour': ColourOrTextInput,
             'icon_colour': forms.TextInput(attrs={'type': 'color'}),
         }
 

combo/apps/maps/migrations/0016_auto_20210927_1945.py

@@ -0,0 +1,20 @@
+# Generated by Django 2.2.21 on 2021-09-27 17:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('maps', '0015_auto_20210723_1324'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='maplayer',
+            name='marker_colour',
+            field=models.CharField(
+                default='#0000FF', max_length=100, verbose_name='Marker or surface colour'
+            ),
+        ),
+    ]

combo/apps/maps/models.py

@@ -124,7 +124,7 @@ class MapLayer(models.Model):
     tiles_default = models.BooleanField(_('Default tiles layer'), default=False)
 
     geojson_url = models.CharField(_('Geojson URL'), max_length=1024)
-    marker_colour = models.CharField(_('Marker or surface colour'), max_length=7, default='#0000FF')
+    marker_colour = models.CharField(_('Marker or surface colour'), max_length=100, default='#0000FF')
     icon = models.CharField(_('Marker icon'), max_length=32, blank=True, null=True, choices=ICONS)
     icon_colour = models.CharField(_('Icon colour'), max_length=7, default='#000000')
     cache_duration = models.PositiveIntegerField(_('Cache duration'), default=60, help_text=_('In seconds.'))

combo/apps/maps/static/js/combo.map.js

@@ -1,4 +1,12 @@
 $(function() {
+    function getPropertiesListValue(obj, properties_list) {
+       if (properties_list.length == 0) return obj;
+       return getPropertiesListValue(obj[properties_list[0]], properties_list.slice(1));
+    }
+    function getDottedPropertyValue(obj, dotted_property) {
+      return getPropertiesListValue(obj, dotted_property.split('.'))
+    }
+
     L.Map.include(
       {
         init_geojson_layers: function(layers) {
@@ -76,7 +84,12 @@ $(function() {
                       }
                   },
                   pointToLayer: function (feature, latlng) {
-                      var markerStyles = "background-color: " + geojson_layer.marker_colour + ";";
+                      if (geojson_layer.marker_colour[0] == '#') {
+                        var colour = geojson_layer.marker_colour;
+                      } else {
+                        var colour = getDottedPropertyValue(feature.properties, geojson_layer.marker_colour);
+                      }
+                      var markerStyles = "background-color: " + colour + ";";
                       marker = L.divIcon({
                                           iconAnchor: [0, 0],
                                           popupAnchor: [5, -45],
@@ -89,7 +102,12 @@ $(function() {
                       return L.marker(latlng, {icon: marker});
                   },
                   style: function (feature) {
-                    return {weight: 2, color: geojson_layer.marker_colour, fillColor: geojson_layer.marker_colour};
+                    if (geojson_layer.marker_colour[0] == '#') {
+                      var colour = geojson_layer.marker_colour;
+                    } else {
+                      var colour = getDottedPropertyValue(feature.properties, geojson_layer.marker_colour);
+                    }
+                    return {weight: 2, color: colour, fillColor: colour};
                   }
               });
 

combo/apps/maps/templates/maps/colour_or_text_input.html

@@ -0,0 +1,29 @@
+{% load i18n %}
+{% with widget_value=widget.value|stringformat:'s' %}
+{% spaceless %}
+<span id="{{ widget.name }}-joined-buttons" class="gadjo-joined-buttons">
+<button data-mode="color" aria-pressed="{% if widget.value is None or widget_value|slice:":1" == '#' %}true{% else %}false{% endif %}" role="button">{% trans "Colour" %}</button>
+<button data-mode="text" aria-pressed="{% if widget.value != None and widget_value|slice:":1" != '#' %}true{% else %}false{% endif %}" role="button">{% trans "Property" %}</button>
+</span>
+{% endspaceless %}
+<input id="{{ widget.name }}-input" {% if widget.value is None or widget_value|slice:":1" == '#' %}type="color"{% else %}type="text"{% endif %} name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget_value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
+{% endwith %}
+<script>
+$(function() {
+  $('#{{ widget.name }}-joined-buttons button').on('click', function() {
+    var $current_mode = $('#{{ widget.name }}-joined-buttons button[aria-pressed=true]');
+    $current_mode.data('previous-value', $('#{{ widget.name }}-input').val());
+    if ($(this).is('[aria-pressed=true]')) {
+      $('#{{ widget.name }}-joined-buttons button').attr('aria-pressed', 'true');
+      $(this).attr('aria-pressed', 'false');
+    } else {
+      $('#{{ widget.name }}-joined-buttons button').attr('aria-pressed', 'false');
+      $(this).attr('aria-pressed', 'true');
+    }
+    var $new_mode = $('#{{ widget.name }}-joined-buttons button[aria-pressed=true]');
+    var mode = $new_mode.data('mode');
+    $('#{{ widget.name }}-input').prop('type', mode).val($new_mode.data('previous-value'));
+    return false;
+  });
+});
+</script>

combo/manager/static/css/combo.manager.css

@@ -673,3 +673,7 @@ form .choices {
 	display: flex;
 	justify-content: space-between;
 }
+
+#marker_colour-joined-buttons {
+	margin: 4px 0;
+}