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

@@ -386,7 +386,6 @@ const module = (() => {
   let select_marker = function () {
     index++;
     let markers_collection = []; //makers in map boundingbox
-    let polyline_collection = [];
 
     // Reset contained list
     overpass_group.eachLayer(function (l) {
@@ -403,6 +402,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";
 
@@ -413,6 +419,7 @@ const module = (() => {
 
     //show selected marker
     map.setView(markers_collection[index].getLatLng());
+    console.log(markers_collection[index]);
 
     //popup
     document.querySelector("input#popup").value = "";
@@ -463,16 +470,42 @@ const module = (() => {
       }
     });
 
-    if (index_polyline >= polyline_collection.length) index = 0;
+    if (index_polyline >= polyline_collection.length) index_polyline = 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]);
+    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);
+      }
 
-    // Check if the polyline has a popup
-    var popup = polyline_collection[index_polyline];
+      map.setView(polyline_collection[index_polyline].getCenter());
 
-    map.setView(i[0]);
+      // console.log(polyline_collection[index_polyline].markers);
+      /*
+      hh.getLatLngs().forEach((e) => {
+        L.marker(e)
+          .addTo(selected_polyline_markers_group)
+          .setIcon(maps.public_transport);
+      });*/
+
+      polyline_collection[index_polyline].markers.forEach((e) => {
+        L.marker(e.latlng)
+          .addTo(selected_polyline_markers_group)
+          .setIcon(maps.public_transport);
+      });
+    } catch (e) {}
 
     return polyline_collection[index];
   };