trackhub · angelk · Sep 22, 2022 · Sep 22, 2022
diff --git a/assets/css/global.scss b/assets/css/global.scss
@@ -3,10 +3,13 @@
 @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
 @import "~@fortawesome/fontawesome-free/scss/solid.scss";
 @import "~@fortawesome/fontawesome-free/scss/brands.scss";
+@import "~leaflet/dist/leaflet.css";
+@import "~leaflet.markercluster/dist/MarkerCluster.css";
+@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
+@import "leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css";
 
 @import "difficulty";
 @import "footer";
 @import "icons";
 @import "rating";
 @import "uploaded_image.css";
-
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -13,15 +13,27 @@ require('bootstrap');
 
 // Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
 // var $ = require('jquery');
-
+import * as L from "leaflet"
 window.jQuery = require('jquery');
 window.chartJs = require('chart.js');
 window.lighBox = require('ekko-lightbox/dist/ekko-lightbox.js');
+require('leaflet.markercluster')
+window.MapControlFullScreen =  require('./map/control/fullScreen')
+
+import { GestureHandling } from "leaflet-gesture-handling";
+L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
+
+// see https://github.com/PaulLeCam/react-leaflet/issues/255#issuecomment-269750542
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+});
 
 window.AppTrack = require('./components/appTrack.js');
 window.AppPlace = require('./map/appPoint.js');
 window.StarRating = require('./components/starRating');
 
-window.MapControlFullScreen =  require('./map/control/fullScreen')
 window.jsUpload = require('./components/fileUpload');
 window.bsCustomFileInput = require('bs-custom-file-input');
diff --git a/assets/js/map/control/fullScreen.js b/assets/js/map/control/fullScreen.js
@@ -19,10 +19,8 @@ fullScreenControl = L.Control.extend({
             map.getContainer().scrollIntoView();
             let currentHeight = map.getContainer().style.height;
             if (currentHeight === "90vh") {
-                map.gestureHandling.addHooks();
                 map.getContainer().style.height='30vh';
             } else {
-                map.gestureHandling.removeHooks();
                 map.getContainer().style.height='90vh';
             }
 

diff --git a/package.json b/package.json
@@ -17,6 +17,9 @@
         "chart.js": "^2.8.0",
         "ekko-lightbox": "^5.3.0",
         "jquery": "^3.5.0",
+        "leaflet": "~1.8.0",
+        "leaflet-gesture-handling": "^1.2.2",
+        "leaflet.markercluster": "^1.5.3",
         "node-sass": "^7.0",
         "popper.js": "^1.15.0",
         "sass-loader": "^12.0"

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -4,15 +4,6 @@
         {% include "include/head.html.twig" %}
         {{ encore_entry_link_tags('app') }}
         {% block stylesheets %}{% endblock %}
-        <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
-                integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
-                crossorigin=""></script>
-        <script src="https://unpkg.com/leaflet-gesture-handling@1.1.8/dist/leaflet-gesture-handling.js"
-                crossorigin=""></script>
-        <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
-                integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg=="
-                crossorigin=""></script>
-
         {{ encore_entry_script_tags('app') }}
     </head>
     <body>

diff --git a/templates/home/home.html.twig b/templates/home/home.html.twig
@@ -139,7 +139,7 @@
                 return parseFloat(this.get(key))
             }
 
-            has (key) {
+            has(key) {
                 return this.properties.has(key)
             }
 
@@ -150,7 +150,7 @@
 
         const hashData = new HashData();
 
-        ["mbike", "mfoot"].forEach(function(key) {
+        ["mbike", "mfoot"].forEach(function (key) {
             if (!hashData.has(key)) {
                 hashData.setBool(key, true);
             }
@@ -160,7 +160,7 @@
             hashData.setInt("mattr", 1)
         }
 
-        ["mmotorcycle"].forEach(function(key) {
+        ["mmotorcycle"].forEach(function (key) {
             if (!hashData.has(key)) {
                 hashData.setBool(key, false);
             }
@@ -202,7 +202,7 @@
                 }
                 if (mapOptions.showAttractions === 2) {
                     place.show();
-                } else if(mapOptions.showAttractions === 3) {
+                } else if (mapOptions.showAttractions === 3) {
                     place.hide();
                 } else {
                     if (map.getZoom() >= 13) {
@@ -242,12 +242,12 @@
             chunkedLoading: true
         });
 
-        const moveEndListener = function() {
+        const moveEndListener = function () {
             hashData.setFloat("mclat", map.getCenter().lat);
             hashData.setFloat("mclng", map.getCenter().lng);
 
             let ajax = new XMLHttpRequest();
-            ajax.onreadystatechange = function() {
+            ajax.onreadystatechange = function () {
                 if (this.readyState != 4 || this.status != 200) {
                     return;
                 }
@@ -286,7 +286,7 @@
                                 ]);
                             }
 
-                            let polylineColor = gpsColors[Math.floor(Math.random()*gpsColors.length)];
+                            let polylineColor = gpsColors[Math.floor(Math.random() * gpsColors.length)];
                             let polyline = L.polyline(pointsAsPolyline, {color: polylineColor});
                             polylineCollection.push(polyline);
                             polyline.bindPopup('<a href="/{{ app.request.locale }}/gps/view/' + encodeURIComponent(slugOrId) + '">{{ 'View details'|trans|e('js') }}</a>');
@@ -397,7 +397,7 @@
         moveEndListener(); // initial load for current map viewpoint
 
         if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function(position) {
+            navigator.geolocation.getCurrentPosition(function (position) {
                 map.panTo(new L.LatLng(position.coords.latitude, position.coords.longitude));
             });
         }

diff --git a/templates/include/head.html.twig b/templates/include/head.html.twig
@@ -15,16 +15,5 @@
 {{ app_meta_alternate()|raw }}
 
 <!-- Import stylesheets --->
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
-      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
-      crossorigin=""/>
-<link rel="stylesheet" ref="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
-      integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ=="
-      crossorigin=""/>
-<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
-      integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ=="
-      crossorigin=""/>
-<link rel="stylesheet" type="text/css"
-      href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css">
 <link rel="stylesheet" type="text/css"
       href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css">
diff --git a/yarn.lock b/yarn.lock
@@ -3276,6 +3276,21 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
+leaflet-gesture-handling@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/leaflet-gesture-handling/-/leaflet-gesture-handling-1.2.2.tgz#ea10afb94f2d477d77d47beb21e409ed327df07a"
+  integrity sha512-Blf5V4PoNphWkzL7Y1qge+Spkd4OCQ2atjwUNhMhLIcjKzPcBH++x/lwOinaR9jSqLWqJ6oKYO8d0XdTffy4hQ==
+
+leaflet.markercluster@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
+  integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
+
+leaflet@~1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
+  integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
+
 lilconfig@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"