select polyline

application/assets/css/main.css

@@ -682,6 +682,52 @@ div#intro div#intro-footer {
   left: 0px;
 }
 
+/*///////////////////////////
+///LOADING////////////////*/
+
+.loading-spinner {
+  display: none;
+  position: fixed;
+  width: 80px;
+  height: 80px;
+  top: 50%;
+  left: 50%;
+  margin-left: -40px;
+  margin-top: -40px;
+
+  z-index: 5000000;
+}
+.loading-spinner div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid rgb(126, 11, 11);
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: rgb(238, 27, 27) transparent transparent transparent;
+}
+.loading-spinner div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.loading-spinner div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.loading-spinner div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /*/ //////////////////////////
 ///FINDER////////////////*/
 

application/assets/js/maps.js

@@ -221,7 +221,7 @@ const maps = (() => {
   let addMap = function (url, attribution, max_zoom, type, marker) {
     console.log(general.active_layer);
     if (attribution == null) attribution = "";
-    if (max_zoom == null) max_zoom = 12;
+    if (max_zoom == null) max_zoom = 17;
     //remove layer
     if (url == "") {
       if (map.hasLayer(tilesLayer)) {

application/assets/js/module.js

@@ -403,6 +403,13 @@ const module = (() => {
       }
     });
 
+    selected_polyline_markers_group.eachLayer(function (l) {
+      // Check if the layer is a marker and not already in markers_collection
+      if (l instanceof L.Marker && markers_collection.indexOf(l) === -1) {
+        markers_collection.push(l);
+      }
+    });
+
     status.marker_selection = true;
     status.windowOpen = "marker";
 
@@ -464,15 +471,32 @@ const module = (() => {
     });
 
     if (index_polyline >= polyline_collection.length) index = 0;
+    let hh = polyline_collection[index_polyline];
+    selected_polyline_markers_group.clearLayers();
 
     //show selected marker
-    let i = polyline_collection[index_polyline].getLatLngs();
-    console.log(polyline_collection[index_polyline]);
-
-    // Check if the polyline has a popup
-    var popup = polyline_collection[index_polyline];
+    try {
+      let pu = polyline_collection[index_polyline].getPopup();
+
+      if (pu != undefined && pu._content != undefined) {
+        //get popup content
+        document.querySelector("input#popup").value = pu._content;
+        //show popup
+
+        polyline_collection[index_polyline].openPopup();
+        //close popup
+        setTimeout(function () {
+          polyline_collection[index_polyline].closePopup();
+        }, 5000);
+      }
+    } catch (e) {}
+    map.setView(polyline_collection[index_polyline].getCenter());
 
-    map.setView(i[0]);
+    hh.getLatLngs().forEach((e) => {
+      L.marker(e)
+        .addTo(selected_polyline_markers_group)
+        .setIcon(maps.public_transport);
+    });
 
     return polyline_collection[index];
   };

application/assets/js/overpass.js

@@ -21,10 +21,11 @@ const overpass = (() => {
 
   function call(map, overpassQuery, icon) {
     //clear group before ad new items
-    if (general.zoomlevel > 13) {
+    console.log(map.getZoom());
+    if (map.getZoom() < 14) {
       helper.side_toaster(
         "Please zoom, otherwise too much data will be loaded",
-        2000
+        5000
       );
       return false;
     }
@@ -77,14 +78,43 @@ const overpass = (() => {
 
     let segmentCoords = [];
     let history = "";
-    fetch(resultUrl)
-      .then((response) => response.json())
-      .then(function (data) {
-        let no_data = false;
+    function fetchDataWithXHR(resultUrl, callback, errorCallback) {
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", resultUrl, true);
+      xhr.responseType = "json";
+
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          callback(xhr.response);
+        } else {
+          errorCallback(
+            new Error(`Failed to fetch: ${xhr.status} ${xhr.statusText}`)
+          );
+        }
+      };
+      xhr.onprogress = (event) => {
+        document.querySelector(".loading-spinner").style.display = "block";
+      };
+
+      xhr.onerror = function () {
+        errorCallback(new Error("Network error occurred"));
+        document.querySelector(".loading-spinner").style.display = "none";
+      };
+
+      xhr.send();
+    }
+
+    fetchDataWithXHR(
+      resultUrl,
+      function (data) {
+        if (data.elements.length == 0) {
+          helper.side_toaster("no data", 4000);
+          document.querySelector(".loading-spinner").style.display = "none";
+          return false;
+        }
+
         data.elements.forEach((element) => {
-          // console.log(element);
-          if (element.type == "node" && !public_transport) {
-            no_data = true;
+          if (element.type === "node" && !public_transport) {
             let k = L.marker([element.lat, element.lon])
               .addTo(overpass_group)
               .setIcon(maps[icon]);
@@ -95,62 +125,44 @@ const overpass = (() => {
             } catch (e) {}
           }
 
-          if (element.type == "way" && !public_transport) {
-            no_data = true;
+          if (element.type === "way" && !public_transport) {
           }
 
-          if (element.type == "relation" && public_transport) {
-            no_data = true;
+          if (element.type === "relation" && public_transport) {
             let f = element;
+
             element.members.forEach((e) => {
-              //console.log(e.ref);
-              data.elements.forEach((m) => {
-                if (m.id == e.ref) {
-                  if (m.type == "node") {
-                    // console.log(f.tags.name);
-                    let k = L.marker([m.lat, m.lon])
-                      .addTo(overpass_group)
-                      .setIcon(maps[icon]);
-
-                    k.tag = overpassQuery;
-
-                    try {
-                      k.bindPopup(f.tags.name);
-                    } catch (e) {}
-
-                    segmentCoords.push([m.lat, m.lon]);
-
-                    //draw line and reset
-                    if (f.id != history) {
-                      segmentCoords.pop();
-                      let h = L.polyline(segmentCoords, {
-                        color: generateRandomColor(),
-                      });
-
-                      h.tag = overpassQuery;
-                      h.name = "test";
-
-                      h.addTo(overpass_group);
-                      segmentCoords = [];
-                    }
-
-                    history = f.id;
-                  }
+              let m = data.elements.find((m) => m.id === e.ref);
+
+              if (m && m.type === "node") {
+                segmentCoords.push([m.lat, m.lon]);
+
+                if (f.id !== history) {
+                  segmentCoords.pop();
+                  let h = L.polyline(segmentCoords, {
+                    color: generateRandomColor(),
+                  });
+
+                  h.bindPopup(f.tags.name);
+                  h.tag = overpassQuery;
+
+                  h.addTo(overpass_group);
+                  segmentCoords = [];
                 }
-              });
+
+                history = f.id;
+              }
             });
           }
         });
 
-        if (!no_data) {
-          helper.side_toaster("no data", 4000);
-        } else {
-          helper.side_toaster("layer loaded", 2000);
-        }
-      })
-      .catch(function (err) {
+        helper.side_toaster("layer loaded", 2000);
+        document.querySelector(".loading-spinner").style.display = "none";
+      },
+      function (err) {
         helper.side_toaster("something went wrong, try again" + err, 6000);
-      });
+      }
+    );
   }
 
   return {

application/index.html

@@ -49,6 +49,13 @@
     <div id="toast" class="width-100"></div>
     <div id="side-toast"></div>
 
+    <div class="loading-spinner">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
     <div id="search-box">
       <input
         type="search"

application/index.js

@@ -6,6 +6,7 @@ const debug = false;
 
 //groups
 let markers_group = new L.FeatureGroup();
+let selected_polyline_markers_group = new L.FeatureGroup();
 let overpass_group = new L.FeatureGroup();
 let measure_group_path = new L.FeatureGroup();
 let measure_group = new L.FeatureGroup();
@@ -76,7 +77,7 @@ let general = {
       ? localStorage.getItem("openstreetmap_token")
       : "",
   step: 0.001,
-  zoomlevel: 12,
+  zoomlevel: 18,
   measurement_unit: "km",
   active_item: "",
   active_layer: [],
@@ -414,6 +415,7 @@ document.addEventListener("DOMContentLoaded", function () {
   map.addLayer(gpx_group);
   map.addLayer(geoJSON_group);
   map.addLayer(hotline_group);
+  map.addLayer(selected_polyline_markers_group);
 
   jsonLayer.addTo(map);
 
@@ -424,6 +426,8 @@ document.addEventListener("DOMContentLoaded", function () {
     general.last_map_type
   );
 
+  console.log(general);
+
   //get files and store
 
   // Function to remove duplicates based on the 'name' property

application/manifest.webapp

@@ -1,5 +1,5 @@
   {
-  "version": "1.9.777",
+  "version": "1.9.779",
   "version_name": "hotline",
   "name": "o.map",
   "description": "O.map, your ultimate navigation companion for KaiOS-powered devices. O.map is a lightweight and feature-rich map application designed specifically for KaiOS, enabling you to explore and navigate the world with ease. Whether you're a local resident, a tourist, or an adventurer, O.map is here to enhance your journey and keep you on the right track.",

docs/assets/js/module.js

@@ -403,6 +403,13 @@ const module = (() => {
       }
     });
 
+    selected_polyline_markers_group.eachLayer(function (l) {
+      // Check if the layer is a marker and not already in markers_collection
+      if (l instanceof L.Marker && markers_collection.indexOf(l) === -1) {
+        markers_collection.push(l);
+      }
+    });
+
     status.marker_selection = true;
     status.windowOpen = "marker";
 
@@ -464,11 +471,30 @@ const module = (() => {
     });
 
     if (index_polyline >= polyline_collection.length) index = 0;
+    let hh = polyline_collection[index_polyline];
+    selected_polyline_markers_group.clearLayers();
 
     //show selected marker
-    let i = polyline_collection[index];
-    console.log(polyline_collection);
-    // map.setView(i[0]);
+    let pu = polyline_collection[index_polyline].getPopup();
+
+    if (pu != undefined && pu._content != undefined) {
+      //get popup content
+      document.querySelector("input#popup").value = pu._content;
+      //show popup
+
+      polyline_collection[index_polyline].openPopup();
+      //close popup
+      setTimeout(function () {
+        polyline_collection[index_polyline].closePopup();
+      }, 5000);
+    }
+    map.setView(polyline_collection[index_polyline].getCenter());
+
+    hh.getLatLngs().forEach((e) => {
+      L.marker(e)
+        .addTo(selected_polyline_markers_group)
+        .setIcon(maps.public_transport);
+    });
 
     return polyline_collection[index];
   };