Upgrade to Leaflet 1.6

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;
     }
 });
+
+
+
+})();

geotrek/core/static/core/main.js

@@ -120,22 +120,28 @@ $(window).on('detailmap:ready', function (e, data) {
 
     // Show start and end
     layer.eachLayer(function (layer) {
-        if (layer instanceof L.MultiPolyline)
-            return;
         if (layer instanceof L.Polygon)
             return;
         if (typeof layer.getLatLngs != 'function')  // points
             return;
 
         // Show start and end markers (similar to edition)
-        var _iconUrl = window.SETTINGS.urls.static + "core/images/marker-";
+        var imagePath = window.SETTINGS.urls.static + "core/images/";
         L.marker(layer.getLatLngs()[0], {
             clickable: false,
-            icon: new L.Icon.Default({iconUrl: _iconUrl + "source.png"})
+            icon: new L.Icon.Default({
+                imagePath: imagePath,
+                iconUrl: "marker-source.png",
+                iconRetinaUrl: "marker-source-2x.png"
+            })
         }).addTo(map);
         L.marker(layer.getLatLngs().slice(-1)[0], {
             clickable: false,
-            icon: new L.Icon.Default({iconUrl: _iconUrl + "target.png"})
+            icon: new L.Icon.Default({
+                imagePath: imagePath,
+                iconUrl: "marker-target.png",
+                iconRetinaUrl: "marker-target-2x.png"
+            })
         }).addTo(map);
 
         // Also add line orientation

geotrek/core/static/core/multipath.js

@@ -417,7 +417,7 @@ L.Handler.MultiPath = L.Handler.extend({
 
     forceMarkerToLayer: function(marker, layer) {
         var closest = L.GeometryUtil.closest(this.map, layer, marker.getLatLng());
-        marker.editing._updateSnap(marker, layer, closest);
+        L.Snap.updateSnap(marker, layer, closest);
     },
 
     createStep: function(marker, idx) {

geotrek/core/static/core/topology_helper.js

@@ -237,7 +237,7 @@ Geotrek.TopologyHelper = (function() {
     /**
      * @param topology {Object} with ``offset``, ``positions`` and ``paths`` as returned by buildSubTopology()
      * @param idToLayer {function} callback to obtain layer from id
-     * @returns L.multiPolyline
+     * @returns L.polyline
      */
     function buildGeometryFromTopology(topology, idToLayer) {
         var latlngs = [];
@@ -252,7 +252,7 @@ Geotrek.TopologyHelper = (function() {
                 console.warn('Topology problem: ' + i + ' not in ' + JSON.stringify(topology.positions));
             }
         }
-        return L.multiPolyline(latlngs);
+        return L.polyline(latlngs);
     }
 
     /**

geotrek/maintenance/templates/maintenance/project_detail.html

@@ -118,7 +118,7 @@
 
 
             function showInterventionLabel (geojson, layer) {
-                if (geojson.properties.name) layer.bindLabel(geojson.properties.name);
+                if (geojson.properties.name) layer.bindTooltip(geojson.properties.name);
             }
 
             function interventionUrl(properties, layer) {

geotrek/signage/static/signage/main.js

@@ -10,7 +10,7 @@ $(window).on('entity:map', function (e, data) {
 		modelname: 'signage',
 		style: L.Util.extend(window.SETTINGS.map.styles['signage'] || {}, { clickable:false }),
 		pointToLayer: function (feature, latlng) {
-			return L.marker(latlng).bindLabel(feature.properties.name, { noHide: true });
+			return L.marker(latlng).bindTooltip(feature.properties.name, { permanent: true });
 		}
 	});
 	var url = window.SETTINGS.urls['signage_layer'];

geotrek/static/style.css

@@ -159,6 +159,7 @@ span.aggregation {
     border: 1px solid #d4d4d4;
     padding: 5px;
     width: 30%;
+    z-index: 1000;
 }
 
 #altitudegraph h4 {

geotrek/trekking/static/trekking/signagelayer.js

@@ -24,6 +24,6 @@ var SignagesLayer = L.GeoJSON.extend({
                                     iconSize: [this.options.iconSize, this.options.iconSize],
                                     html: img});
 
-        return L.marker(latlng, {icon: serviceicon}).bindLabel(featureData.properties.name, {noHide: true});
+        return L.marker(latlng, {icon: serviceicon}).bindTooltip(featureData.properties.name, {permanent: true});
     }
 });

mapentity/settings.py

@@ -91,10 +91,6 @@
     ('leaflet.overintent', {
         'js': 'mapentity/Leaflet.OverIntent/leaflet.overintent.js',
     }),
-    ('leaflet.label', {
-        'css': 'mapentity/Leaflet.label/dist/leaflet.label.css',
-        'js': 'mapentity/Leaflet.label/dist/leaflet.label.js'
-    }),
     ('leaflet.spin', {
         'js': ['paperclip/spin.min.js',
                'mapentity/Leaflet.Spin/leaflet.spin.js']