0001-maps-add-handling-of-marker-behaviour-on-click-21034.patch
combo/apps/maps/migrations/0006_auto_20180627_0841.py | ||
---|---|---|
1 |
# -*- coding: utf-8 -*- |
|
2 |
from __future__ import unicode_literals |
|
3 | ||
4 |
from django.db import migrations, models |
|
5 | ||
6 | ||
7 |
class Migration(migrations.Migration): |
|
8 | ||
9 |
dependencies = [ |
|
10 |
('maps', '0005_auto_20180212_1742'), |
|
11 |
] |
|
12 | ||
13 |
operations = [ |
|
14 |
migrations.AddField( |
|
15 |
model_name='map', |
|
16 |
name='marker_behaviour_onclick', |
|
17 |
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')]), |
|
18 |
), |
|
19 |
] |
combo/apps/maps/models.py | ||
---|---|---|
69 | 69 |
('wheelchair', _('Wheelchair')), |
70 | 70 |
] |
71 | 71 | |
72 |
MARKER_BEHAVIOUR_ONCLICK = [ |
|
73 |
('none', _('Nothing')), |
|
74 |
('display_data', _('Display data in popup')), |
|
75 |
] |
|
76 | ||
72 | 77 |
ZOOM_LEVELS = [ ('0', _('Whole world')), |
73 | 78 |
('9', _('Wide area')), |
74 | 79 |
('11', _('Area')), |
... | ... | |
221 | 226 |
max_zoom = models.CharField(_('Maximal zoom level'), max_length=2, |
222 | 227 |
choices=ZOOM_LEVELS, default=19) |
223 | 228 |
group_markers = models.BooleanField(_('Group markers in clusters'), default=False) |
229 |
marker_behaviour_onclick = models.CharField(_('Marker behaviour on click'), max_length=32, |
|
230 |
default='none', choices=MARKER_BEHAVIOUR_ONCLICK) |
|
224 | 231 |
layers = models.ManyToManyField(MapLayer, verbose_name=_('Layers'), blank=True) |
225 | 232 | |
226 | 233 |
template_name = 'maps/map_cell.html' |
... | ... | |
238 | 245 | |
239 | 246 |
def get_default_form_class(self): |
240 | 247 |
fields = ('title', 'initial_state', 'initial_zoom', 'min_zoom', |
241 |
'max_zoom', 'group_markers', 'layers') |
|
248 |
'max_zoom', 'group_markers', 'marker_behaviour_onclick', 'layers')
|
|
242 | 249 |
widgets = {'layers': forms.widgets.CheckboxSelectMultiple} |
243 | 250 |
return forms.models.modelform_factory(self.__class__, fields=fields, |
244 | 251 |
widgets=widgets) |
... | ... | |
268 | 275 |
ctx['map_attribution'] = settings.COMBO_MAP_ATTRIBUTION |
269 | 276 |
ctx['max_bounds'] = settings.COMBO_MAP_MAX_BOUNDS |
270 | 277 |
ctx['group_markers'] = self.group_markers |
278 |
ctx['marker_behaviour_onclick'] = self.marker_behaviour_onclick |
|
271 | 279 |
return ctx |
combo/apps/maps/static/css/combo.map.scss | ||
---|---|---|
74 | 74 |
height: 50%; |
75 | 75 |
} |
76 | 76 | |
77 |
div.leaflet-popup-content span.field-value { |
|
78 |
font-weight: bold; |
|
77 |
div.leaflet-popup-content { |
|
78 |
div.popup-field { |
|
79 |
margin: 0.5rem 0; |
|
80 |
} |
|
81 |
span.field-label, |
|
82 |
span.field-value { |
|
83 |
display: block; |
|
84 |
} |
|
85 |
span.field-label + span.field-value { |
|
86 |
font-weight: bold; |
|
87 |
} |
|
88 |
div.file-field { |
|
89 |
font-weight: normal; |
|
90 |
font-size: 90%; |
|
91 |
img { |
|
92 |
max-width: 100%; |
|
93 |
display: block; |
|
94 |
max-height: 10vh; |
|
95 |
} |
|
96 |
} |
|
79 | 97 |
} |
80 | 98 | |
81 | 99 |
div.leaflet-div-icon span i:before { |
combo/apps/maps/static/js/combo.map.js | ||
---|---|---|
16 | 16 |
var geo_json = L.geoJson(data, { |
17 | 17 |
onEachFeature: function(feature, layer) { |
18 | 18 |
$(cell).trigger('combo:map-feature-prepare', {'feature': feature, 'layer': layer}); |
19 |
var marker_behaviour_onclick = $map_widget.data('marker-behaviour-onclick'); |
|
20 |
if (marker_behaviour_onclick === 'display_data') { |
|
21 |
var popup = ''; |
|
22 |
if (feature.properties.display_fields) { |
|
23 |
var popup = ''; |
|
24 |
$.each(feature.properties.display_fields, function(idx, field) { |
|
25 |
var $popup_field = $('<div><div class="popup-field property-' + field.varname + '"><span class="field-label"></span><span class="field-value"></span></div></div>'); |
|
26 |
$popup_field.find('.field-label').text(field.label); |
|
27 |
if (field.html_value){ |
|
28 |
$popup_field.find('.field-value').html(field.html_value); |
|
29 |
} else { |
|
30 |
$popup_field.find('.field-value').text(field.value); |
|
31 |
} |
|
32 |
popup += $popup_field.html(); |
|
33 |
}); |
|
34 |
} else { |
|
35 |
var properties = feature.properties; |
|
36 |
$.each(Object.keys(properties).sort(), function(idx, field) { |
|
37 |
// exclude object type properties |
|
38 |
if (typeof(properties[field]) !== 'object') { |
|
39 |
var $popup_field = $('<div><div class="popup-field property-' + field + '"></span><span class="field-value"></span></div></div>'); |
|
40 |
$popup_field.find('.field-value').text(properties[field]); |
|
41 |
popup += $popup_field.html() |
|
42 |
} |
|
43 |
}); |
|
44 |
} |
|
45 |
layer.bindPopup(popup); |
|
46 |
} |
|
19 | 47 |
}, |
20 | 48 |
pointToLayer: function (feature, latlng) { |
21 | 49 |
var markerStyles = "background-color: " + feature.properties.layer.colour + ";"; |
combo/apps/maps/templates/maps/map_cell.html | ||
---|---|---|
9 | 9 |
data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}" |
10 | 10 |
data-include-geoloc-button="true" |
11 | 11 |
{% if group_markers %}data-group-markers="1"{% endif %} |
12 |
data-marker-behaviour-onclick="{{ cell.marker_behaviour_onclick }}" |
|
12 | 13 |
{% if max_bounds.corner1.lat %} |
13 | 14 |
data-max-bounds-lat1="{{ max_bounds.corner1.lat }}" |
14 | 15 |
data-max-bounds-lng1="{{ max_bounds.corner1.lng }}" |
15 |
- |