Implementation of Track loading

Use leaflet-filelayer to load kml, gpx, geojson, json tracks and display them as new Overlay layer.

index.html

@@ -81,6 +81,15 @@
                             <span data-i18n="navbar.load.title">Load</span>
                         </a>
                         <div class="dropdown-menu" aria-labelledby="navbarLoadDropdown">
+                            <div id="navbarLoadTracksContainer">
+                                <a
+                                    class="dropdown-item"
+                                    data-i18n="navbar.load.tracks"
+                                    href="#"
+                                    id="navbarLoadTracks"
+                                    >Tracks</a
+                                >
+                            </div>
                             <a
                                 class="dropdown-item"
                                 data-i18n="navbar.load.nogos"

js/control/LayersTab.js

@@ -47,7 +47,11 @@ BR.LayersTab = BR.ControlLayers.extend({
                     if (!self._layers[i].overlay || !map.hasLayer(self._layers[i].layer)) {
                         continue;
                     }
-                    self._layers[i].layer.setOpacity(opacity);
+                    if (self._layers[i].layer.setOpacity) {
+                        self._layers[i].layer.setOpacity(opacity);
+                    } else {
+                        self._layers[i].layer.setStyle({opacity:opacity});
+                    }
                 }
             }
         });

js/index.js

@@ -271,6 +271,8 @@
             BR.stravaSegments(map, layersControl);
         }
 
