Fixes #2569: upgrade of leaflet version to 1.3.1 (and related depende…

package.json

@@ -111,14 +111,15 @@
     "jsonix": "2.4.1",
     "jszip": "3.1.5",
     "keymirror": "0.1.1",
-    "leaflet": "0.7.7",
-    "leaflet-draw": "0.2.4",
+    "leaflet": "1.3.1",
+    "leaflet-draw": "1.0.2",
     "leaflet-extra-markers": "1.0.6",
-    "leaflet-minimap": "3.3.1",
-    "leaflet-plugins": "https://github.com/Polyconseil/leaflet-plugins/tarball/master",
+    "leaflet-minimap": "3.6.0",
+    "leaflet-plugins": "3.0.2",
+    "leaflet.gridlayer.googlemutant": "0.6.4",
     "leaflet-simple-graticule": "1.0.2",
-    "leaflet.locatecontrol": "0.45.1",
-    "leaflet.nontiledlayer": "1.0.3",
+    "leaflet.locatecontrol": "0.62.0",
+    "leaflet.nontiledlayer": "1.0.7",
     "lodash": "4.16.6",
     "moment": "2.13.0",
     "object-assign": "4.1.1",
@@ -197,7 +198,7 @@
     "cleandoc": "rimraf web/docs && rimraf web/client/mapstore/docs",
     "doctest": "docma -c docma-config.json --dest web/client/mapstore/docs && echo documentation is accessible from the mapstore/docs path when running npm start",
     "i18n": "node  utility/translations/findMissingTranslations.js",
-    "postinstall": "node checkCesium.js",
+    "postinstall": "node checkCesium.js && rimraf node_modules/leaflet-simple-graticule/node_modules",
     "clean": "rimraf ./web/client/dist",
     "compile": "npm run clean && mkdirp ./web/client/dist && webpack --progress --config prod-webpack.config.js",
     "analyze": "npm run clean && mkdirp ./web/client/dist && webpack --json | webpack-bundle-size-analyzer",

project/custom/templates/index.html

@@ -5,15 +5,15 @@
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>__PROJECTDESCRIPTION__</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.4/leaflet.draw.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.4/ol.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
         <link rel="stylesheet" href="assets/css/mapstore2.css">
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.4/leaflet.draw.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.4/ol.js"></script>
         <script src="https://cesiumjs.org/releases/1.17/Build/Cesium/Cesium.js"></script>
         <link rel="stylesheet" href="https://cesiumjs.org/releases/1.17/Build/Cesium/Widgets/widgets.css" />

project/standard/templates/index.html

@@ -5,14 +5,14 @@
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>__PROJECTDESCRIPTION__</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.4/leaflet.draw.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.4/ol.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.4/leaflet.draw.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.4/ol.js"></script>
         <script src="https://cesiumjs.org/releases/1.17/Build/Cesium/Cesium.js"></script>
         <link rel="stylesheet" href="https://cesiumjs.org/releases/1.17/Build/Cesium/Widgets/widgets.css" />

web/client/api.html

@@ -6,12 +6,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Page with MapStore 2 API</title>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
         <link rel="stylesheet" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
         <script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>
         <style>
         #container {

web/client/apiTemplate.html

@@ -6,12 +6,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Page with MapStore 2 API</title>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
         <link rel="stylesheet" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.css" />
         <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
         <script src="https://maps.google.com/maps/api/js?v=3"></script>
         <!--script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script-->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
         <script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>
         <style>
         #container {

web/client/components/map/leaflet/DrawSupport.jsx

@@ -17,6 +17,8 @@ const assign = require('object-assign');
 const CoordinatesUtils = require('../../../utils/CoordinatesUtils');
 
 const VectorUtils = require('../../../utils/leaflet/Vector');
