Plug tile view on mapentity views

Author: Gaël UTARD

geotrek/common/templates/common/leaflet_test.html

@@ -11,7 +11,7 @@
     <div id="map" style="height: 800px; width: 100%;">
     </div>
     <script type="text/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script type="text/javascript" src="{% static 'common/js/leaflet.geojson.grid.js' %}"></script>
+    <script type="text/javascript" src="{% static 'mapentity/leaflet.geojson.grid.js' %}"></script>
     <script type="text/javascript">
         document.addEventListener("DOMContentLoaded", function() {
             // create map

geotrek/core/static/core/main.js

@@ -1,8 +1,8 @@
-MapEntity.pathsLayer = function buildPathLayer(options) {
+MapEntity.pathsLayer = function buildPathLayer(url, options) {
     var options = options || {};
     options.style = L.Util.extend(options.style || {}, window.SETTINGS.map.styles.path);
 
-    var pathsLayer = new L.ObjectsLayer(null, options);
+    var pathsLayer = new L.ObjectsLayer(url, options);
 
     // Show paths extremities
     if (window.SETTINGS.showExtremities) {
@@ -22,20 +22,19 @@ $(window).on('entity:map', function (e, data) {
 
     if (!is_form_view && (data.viewname == 'detail' || data.modelname != 'path')) {
 
-        var pathsLayer = MapEntity.pathsLayer({
-            indexing: false,
-            style: { clickable: false },
-            modelname: 'path',
-            no_draft: data.modelname != 'path',
-        });
         if (data.viewname == 'detail'){
-            pathsLayer.load(window.SETTINGS.urls.path_layer);
+            var pathsLayer = MapEntity.pathsLayer(window.SETTINGS.urls.tile.replace(new RegExp('modelname', 'g'), 'path'), {
+                indexing: false,
+                style: { clickable: false },
+                modelname: 'path',
+                no_draft: data.modelname != 'path',
+            });
             pathsLayer.addTo(map);
+            pathsLayer.on('loaded', function () {
+                if (pathsLayer._map)
+                    pathsLayer.bringToBack();
+            });
         };
-        pathsLayer.on('loaded', function () {
-            if (pathsLayer._map)
-                pathsLayer.bringToBack();
-        });
 
         map.on('layeradd', function (e) {
             // Start ajax loading at last

geotrek/core/templates/core/core_extrabody_fragment.html

@@ -2,7 +2,6 @@
 <script type="text/javascript">
     MapEntity.i18n['Paths'] = "{% trans "Paths" %}";
 
-    window.SETTINGS.urls['path_layer'] = "{% url "core:path_layer" %}";
     window.SETTINGS.urls['path_graph'] = "{% url "core:path_json_graph" %}";
 </script>
 <script type="text/javascript" src="{% static "core/main.js" %}"></script>

geotrek/maintenance/templates/maintenance/project_detail.html

@@ -121,9 +121,9 @@
                 if (geojson.properties.name) layer.bindTooltip(geojson.properties.name);
             }
 
-            function interventionUrl(properties, layer) {
+            function interventionUrl(id) {
                 return window.SETTINGS.urls.detail.replace(new RegExp('modelname', 'g'), 'intervention')
-                                      .replace('0', properties.pk);
+                                      .replace('0', id);
             };
         });
     </script>

geotrek/trekking/views.py

@@ -11,7 +11,7 @@
 from django.views.generic import CreateView, ListView, DetailView
 from django.views.generic.detail import BaseDetailView
 from mapentity.helpers import alphabet_enumeration
-from mapentity.views import (MapEntityLayer, MapEntityList, MapEntityJsonList,
+from mapentity.views import (MapEntityLayer, MapEntityTileLayer, MapEntityList, MapEntityJsonList,
                              MapEntityFormat, MapEntityDetail, MapEntityMapImage,
                              MapEntityDocument, MapEntityCreate, MapEntityUpdate,
                              MapEntityDelete, LastModifiedMixin, MapEntityViewSet)
@@ -58,6 +58,10 @@ class TrekLayer(MapEntityLayer):
     geometry_field_db = 'geom'
 
 
+class TrekTileLayer(MapEntityTileLayer):
+    queryset = Trek.objects.existing()
+
+
 class TrekList(FlattenPicturesMixin, MapEntityList):
     filterform = TrekFilterSet
     columns = ['id', 'name', 'duration', 'difficulty', 'departure', 'thumbnail']

mapentity/registry.py

@@ -71,7 +71,7 @@ def scan_views(self):
         for name, view in inspect.getmembers(views_module):
             if inspect.isclass(view) and issubclass(view, View):
                 # Pick-up views
-                if hasattr(view, 'get_entity_kind') or issubclass(view, mapentity_views.MapEntityViewSet):
+                if hasattr(view, 'get_entity_kind') or issubclass(view, mapentity_views.MapEntityViewSet) or issubclass(view, mapentity_views.MapEntityTileLayer):
                     try:
                         view_model = view.model or view.queryset.model
                     except AttributeError:
@@ -128,14 +128,15 @@ class dynamic_viewset(mapentity_views.MapEntityViewSet):
 
         # Dynamically define tile view
         if tile_view is None:
-            _queryset = self.get_queryset()
-            _serializer = self.get_tile_serializer()
-
             class dynamic_tile_view(mapentity_views.MapEntityTileLayer):
-                queryset = _queryset
-                serializer_class = _serializer
+                pass
             tile_view = dynamic_tile_view
 
+        if not tile_view.queryset:
+            tile_view.queryset = self.get_queryset()
+        if not tile_view.serializer_class:
+            tile_view.serializer_class = self.get_tile_serializer()
+
         picked.append(tile_view)
 
         # Returns Django URL patterns

mapentity/settings.py

@@ -122,6 +122,9 @@
         'css': 'mapentity/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css',
         'js': 'mapentity/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js'
     }),
+    ('leaflet.geojson.grid', {
+        'js': 'mapentity/leaflet.geojson.grid.js',
+    }),
     ('mapentity', {
         'js': ['mapentity/mapentity.js',
                'mapentity/mapentity.forms.js'],

mapentity/static/mapentity/leaflet-objectslayer.js

@@ -1,4 +1,4 @@
-L.ObjectsLayer = L.GeoJSON.extend({
+L.ObjectsLayer = L.GeoJSONTileLayer.extend({
     options: {
         indexing: true,
         highlight: true,
@@ -12,7 +12,7 @@ L.ObjectsLayer = L.GeoJSON.extend({
 
     includes: L.Mixin.Events,
 
-    initialize: function (geojson, options) {
+    initialize: function (url, options) {
         // Pointers to all layers by pk - immutable
         this._objects = {};
         // Hold the currently visible layers (subset of _objects)
@@ -44,14 +44,15 @@ L.ObjectsLayer = L.GeoJSON.extend({
         this.options.styles = L.Util.extend({}, this.options.styles);
         this.options.styles['default'] = L.Util.extend({}, this.options.style);
 
+        L.GeoJSONTileLayer.prototype.initialize.call(this, url, this.options);
 
         // Highlight on mouse over, using global events
         if (this.options.highlight) {
-            this.on('mouseover', function(e) {
+            this.layer.on('mouseover', function(e) {
                 var pk = this.getPk(e.layer);
                 $(window).trigger('entity:mouseover', {pk: pk, modelname: options.modelname});
             }, this);
-            this.on('mouseout', function(e) {
+            this.layer.on('mouseout', function(e) {
                 var pk = this.getPk(e.layer);
                 $(window).trigger('entity:mouseout', {pk: pk, modelname: options.modelname});
             }, this);
@@ -69,29 +70,12 @@ L.ObjectsLayer = L.GeoJSON.extend({
             }
         }, this));
 
-
         // Optionnaly make them clickable
         if (this.options.objectUrl) {
-            this.on('click', function(e) {
-                window.location = this.options.objectUrl(e.layer.properties, e.layer);
+            this.layer.on('click', function(e) {
+                window.location = this.options.objectUrl(e.layer.feature.id);
             }, this);
         }
-
-        var dataurl = null;
-        if (typeof(geojson) == 'string') {
-            dataurl = geojson;
-            geojson = null;
-        }
-        L.GeoJSON.prototype.initialize.call(this, geojson, this.options);
-
-        // Fire Leaflet.Spin events
-        this.on('loaded loading', function (e) {
-            this.fire('data:' + e.type);
-        }, this);
-
-        if (dataurl) {
-            this.load(dataurl);
-        }
     },
 
     _mapObjects: function (geojson, layer) {
@@ -109,29 +93,6 @@ L.ObjectsLayer = L.GeoJSON.extend({
         }
     },
 
-    load: function (url) {
-        console.log("load", url)
-        var jsonLoad = function (data) {
-            var features = jQuery.grep(data.features, function(obj, i) {
-                return obj.geometry !== null;
-            });
-            data.features = features;
-            this.addData(data);
-            this.loading = false;
-            this.fire('loaded');
-        };
-        var jsonError = function () {
-            this.loading = false;
-            this.fire('loaded');
-            console.error("Could not load url '" + url + "'");
-            if (this._map) $(this._map._container).addClass('map-error');
-        };
-        this.loading = true;
-        this.fire('loading');
-        $.getJSON(url, L.Util.bind(jsonLoad, this))
-         .error(L.Util.bind(jsonError, this));
-    },
-
     getLayer: function (pk) {
         return this._objects[pk];
     },
@@ -149,32 +110,7 @@ L.ObjectsLayer = L.GeoJSON.extend({
 
     // Show all layers matching the pks
     updateFromPks: function(pks) {
-        var self = this,
-            new_objects = {},
-            already_added_layer,
-            to_add_layer;
-
-        // Gather all layer to see in new objects
-        // Remove them from _current_objects if they are already shown
-        // This way _current_objects will only contain layer to be removed
-        $.each(pks, function(idx, to_add_pk) {
-            already_added_layer = self._current_objects[to_add_pk];
-            if (already_added_layer) {
-                new_objects[to_add_pk] = already_added_layer;
-                delete self._current_objects[to_add_pk];
-            } else {
-                to_add_layer = new_objects[to_add_pk] = self._objects[to_add_pk];
-                // list can be ready before map, on first load
-                if (to_add_layer) self.addLayer(to_add_layer);
-            }
-        });
-
-        // Remove all remaining layers
-        $.each(self._current_objects, function(pk, layer) {
-            self.removeLayer(layer);
-        });
-
-        self._current_objects = new_objects;
+        console.log("Should filter map features again");
     },
 
     getCurrentLayers: function () {
@@ -202,7 +138,7 @@ L.ObjectsLayer = L.GeoJSON.extend({
             this.fire('highlight', {layer: layer});
         }
         else {
-            this.resetStyle(layer);
+            this.layer.resetStyle(layer);
         }
     },
 

…static/common/js/leaflet.geojson.grid.js …static/mapentity/leaflet.geojson.grid.jsgeotrek/common/static/common/js/leaflet.geojson.grid.js renamed to mapentity/static/mapentity/leaflet.geojson.grid.js geotrek/common/static/common/js/leaflet.geojson.grid.js renamed to mapentity/static/mapentity/leaflet.geojson.grid.js

@@ -9,13 +9,15 @@
         layer: null,
         features: null,
         cache: null,
+        ajaxCount: 0,
 
         //
         // Leaflet layer methods
         //
         initialize(url, options) {
             this.url = url;
             this.layer = new L.GeoJSON(null, options);
+            this.layer.loading = true;
             this.features = {};
             this.cache = {};
             L.GridLayer.prototype.initialize.call(this, options);
@@ -92,9 +94,20 @@
         },
 
         _ajaxRequest: function(method, url, data, callback) {
+            var tilelayer = this;
+            if (tilelayer.ajaxCount++ === 0) {
+                // For Leaflet.Spin
+                tilelayer.layer.loading = true;
+                tilelayer.layer.fire('data:loading');
+            }
             var request = new XMLHttpRequest();
             request.open(method, url, true);
             request.onreadystatechange = function() {
+                if (request.readyState === 4 && --tilelayer.ajaxCount === 0) {
+                    // For Leaflet.Spin
+                    tilelayer.layer.loading = false;
+                    tilelayer.layer.fire('data:loaded');
+                }
                 if (request.readyState === 4 && request.status === 200) {
                     callback(JSON.parse(request.responseText));
                 }

mapentity/static/mapentity/mapentity.map.js

@@ -187,7 +187,7 @@ $(window).on('entity:map:detail', function (e, data) {
         }
 
         // Add layers
-        var objectLayer = new L.ObjectsLayer(geojson, {
+        var objectLayer = new L.GeoJSON(geojson, {
             style: DETAIL_STYLE,
             indexing: false,
             modelname: data.modelname
@@ -230,17 +230,17 @@ $(window).on('entity:map:list', function (e, data) {
      * Objects Layer
      * .......................
      */
-    function getUrl(properties, layer) {
+    function getUrl(id) {
         return window.SETTINGS.urls.detail.replace(new RegExp('modelname', 'g'), data.modelname)
-                                          .replace('0', properties.pk);
+                                          .replace('0', id);
     }
     if (typeof window.SETTINGS.map.styles.others === "function"){
         var style = window.SETTINGS.map.styles.others;
     }
     else{
         var style = L.Util.extend({}, window.SETTINGS.map.styles.others);
     }
-    var objectsLayer = new L.ObjectsLayer(null, {
+    var objectsLayer = new L.ObjectsLayer(window.SETTINGS.urls.tile.replace(new RegExp('modelname', 'g'), data.modelname), {
         objectUrl: getUrl,
         style: style,
         modelname: data.modelname,
@@ -252,7 +252,6 @@ $(window).on('entity:map:list', function (e, data) {
         if (e.layer._map !== null) e.layer.bringToFront();
     });
     map.addLayer(objectsLayer);
-    objectsLayer.load(window.SETTINGS.urls.layer.replace(new RegExp('modelname', 'g'), data.modelname));
 
     var nameHTML = '<span style="color: '+ style['color'] + ';">&#x25A3;</span>&nbsp;' + data.objectsname;
     map.layerscontrol.addOverlay(objectsLayer, nameHTML, tr("Objects"));