From f8d2f948401989777019ba531eeb3704da3a67ac Mon Sep 17 00:00:00 2001 From: Josue Kouka Date: Thu, 15 Feb 2018 11:21:37 +0100 Subject: [PATCH] maps: add handling of marker behaviour on click (#21034) --- .../migrations/0006_auto_20180627_0841.py | 19 +++++++++++++ combo/apps/maps/models.py | 10 ++++++- combo/apps/maps/static/css/combo.map.scss | 1 + combo/apps/maps/static/js/combo.map.js | 27 +++++++++++++++++++ combo/apps/maps/templates/maps/map_cell.html | 1 + 5 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 combo/apps/maps/migrations/0006_auto_20180627_0841.py diff --git a/combo/apps/maps/migrations/0006_auto_20180627_0841.py b/combo/apps/maps/migrations/0006_auto_20180627_0841.py new file mode 100644 index 0000000..e40878c --- /dev/null +++ b/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')]), + ), + ] diff --git a/combo/apps/maps/models.py b/combo/apps/maps/models.py index 69b4b88..cce3426 100644 --- a/combo/apps/maps/models.py +++ b/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 diff --git a/combo/apps/maps/static/css/combo.map.scss b/combo/apps/maps/static/css/combo.map.scss index 8e84186..129431e 100644 --- a/combo/apps/maps/static/css/combo.map.scss +++ b/combo/apps/maps/static/css/combo.map.scss @@ -76,6 +76,7 @@ div.leaflet-div-icon span i { div.leaflet-popup-content span.field-value { font-weight: bold; + display: block; } div.leaflet-div-icon span i:before { diff --git a/combo/apps/maps/static/js/combo.map.js b/combo/apps/maps/static/js/combo.map.js index 2cb78c4..5482f48 100644 --- a/combo/apps/maps/static/js/combo.map.js +++ b/combo/apps/maps/static/js/combo.map.js @@ -16,6 +16,33 @@ $(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 = $('

'); + $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') { + $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 + ";"; diff --git a/combo/apps/maps/templates/maps/map_cell.html b/combo/apps/maps/templates/maps/map_cell.html index ec8ac06..880906e 100644 --- a/combo/apps/maps/templates/maps/map_cell.html +++ b/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 }}" -- 2.17.1