maps: add option to configure initial state of map (#16682)

combo/apps/maps/migrations/0004_map_initial_state.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', '0003_auto_20170603_1653'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='map',
+            name='initial_state',
+            field=models.CharField(default=b'default-position', max_length=20, verbose_name='Initial state', choices=[(b'default-position', 'Centered on default position'), (b'device-location', 'Centered on device location'), (b'fit-markers', 'Centered to fit all markers')]),
+        ),
+    ]

combo/apps/maps/models.py

@@ -112,6 +112,15 @@ class MapLayer(models.Model):
 @register_cell_class
 class Map(CellBase):
     title = models.CharField(_('Title'), max_length=150, blank=True)
+    initial_state = models.CharField(
+            _('Initial state'),
+            max_length=20,
+            choices=[
+                ('default-position', _('Centered on default position')),
+                ('device-location', _('Centered on device location')),
+                ('fit-markers', _('Centered to fit all markers')),
+                ],
+            default='default-position')
     initial_zoom = models.CharField(_('Initial zoom level'), max_length=2,
                                     choices=ZOOM_LEVELS, default='13')
     min_zoom = models.CharField(_('Minimal zoom level'), max_length=2,
@@ -133,7 +142,7 @@ class Map(CellBase):
         return settings.COMBO_MAP_DEFAULT_POSITION
 
     def get_default_form_class(self):
-        fields = ('title', 'initial_zoom', 'min_zoom',
+        fields = ('title', 'initial_state', 'initial_zoom', 'min_zoom',
                   'max_zoom', 'layers')
         widgets = {'layers': forms.widgets.CheckboxSelectMultiple}
         return forms.models.modelform_factory(self.__class__, fields=fields,
@@ -155,6 +164,7 @@ class Map(CellBase):
         default_position = self.get_default_position()
         ctx['init_lat'] = default_position['lat']
         ctx['init_lng'] = default_position['lng']
+        ctx['initial_state'] = self.initial_state
         ctx['initial_zoom'] = self.initial_zoom
         ctx['min_zoom'] = self.min_zoom
         ctx['max_zoom'] = self.max_zoom

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

@@ -8,6 +8,7 @@ $(function() {
         } else {
             map_options.zoom = 13;
         }
+        var init_state = $map_widget.data('init-state');
         var max_zoom = parseInt($map_widget.data('max-zoom'));
         if (!isNaN(max_zoom)) map_options.maxZoom = max_zoom;
         var min_zoom = parseInt($map_widget.data('min-zoom'));
@@ -18,8 +19,16 @@ $(function() {
         var map_attribution = $map_widget.data('map-attribution');
         var map = L.map($map_widget[0], map_options);
         var store_position_selector = $map_widget.data('store-position');
+
         map.setView(latlng, map_options.zoom);
 
+        if (init_state == 'device-location') {
+            map.locate({timeout: 10000, maximumAge: 300000, enableHighAccuracy: false});
+            map.on('locationfound', function(e) {
+                map.setView(e.latlng, map_options.zoom);
+            });
+        }
+
         L.tileLayer(map_tile_url,
             {
                 attribution: map_attribution
@@ -43,7 +52,9 @@ $(function() {
                 });
                 var bounds = geo_json.getBounds();
                 if (bounds.isValid()) {
-                    map.fitBounds(bounds);
+                    if (init_state == 'fit-markers') {
+                        map.fitBounds(bounds);
+                    }
                     geo_json.addTo(map);
                 }
             });

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

@@ -1,3 +1,3 @@
 {% if title %}<h2>{{ title }}</h2>{% endif %}
-<div class="combo-cell-map" data-init-zoom="{{ initial_zoom }}" data-min-zoom="{{ min_zoom }}" data-max-zoom="{{ max_zoom }}" data-init-lat="{{ init_lat }}" data-init-lng="{{ init_lng }}" data-geojson-url="{{ geojson_url }}" data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}">
+<div class="combo-cell-map" data-init-state="{{ initial_state }}" data-init-zoom="{{ initial_zoom }}" data-min-zoom="{{ min_zoom }}" data-max-zoom="{{ max_zoom }}" data-init-lat="{{ init_lat }}" data-init-lng="{{ init_lng }}" data-geojson-url="{{ geojson_url }}" data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}">
 </div>