GeotrekCE · gutard · Jul 3, 2020 · Jul 3, 2020 · Jul 3, 2020 · Jul 3, 2020
diff --git a/geotrek/common/templates/common/leaflet_test.html b/geotrek/common/templates/common/leaflet_test.html
@@ -0,0 +1,89 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>
+        Leaflet tiling test
+    </title>
+    <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
+</head>
+<body>
+    <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 'mapentity/leaflet.geojson.grid.js' %}"></script>
+    <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", function() {
+            // create map
+            const map = L.map('map', {
+                center: [44, 4],
+                zoom: 8
+            });
+            // create base layer
+            const osm = L.tileLayer(
+                'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+                {
+                    minZoom: 5,
+                    maxZoom: 19,
+                    attribution: "¢ OSM"
+                }
+            )
+            // add base layer to map
+            osm.addTo(map);
+
+            // path grid layer
+            const tiles_path = new L.GeoJSONTileLayer('/api/path/{z}/{x}/{y}.geojson', {
+                minZoom: 3,
+                maxZoom: 18,
+                style: {
+                    "clickable": true,
+                    "color": "#FF0000",
+                    "fillColor": "#00D",
+                    "weight": 2.0,
+                    "opacity": 0.3,
+                    "fillOpacity": 0.2
+                }
+            });
+
+            // trek grid layer
+            const tiles_trek = new L.GeoJSONTileLayer('/api/trek/{z}/{x}/{y}.geojson', {
+                minZoom: 3,
+                maxZoom: 18,
+                style:{
+                    "clickable": true,
+                    "color": "#006400",
+                    "weight": 2.0,
+                }
+            });
+
+            // city grid layer
+            const tiles_city = new L.GeoJSONTileLayer('/api/city/{z}/{x}/{y}.geojson', {
+                minZoom: 3,
+                maxZoom: 18,
+                style: {
+                    "clickable": true,
+                    "fillColor": "#00D",
+                    "weight": 2.0,
+                    "fillOpacity": 0.2
+                }
+            });
+
+            // base layer selector
+            const baseMaps = {
+                "OSM": osm,
+            };
+
+            // averlay layer selector
+            const overlayMaps = {
+                "Tronçons": tiles_path,
+                "Itinéraires": tiles_trek,
+                "Communes": tiles_city,
+            }
+
+            // control to show layers
+            L.control.layers(baseMaps, overlayMaps).addTo(map);
+        });
+
+    </script>
+</body>
+</html>
diff --git a/geotrek/common/urls.py b/geotrek/common/urls.py
@@ -2,7 +2,7 @@
 from mapentity.registry import MapEntityOptions
 
 from .views import (JSSettings, admin_check_extents, DocumentPublic, DocumentBookletPublic, import_view, import_update_json,
-                    ThemeViewSet, MarkupPublic, sync_view, sync_update_json, SyncRandoRedirect)
+                    ThemeViewSet, MarkupPublic, sync_view, sync_update_json, SyncRandoRedirect, LeafletTestView)
 
 
 class LangConverter(converters.StringConverter):
@@ -21,6 +21,7 @@ class LangConverter(converters.StringConverter):
     path('commands/syncview', sync_view, name='sync_randos_view'),
     path('commands/statesync/', sync_update_json, name='sync_randos_state'),
     path('api/<lang:lang>/themes.json', ThemeViewSet.as_view({'get': 'list'}), name="themes_json"),
+    path('leaflet-tiles/', LeafletTestView.as_view(), name="leaflet-tiles"),
 ]
 
 

diff --git a/geotrek/common/views.py b/geotrek/common/views.py
@@ -12,8 +12,7 @@
 from django.utils import timezone
 from django.views import static
 from django.utils.translation import gettext as _
-from django.views.generic import TemplateView
-from django.views.generic import RedirectView, View
+from django.views.generic import TemplateView, RedirectView, View
 
 from mapentity.helpers import api_bbox
 from mapentity.registry import registry
@@ -479,3 +478,7 @@ def post(self, request, *args, **kwargs):
 
 
 home = last_list
