maps: add handling of marker behaviour on click (#21034)

combo/apps/maps/migrations/0006_auto_20180627_0841.py

@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('maps', '0005_auto_20180212_1742'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='map',
+            name='marker_behaviour_onclick',
+            field=models.CharField(default=b'none', max_length=32, verbose_name='Marker behaviour on click', choices=[(b'none', 'Nothing'), (b'display_data', 'Display data in popup')]),
+        ),
+    ]

combo/apps/maps/models.py

@@ -69,6 +69,11 @@ ICONS = [
     ('wheelchair', _('Wheelchair')),
 ]
 
+MARKER_BEHAVIOUR_ONCLICK = [
+    ('none', _('Nothing')),
+    ('display_data', _('Display data in popup')),
+]
+
 ZOOM_LEVELS = [ ('0', _('Whole world')),
                 ('9', _('Wide area')),
                 ('11', _('Area')),
@@ -221,6 +226,8 @@ class Map(CellBase):
     max_zoom = models.CharField(_('Maximal zoom level'), max_length=2,
                                 choices=ZOOM_LEVELS, default=19)
     group_markers = models.BooleanField(_('Group markers in clusters'), default=False)
+    marker_behaviour_onclick = models.CharField(_('Marker behaviour on click'), max_length=32,
+                                                default='none', choices=MARKER_BEHAVIOUR_ONCLICK)
     layers = models.ManyToManyField(MapLayer, verbose_name=_('Layers'), blank=True)
 
     template_name = 'maps/map_cell.html'
@@ -238,7 +245,7 @@ class Map(CellBase):
 
     def get_default_form_class(self):
         fields = ('title', 'initial_state', 'initial_zoom', 'min_zoom',
-                  'max_zoom', 'group_markers', 'layers')
+                  'max_zoom', 'group_markers', 'marker_behaviour_onclick', 'layers')
         widgets = {'layers': forms.widgets.CheckboxSelectMultiple}
         return forms.models.modelform_factory(self.__class__, fields=fields,
                                              widgets=widgets)
@@ -268,4 +275,5 @@ class Map(CellBase):
         ctx['map_attribution'] = settings.COMBO_MAP_ATTRIBUTION
         ctx['max_bounds'] = settings.COMBO_MAP_MAX_BOUNDS
         ctx['group_markers'] = self.group_markers
+        ctx['marker_behaviour_onclick'] = self.marker_behaviour_onclick
         return ctx

combo/apps/maps/static/css/combo.map.scss

@@ -74,8 +74,26 @@ div.leaflet-div-icon span i {
     height: 50%;
 }
 
-div.leaflet-popup-content span.field-value {
-    font-weight: bold;
+div.leaflet-popup-content {
+    div.popup-field {
+        margin: 0.5rem 0;
+    }
+    span.field-label,
+    span.field-value {
+        display: block;
+    }
+    span.field-label + span.field-value {
+        font-weight: bold;
+    }
+    div.file-field {
+        font-weight: normal;
+        font-size: 90%;
+        img {
+            max-width: 100%;
+            display: block;
+            max-height: 10vh;
+        }
+    }
 }
 
 div.leaflet-div-icon span i:before {

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

@@ -16,6 +16,34 @@ $(function() {
               var geo_json = L.geoJson(data, {
                   onEachFeature: function(feature, layer) {
                       $(cell).trigger('combo:map-feature-prepare', {'feature': feature, 'layer': layer});
+                      var marker_behaviour_onclick = $map_widget.data('marker-behaviour-onclick');
+                      if (marker_behaviour_onclick === 'display_data') {
+                            var popup = '';
+                            if (feature.properties.display_fields) {
+                                var popup = '';
+                                $.each(feature.properties.display_fields, function(idx, field) {
+                                    var $popup_field = $('<div><div class="popup-field property-' + field.varname + '"><span class="field-label"></span><span class="field-value"></span></div></div>');
+                                    $popup_field.find('.field-label').text(field.label);
+                                    if (field.html_value){
+                                        $popup_field.find('.field-value').html(field.html_value);
+                                    } else {
+                                        $popup_field.find('.field-value').text(field.value);
+                                    }
+                                    popup += $popup_field.html();
+                                });
+                            } else {
+                                var properties = feature.properties;
+                                $.each(Object.keys(properties).sort(), function(idx, field) {
+                                    // exclude object type properties
+                                    if (typeof(properties[field]) !== 'object') {
+                                        var $popup_field = $('<div><div class="popup-field property-' + field + '"></span><span class="field-value"></span></div></div>');
+                                        $popup_field.find('.field-value').text(properties[field]);
+                                        popup += $popup_field.html()
+                                    }
+                                });
+                            }
+                            layer.bindPopup(popup);
+                      }
                   },
                   pointToLayer: function (feature, latlng) {
                       var markerStyles = "background-color: " + feature.properties.layer.colour + ";";

combo/apps/maps/templates/maps/map_cell.html

@@ -9,6 +9,7 @@
         data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}"
         data-include-geoloc-button="true"
         {% if group_markers %}data-group-markers="1"{% endif %}
+        data-marker-behaviour-onclick="{{ cell.marker_behaviour_onclick }}"
         {% if max_bounds.corner1.lat %}
         data-max-bounds-lat1="{{ max_bounds.corner1.lat }}"
         data-max-bounds-lng1="{{ max_bounds.corner1.lng }}"