+
+const DEG_TO_RAD = Math.PI / 180.0;
 /**
  * Converts the leaflet circle into the projected circle (usually in 3857)
  * @param  {number} mRadius leaflet radius of circle
@@ -33,7 +35,7 @@ const toProjectedCircle = (mRadius, center, projection) => {
     }
 
     // calculate
-    const lonRadius = (mRadius / 40075017) * 360 / Math.cos(L.LatLng.DEG_TO_RAD * (center[1]));
+    const lonRadius = (mRadius / 40075017) * 360 / Math.cos(DEG_TO_RAD * (center[1]));
     const projCenter = CoordinatesUtils.reproject(center, "EPSG:4326", projection);
     if (lonRadius) {
         const checkPoint = CoordinatesUtils.reproject([center[0] + lonRadius, center[1]], "EPSG:4326", projection);
@@ -77,7 +79,7 @@ const toLeafletCircle = (radius, center, projection= "EPSG:4326") => {
     const checkPoint = CoordinatesUtils.reproject([center.lng + radius, center.lat], projection, "EPSG:4326");
 
     const lonRadius = Math.sqrt(Math.pow(leafletCenter.x - checkPoint.x, 2) + Math.pow(leafletCenter.y - checkPoint.y, 2));
-    const mRadius = lonRadius * Math.cos(L.LatLng.DEG_TO_RAD * leafletCenter.y) * 40075017 / 360;
+    const mRadius = lonRadius * Math.cos(DEG_TO_RAD * leafletCenter.y) * 40075017 / 360;
     return {
         center: leafletCenter,
         projection: "EPSG:4326",
@@ -190,6 +192,11 @@ class DrawSupport extends React.Component {
         if (evt.layerType === "marker") {
             bounds = L.latLngBounds(geoJesonFt.geometry.coordinates, geoJesonFt.geometry.coordinates);
         } else {
+            if (!layer._map) {
+                layer._map = this.props.map;
+                layer._renderer = this.props.map.getRenderer(layer);
+                layer._project();
+            }
             bounds = layer.getBounds();
         }
         let extent = boundsToOLExtent(bounds);
@@ -324,7 +331,15 @@ class DrawSupport extends React.Component {
                     fillColor: '#ffffff',
                     fillOpacity: 0.2
                 },
-                repeatMode: true
+                repeatMode: true,
+                icon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon'
+                }),
+                touchIcon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
+                })
             });
         } else if (newProps.drawMethod === 'Polygon' || newProps.drawMethod === 'MultiPolygon') {
             this.drawControl = new L.Draw.Polygon(this.props.map, {
@@ -336,7 +351,15 @@ class DrawSupport extends React.Component {
                     dashArray: [5, 5],
                     guidelineDistance: 5
                 },
-                repeatMode: true
+                repeatMode: true,
+                icon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon'
+                }),
+                touchIcon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
+                })
             });
         } else if (newProps.drawMethod === 'BBOX') {
             this.drawControl = new L.Draw.Rectangle(this.props.map, {
@@ -348,7 +371,15 @@ class DrawSupport extends React.Component {
                     fillOpacity: 0.2,
                     dashArray: [5, 5]
                 },
-                repeatMode: true
+                repeatMode: true,
+                icon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon'
+                }),
+                touchIcon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
+                })
             });
         } else if (newProps.drawMethod === 'Circle') {
             this.drawControl = new L.Draw.Circle(this.props.map, {
@@ -422,7 +453,22 @@ class DrawSupport extends React.Component {
     addEditInteraction = (newProps) => {
         this.clean();
 
-        this.addGeojsonLayer({features: newProps.features, projection: newProps.options && newProps.options.featureProjection || "EPSG:4326", style: newProps.style});
+        this.addGeojsonLayer({
+            features: newProps.features,
+            projection: newProps.options && newProps.options.featureProjection || "EPSG:4326",
+            style: assign({}, newProps.style, {
+                poly: {
+                    icon: new L.DivIcon({
+                        iconSize: new L.Point(8, 8),
+                        className: 'leaflet-div-icon leaflet-editing-icon'
+                    }),
+                    touchIcon: new L.DivIcon({
+                        iconSize: new L.Point(8, 8),
+                        className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
+                    })
+                }
+            })
+        });
 
         let allLayers = this.drawLayer.getLayers();
         allLayers.forEach(l => {

web/client/components/map/leaflet/Locate.jsx

@@ -2,7 +2,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var L = require('leaflet');
 var assign = require('object-assign');
-require('leaflet.locatecontrol')();
+require('leaflet.locatecontrol');
 require('leaflet.locatecontrol/dist/L.Control.Locate.css');
 
 const defaultOpt = { // For all configuration options refer to https://github.com/Norkart/Leaflet-MiniMap
@@ -21,26 +21,27 @@ const defaultOpt = { // For all configuration options refer to https://github.co
 L.Control.MSLocate = L.Control.Locate.extend({
     setMap: function(map) {
         this._map = map;
-        this._layer = this.options.layer;
+        this._layer = this.options.layer || new L.LayerGroup();
         this._layer.addTo(map);
         this._event = undefined;
+        this._prevBounds = null;
 
-            // extend the follow marker style and circle from the normal style
+        // extend the follow marker style and circle from the normal style
         let tmp = {};
         L.extend(tmp, this.options.markerStyle, this.options.followMarkerStyle);
         this.options.followMarkerStyle = tmp;
         tmp = {};
         L.extend(tmp, this.options.circleStyle, this.options.followCircleStyle);
         this.options.followCircleStyle = tmp;
         this._resetVariables();
-        this.bindEvents(map);
+        this._map.on('unload', this._unload, this);
     },
     _setClasses: function(state) {
         this._map.fire('locatestatus', {state: state});
         return state;
     },
-    _toggleContainerStyle: function() {
-        if (this._following) {
+    _updateContainerStyle: function() {
+        if (this._isFollowing()) {
             this._setClasses('following');
         } else if (this._active) {
             this._setClasses('active');

web/client/components/map/leaflet/Map.jsx

@@ -355,7 +355,7 @@ class LeafletMap extends React.Component {
         mapUtils.registerHook(mapUtils.COMPUTE_BBOX_HOOK, (center, zoom) => {
             let latLngCenter = L.latLng([center.y, center.x]);
             // this call will use map internal size
-            let topLeftPoint = this.map._getNewTopLeftPoint(latLngCenter, zoom);
+            let topLeftPoint = this.map._getNewPixelOrigin(latLngCenter, zoom);
             let pixelBounds = new L.Bounds(topLeftPoint, topLeftPoint.add(this.map.getSize()));
             let southWest = this.map.unproject(pixelBounds.getBottomLeft(), zoom);
             let northEast = this.map.unproject(pixelBounds.getTopRight(), zoom);

web/client/components/map/leaflet/MeasurementSupport.jsx

@@ -26,7 +26,9 @@ class MeasurementSupport extends React.Component {
     };
 
     static defaultProps = {
-        updateOnMouseMove: false
+        updateOnMouseMove: false,
+        metric: true,
+        feet: false
     };
 
     componentWillReceiveProps(newProps) {
@@ -51,7 +53,7 @@ class MeasurementSupport extends React.Component {
         this.lastLayer = evt.layer;
 
         if (this.props.measurement.geomType === 'Point') {
-            let pos = this.drawControl._markers.getLatLng();
+            let pos = this.drawControl._marker.getLatLng();
             let point = {x: pos.lng, y: pos.lat, srs: 'EPSG:4326'};
             let newMeasureState = assign({}, this.props.measurement, {point: point});
             this.props.changeMeasurementState(newMeasureState);
@@ -160,7 +162,15 @@ class MeasurementSupport extends React.Component {
                 },
                 metric: this.props.metric,
                 feet: this.props.feet,
-                repeatMode: false
+                repeatMode: false,
+                icon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon'
+                }),
+                touchIcon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
+                })
             });
         } else if (newProps.measurement.geomType === 'Polygon') {
             this.drawControl = new L.Draw.Polygon(this.props.map, {
@@ -169,7 +179,15 @@ class MeasurementSupport extends React.Component {
                     weight: 2,
                     fill: 'rgba(255, 255, 255, 0.2)'
                 },
-                repeatMode: false
+                repeatMode: false,
+                icon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon'
+                }),
+                touchIcon: new L.DivIcon({
+                    iconSize: new L.Point(8, 8),
+                    className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon'
+                })
             });
         }
 

web/client/components/map/leaflet/ScaleBar.jsx

@@ -45,7 +45,7 @@ class ScaleBar extends React.Component {
     }
 
     componentWillUnmount() {
-        if (this.props.container && this.scalebar.getContainer()) {
+        if (this.props.container && this.scalebar && this.scalebar.getContainer()) {
             try {
                 document.querySelector(this.props.container).removeChild(this.scalebar.getContainer());
             } catch(e) {

web/client/components/map/leaflet/__tests__/DrawSupport-test.jsx

@@ -105,14 +105,15 @@ describe('Leaflet DrawSupport', () => {
 
     it('test map onClick handler created circle', () => {
         let bounds = L.latLngBounds(L.latLng(40.712, -74.227), L.latLng(40.774, -74.125));
-        let layer = {
-            getBounds: function() { return bounds; },
-            toGeoJSON: function() {return {geometry: {coordinates: [0, 0]}}; }
-        };
         let map = L.map("map", {
             center: [51.505, -0.09],
             zoom: 13
         });
+        let layer = {
+            getBounds: function() { return bounds; },
+            toGeoJSON: function() {return {geometry: {coordinates: [0, 0]}}; },
+            _map: map
+        };
         let cmp = ReactDOM.render(
             <DrawSupport
                 map={map}
@@ -176,14 +177,15 @@ describe('Leaflet DrawSupport', () => {
     it('test draw replace with circle', () => {
         const RADIUS = 1;
         let bounds = L.latLngBounds(L.latLng(40.712, -74.227), L.latLng(40.774, -74.125));
-        let layer = {
-            getBounds: function() { return bounds; },
-            toGeoJSON: function() {return {geometry: {coordinates: [0, 0]}}; }
-        };
         let map = L.map("map", {
             center: [51.505, -0.09],
             zoom: 13
         });
+        let layer = {
+            getBounds: function() { return bounds; },
+            toGeoJSON: function() {return {geometry: {coordinates: [0, 0]}}; },
+            _map: map
+        };
         let cmp = ReactDOM.render(
             <DrawSupport
                 map={map}

web/client/components/map/leaflet/__tests__/Layer-test.jsx

@@ -5,12 +5,13 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var React = require('react');
-var ReactDOM = require('react-dom');
-var L = require('leaflet');
-var LeafLetLayer = require('../Layer.jsx');
-var Feature = require('../Feature.jsx');
-var expect = require('expect');
+
+const L = require('leaflet');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const LeafLetLayer = require('../Layer.jsx');
+const Feature = require('../Feature.jsx');
+const expect = require('expect');
 
 const assign = require('object-assign');