+
+
+class LeafletTestView(TemplateView):
+    template_name = "common/leaflet_test.html"
diff --git a/geotrek/core/static/core/geotrek.forms.snap.js b/geotrek/core/static/core/geotrek.forms.snap.js
@@ -40,11 +40,10 @@ MapEntity.GeometryField.GeometryFieldPathMixin = {
      * (At least for the fix to propagate events)
      */
     buildPathsLayer: function (objectsLayer) {
-        var url_path = window.SETTINGS.urls.path_layer
-        var pathsLayer = MapEntity.pathsLayer({style: {clickable: true}, no_draft: objectsLayer.modelname != 'path'});
+        var url_path = window.SETTINGS.urls.tile.replace(new RegExp('modelname', 'g'), 'path');
         if (objectsLayer.modelname != 'path')
             url_path += '?no_draft=true';
-        pathsLayer.load(url_path, true);
+        var pathsLayer = MapEntity.pathsLayer(url_path, {style: {clickable: true}, no_draft: objectsLayer.modelname != 'path'});
 
         this._map.addLayer(pathsLayer);
 
@@ -94,8 +93,8 @@ MapEntity.GeometryField.GeometryFieldSnap = MapEntity.GeometryField.extend({
         this._objectsLayer = null;
     },
 
-    buildObjectsLayer: function () {
-        this._objectsLayer = MapEntity.GeometryField.prototype.buildObjectsLayer(arguments);
+    buildObjectsLayer: function (url) {
+        this._objectsLayer = MapEntity.GeometryField.prototype.buildObjectsLayer(url);
         this._guidesLayers.push(this._objectsLayer);
 
         if (this.getModelName() != 'path') {
@@ -147,19 +146,20 @@ MapEntity.GeometryField.GeometryFieldSnap = MapEntity.GeometryField.extend({
         }, this);
 
         // On edition, show start and end markers as snapped
-        this._map.on('draw:editstart', function (e) {
-            setTimeout(function () {
-                if (!layer.editing) {
-                    console.warn('Layer has no snap editing');
-                    return;  // should never happen ;)
-                }
-                var markers = layer.editing._markers;
-                var first = markers[0],
-                    last = markers[markers.length - 1];
-                first.fire('move');
-                last.fire('move');
-            }, 0);
-        });
+        // FIXME: disabled temporarily
+        // this._map.on('draw:editstart', function (e) {
+        //     setTimeout(function () {
+        //         if (!layer.editing) {
+        //             console.warn('Layer has no snap editing');
+        //             return;  // should never happen ;)
+        //         }
+        //         var markers = layer.editing._markers;
+        //         var first = markers[0],
+        //             last = markers[markers.length - 1];
+        //         first.fire('move');
+        //         last.fire('move');
+        //     }, 0);
+        // });
 
     },
 

diff --git a/geotrek/core/static/core/geotrek.forms.topology.js b/geotrek/core/static/core/geotrek.forms.topology.js
@@ -97,8 +97,8 @@ MapEntity.GeometryField.TopologyField = MapEntity.GeometryField.extend({
         }
     },
 
-    buildObjectsLayer: function () {
-        this._objectsLayer = MapEntity.GeometryField.prototype.buildObjectsLayer.call(this);
+    buildObjectsLayer: function (url) {
+        this._objectsLayer = MapEntity.GeometryField.prototype.buildObjectsLayer.call(this, url);
         this._pathsLayer = this.buildPathsLayer(this._objectsLayer);
         this._pathsLayer.on('loaded', this._loadTopologyGraph, this);
         return this._objectsLayer;

diff --git a/geotrek/core/static/core/images/marker-source-2x.png b/geotrek/core/static/core/images/marker-source-2x.png
diff --git a/geotrek/core/static/core/images/marker-target-2x.png b/geotrek/core/static/core/images/marker-target-2x.png
diff --git a/geotrek/core/static/core/leaflet.textpath.js b/geotrek/core/static/core/leaflet.textpath.js
@@ -1,34 +1,38 @@
 /*
+ * Leaflet.TextPath - Shows text along a polyline
  * Inspired by Tom Mac Wright article :
  * http://mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/
  */
 
-var PolylineTextPath = {
+(function () {
+
+var __onAdd = L.Polyline.prototype.onAdd,
+    __onRemove = L.Polyline.prototype.onRemove,
+    __updatePath = L.Polyline.prototype._updatePath,
+    __bringToFront = L.Polyline.prototype.bringToFront;
 
-    __updatePath: L.Polyline.prototype._updatePath,
-    __bringToFront: L.Polyline.prototype.bringToFront,
-    __onAdd: L.Polyline.prototype.onAdd,
-    __onRemove: L.Polyline.prototype.onRemove,
+
+var PolylineTextPath = {
 
     onAdd: function (map) {
-        this.__onAdd.call(this, map);
+        __onAdd.call(this, map);
         this._textRedraw();
     },
 
     onRemove: function (map) {
         map = map || this._map;
-        if (map && this._textNode)
-            map._pathRoot.removeChild(this._textNode);
-        this.__onRemove.call(this, map);
+        if (map && this._textNode && map._renderer._container)
+            map._renderer._container.removeChild(this._textNode);
+        __onRemove.call(this, map);
     },
 
     bringToFront: function () {
-        this.__bringToFront.call(this);
+        __bringToFront.call(this);
         this._textRedraw();
     },
 
     _updatePath: function () {
-        this.__updatePath.call(this);
+        __updatePath.call(this);
         this._textRedraw();
     },
 
@@ -44,24 +48,39 @@ var PolylineTextPath = {
         this._text = text;
         this._textOptions = options;
 
-        var defaults = {repeat: false, fillColor: 'black', attributes: {}};
+        /* If not in SVG mode or Polyline not added to map yet return */
+        /* setText will be called by onAdd, using value stored in this._text */
+        if (!L.Browser.svg || typeof this._map === 'undefined') {
+          return this;
+        }
+
+        var defaults = {
+            repeat: false,
+            fillColor: 'black',
+            attributes: {},
+            below: false,
+        };
         options = L.Util.extend(defaults, options);
 
         /* If empty text, hide */
         if (!text) {
-            if (this._textNode)
-                this._map._pathRoot.removeChild(this._textNode);
+            if (this._textNode && this._textNode.parentNode) {
+                this._map._renderer._container.removeChild(this._textNode);
+
+                /* delete the node, so it will not be removed a 2nd time if the layer is later removed from the map */
+                delete this._textNode;
+            }
             return this;
         }
 
         text = text.replace(/ /g, '\u00A0');  // Non breakable spaces
         var id = 'pathdef-' + L.Util.stamp(this);
-        var svg = this._map._pathRoot;
+        var svg = this._map._renderer._container;
         this._path.setAttribute('id', id);
 
         if (options.repeat) {
             /* Compute single pattern length */
-            var pattern = L.Path.prototype._createElement('text');
+            var pattern = L.SVG.create('text');
             for (var attr in options.attributes)
                 pattern.setAttribute(attr, options.attributes[attr]);
             pattern.appendChild(document.createTextNode(text));
@@ -70,12 +89,12 @@ var PolylineTextPath = {
             svg.removeChild(pattern);
 
             /* Create string as long as path */
-            text = new Array(Math.ceil(this._path.getTotalLength() / alength)).join(text);
+            text = new Array(Math.ceil(isNaN(this._path.getTotalLength() / alength) ? 0 : this._path.getTotalLength() / alength)).join(text);
         }
 
         /* Put it along the path using textPath */
-        var textNode = L.Path.prototype._createElement('text'),
-            textPath = L.Path.prototype._createElement('textPath');
+        var textNode = L.SVG.create('text'),
+            textPath = L.SVG.create('textPath');
 
         var dy = options.offset || this._path.getAttribute('stroke-width');
 
@@ -85,8 +104,55 @@ var PolylineTextPath = {
             textNode.setAttribute(attr, options.attributes[attr]);
         textPath.appendChild(document.createTextNode(text));
         textNode.appendChild(textPath);
-        svg.appendChild(textNode);
         this._textNode = textNode;
+
+        if (options.below) {
+            svg.insertBefore(textNode, svg.firstChild);
+        }
+        else {
+            svg.appendChild(textNode);
+        }
+
+        /* Center text according to the path's bounding box */
+        if (options.center) {
+            var textLength = textNode.getComputedTextLength();
+            var pathLength = this._path.getTotalLength();
+            /* Set the position for the left side of the textNode */
+            textNode.setAttribute('dx', ((pathLength / 2) - (textLength / 2)));
+        }
+
+        /* Change label rotation (if required) */
+        if (options.orientation) {
+            var rotateAngle = 0;
+            switch (options.orientation) {
+                case 'flip':
+                    rotateAngle = 180;
+                    break;
+                case 'perpendicular':
+                    rotateAngle = 90;
+                    break;
+                default:
+                    rotateAngle = options.orientation;
+            }
+
+            var rotatecenterX = (textNode.getBBox().x + textNode.getBBox().width / 2);
+            var rotatecenterY = (textNode.getBBox().y + textNode.getBBox().height / 2);
+            textNode.setAttribute('transform','rotate(' + rotateAngle + ' '  + rotatecenterX + ' ' + rotatecenterY + ')');
+        }
+
+        /* Initialize mouse events for the additional nodes */
+        if (this.options.interactive) {
+            if (L.Browser.svg || !L.Browser.vml) {
+                textPath.setAttribute('class', 'leaflet-interactive');
+            }
+
+            var events = ['click', 'dblclick', 'mousedown', 'mouseover',
+                          'mouseout', 'mousemove', 'contextmenu'];
+            for (var i = 0; i < events.length; i++) {
+                L.DomEvent.on(textNode, events[i], this.fire, this);
+            }
+        }
+
         return this;
     }
 };
@@ -103,3 +169,7 @@ L.LayerGroup.include({
         return this;
     }
 });
+
+
+
+})();