+        BR.tracksLoader(map, layersControl);
+
         map.addControl(
             new BR.OpacitySliderControl({
                 id: 'route',

js/plugin/TracksLoader.js

@@ -0,0 +1,63 @@
+BR.tracksLoader = function(map, layersControl) {
+    TracksLoader = L.Control.FileLayerLoad.extend({
+        options: {
+            layer: L.geoJson,
+            layerOptions: {style: {color:'blue'}},
+            addToMap: false,
+            // File size limit in kb (default: 1024) ?
+            fileSizeLimit: 1024,
+        },
+
+        _initContainer: function () {
+            var thisLoader = this.loader;
+    
+            var fileInput;
+            var container = L.DomUtil.get('navbarLoadTracksContainer');
+    
+            // Create an invisible file input
+            fileInput = L.DomUtil.create('input', 'hidden', container);
+            fileInput.type = 'file';
+            fileInput.multiple = 'multiple';
+            if (!this.options.formats) {
+                fileInput.accept = '.gpx,.kml,.json,.geojson';
+            } else {
+                fileInput.accept = this.options.formats.join(',');
+            }
+            fileInput.style.display = 'none';
+            // Load on file change
+            fileInput.addEventListener('change', function () {
+                thisLoader.loadMultiple(this.files);
+                // reset so that the user can upload the same file again if they want to
+                this.value = '';
+            }, false);
+    
+            var link = L.DomUtil.get('navbarLoadTracks');
+            L.DomEvent.disableClickPropagation(link);
+            L.DomEvent.on(link, 'click', function (e) {
+                fileInput.click();
+                e.preventDefault();
+            });
+            // dummy, no own representation, triggered in loading menu
+            return L.DomUtil.create('div');
+        }
+    });
+    var tracksLoaderControl = new TracksLoader();
+    tracksLoaderControl.addTo(map);
+
+    tracksLoaderControl.loader.on('data:loaded', function (event) {
+        var layer = event.layer;
+        layersControl.addOverlay(layer, event.filename);
+        layer.addTo(map);
+    });
+
+    tracksLoaderControl.loader.on('data:error', function (event) {
+        var err = event.error;
+        BR.message.showError(
+            i18next.t('warning.tracks-load-error', {
+                error: err && err.message ? err.message : err
+            })
+        );
+    });
+
+    return tracksLoaderControl;
+};

locales/de.json

@@ -132,7 +132,8 @@
     "export": "Export",
     "load": {
       "nogos": "No-go-Areas",
-      "title": "Laden"
+      "title": "Laden",
+      "tracks": "Touren"
     },
     "profile": {
       "car-eco": "Auto (effizient)",
@@ -208,6 +209,7 @@
     "profile-error": "Profil-Fehler: keine oder leere Antwort vom Server",
     "strava-error": "Fehler beim Laden der Strava Segmente: {{error}}",
     "temporary-profile": "<strong>Note:</strong> Hochgeladene benutzerdefinierte Profile nur verübergehend auf dem Server zwischengespeichert. <br/>Bitte Bearbeitungen auf dem lokalen PC speichern.",
+    "tracks-load-error'": "Fehler beim Laden der Touren: {{error}}",
     "upload-error": "Fehler beim Hochladen: {{error}}"
   }
 }

locales/en.json

@@ -132,7 +132,8 @@
     "export": "Export",
     "load": {
       "nogos": "No-go areas",
-      "title": "Load"
+      "title": "Load",
+      "tracks": "Tracks"
     },
     "profile": {
       "car-eco": "Car (economic)",
@@ -208,6 +209,7 @@
     "profile-error": "Profile error: no or empty response from server",
     "strava-error": "Error getting Strava segments: {{error}}",
     "temporary-profile": "<strong>Note:</strong> Uploaded custom profiles are only cached temporarily on the server.<br/>Please save your edits to your local PC.",
+    "tracks-load-error'": "Error loading tracks: {{error}}",
     "upload-error": "Upload error: {{error}}"
   }
 }

package.json

@@ -26,6 +26,7 @@
     "dependencies": {
         "@bagage/leaflet.restoreview": "1.0.1",
         "@mapbox/polyline": "^0.2.0",
+        "@mapbox/togeojson": "^0.16.0",
         "@turf/turf": "^5.1.6",
         "async": "~0.9.2",
         "bootbox": "~5.1.3",
@@ -47,6 +48,7 @@
         "leaflet-easybutton": "*",
         "leaflet-editable": "^1.1.0",
         "leaflet-elevation": "nrenner/Leaflet.Elevation#dev",
+        "leaflet-filelayer": "^1.2.0",
         "leaflet-plugins": "~3.0.0",
         "leaflet-providers": "^1.5.0",
         "leaflet-routing": "nrenner/leaflet-routing#dev",

yarn.lock

@@ -32,6 +32,15 @@
   resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-1.0.0.tgz#b6f1c3cf61f8dddcf9ac6dce0b2e50e5f4e965bc"
   integrity sha512-5Vu99e/+kVF0h0eiWa3er3bYnjorq6SGTn06HqeinFAETlQpcHGj7+DanmFlNyXkgvRcKi0nQytuMm6QA2CkAQ==
 
+"@mapbox/togeojson@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/togeojson/-/togeojson-0.16.0.tgz#5b283001078431821dc74e287acaf56a11ceb37c"
+  integrity sha1-WygwAQeEMYIdx04oesr1ahHOs3w=
+  dependencies:
+    concat-stream "~1.5.1"
+    minimist "1.2.0"
+    xmldom "~0.1.19"
+
 "@turf/along@5.1.x":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@turf/along/-/along-5.1.5.tgz#61d6e6a6584acddab56ac5584e07bf8cbe5f8beb"
@@ -2234,6 +2243,15 @@ concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@~1.5.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
+  integrity sha1-cIl4Yk2FavQaWnQd790mHadSwmY=
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "~2.0.0"
+    typedarray "~0.0.5"
+
 concat-with-sourcemaps@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@@ -4430,6 +4448,11 @@ leaflet-elevation@nrenner/Leaflet.Elevation#dev:
   version "0.0.4"
   resolved "https://codeload.github.com/nrenner/Leaflet.Elevation/tar.gz/9ae6a3caef5f01abb3e55e05376df2e0046f7449"
 
+leaflet-filelayer@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/leaflet-filelayer/-/leaflet-filelayer-1.2.0.tgz#9f822e68a06072b0b0a8f328ba9419ba96bbccb1"
+  integrity sha512-H3HrOOM9bpkrRUacdnWISV0MKZXLBYsX24H4XV+55QbcGCvd9In6oPzANEnhsokHAwNWd9qP6GfiHEFCfn+qkA==
+
 leaflet-plugins@~3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/leaflet-plugins/-/leaflet-plugins-3.0.3.tgz#7c727ac79a37636b245dd1adc64e10c61b425864"
@@ -4831,7 +4854,7 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
@@ -5598,6 +5621,11 @@ process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
   integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
 
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
+
 progress-stream@^1.0.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/progress-stream/-/progress-stream-1.2.0.tgz#2cd3cfea33ba3a89c9c121ec3347abe9ab125f77"
@@ -5798,6 +5826,18 @@ readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@~2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  integrity sha1-j5A0HmilPMySh4jaz80Rs265t44=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -6900,7 +6940,7 @@ type@^1.0.1:
   resolved "https://registry.yarnpkg.com/type/-/type-1.0.1.tgz#084c9a17fcc9151a2cdb1459905c2e45e4bb7d61"
   integrity sha512-MAM5dBMJCJNKs9E7JXo4CXRAansRfG0nlJxW7Wf6GZzSOvH31zClSaHdIMWLehe/EGMBkqeC55rrkaOr5Oo7Nw==
 
-typedarray@^0.0.6:
+typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
@@ -7213,6 +7253,11 @@ ws@~6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
+xmldom@~0.1.19:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+  integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
+
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"