hotline

application/assets/js/maps.js

@@ -221,6 +221,11 @@ const maps = (() => {
         document.activeElement.style.background = "black";
         document.activeElement.style.color = "white";
         general.last_map_url = "";
+        localStorage.setItem("last_map_type", "");
+        localStorage.setItem("last_map_attribution", "");
+        localStorage.setItem("last_map_max_zoom", "");
+        localStorage.setItem("last_map_url", "");
+
         helper.side_toaster("layer removed", 3000);
       }
       return false;

application/assets/js/module.js

@@ -87,6 +87,60 @@ const module = (() => {
     return result;
   };
 
+  var colors = ["blue", "green", "yellow", "red", "black"];
+
+  let hotline = (data) => {
+    // Clear the existing polylines from the group
+    hotline_group.clearLayers();
+
+    // Find the minimum and maximum elevations in the data
+    const minElevation = Math.min(...data.map((coord) => coord.alt));
+    const maxElevation = Math.max(...data.map((coord) => coord.alt));
+
+    // Loop through the coordinates using forEach
+    data.forEach(function (coord, index, array) {
+      if (index < array.length - 1) {
+        var segmentCoords = [
+          [coord.lat, coord.lng],
+          [array[index + 1].lat, array[index + 1].lng],
+        ];
+
+        var altitude = coord.alt;
+
+        // Calculate the percentage of elevation within the range
+        const elevationPercent =
+          (altitude - minElevation) / (maxElevation - minElevation);
+
+        // Interpolate color based on elevation percentage using Chroma.js
+        const color = chroma.scale(colors).mode("lab")(elevationPercent).hex();
+
+        L.polyline(segmentCoords, { color: color }).addTo(hotline_group);
+      }
+    });
+    setTimeout(() => {
+      hotline_group.bringToFront();
+    }, 1000);
+  };
+
+  //parse gpx
+
+  let parseGPX = function (gpxData) {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(gpxData, "text/xml");
+    const waypoints = xmlDoc.querySelectorAll("trkpt");
+
+    const latLngAltData = [];
+
+    waypoints.forEach(function (waypoint) {
+      const lat = parseFloat(waypoint.getAttribute("lat"));
+      const lng = parseFloat(waypoint.getAttribute("lon"));
+      const ele = parseFloat(waypoint.querySelector("ele").textContent);
+
+      latLngAltData.push({ lat: lat, lng: lng, alt: ele });
+    });
+
+    return latLngAltData;
+  };
   /////////////////////////
   /////Load GPX///////////
   ///////////////////////
@@ -138,7 +192,10 @@ const module = (() => {
         };
 
         reader.onloadend = function (event) {
-          var gpx = reader.result; // URL to your GPX file or the GPX itself
+          var gpx = reader.result;
+
+          // let a = parseGPX(gpx);
+          // hotline(a);
 
           new L.GPX(gpx, {
             async: true,
@@ -260,10 +317,32 @@ const module = (() => {
         //to do if geojson is marker add to  marker_array[]
         //https://blog.codecentric.de/2018/06/leaflet-geojson-daten/
         L.geoJSON(geojson_data, {
-          onEachFeature: function (feature, layer) {
+          style: function (feature) {
+            // Default values if not defined in the GeoJSON file
+            var color = "black"; // Default line color
+            var weight = 0.5; // Default line width
+
+            // Check if the style properties are defined in the GeoJSON
+            if (feature.properties.stroke) {
+              color = feature.properties.stroke; // Use "stroke" property for line color
+            }
+
+            if (feature.properties["stroke-width"]) {
+              weight = feature.properties["stroke-width"];
+            }
+
+            return {
+              color: color, // Line color
+              weight: weight, // Line width
+            };
+          },
+
+          onEachFeature: function (feature) {
             if (feature.geometry != null) {
               let p = feature.geometry.coordinates[0];
-              map.flyTo([p[1], p[0]]);
+              try {
+                map.flyTo([p[1], p[0]]);
+              } catch (e) {}
             }
             //routing data
             if (feature.properties.segments != undefined) {
@@ -272,10 +351,10 @@ const module = (() => {
               }
             }
           },
+
           // Marker Icon
           pointToLayer: function (feature, latlng) {
             let t = L.marker(latlng);
-            //to do
             if (feature.properties.hasOwnProperty("popup")) {
               t.bindPopup(feature.properties.popup, module.popup_option);
             }
@@ -422,6 +501,7 @@ const module = (() => {
     if (gpx_selection_count > gpx_selection.length - 1) gpx_selection_count = 0;
     map.fitBounds(gpx_selection[gpx_selection_count].getBounds());
     let m = gpx_selection[gpx_selection_count].getLayers();
+
     const keys = Object.keys(m[0]._layers);
     const firstKey = keys[0];
     general.gpx_selection_latlng = m[0]._layers[firstKey]._latlngs;
@@ -461,6 +541,7 @@ const module = (() => {
     let n = gpx_selection_info.distance / 1000;
     n = n.toFixed(2);
     document.getElementById("gpx-distance").innerText = n;
+    gpx_string = gpx_selection[gpx_selection_count]._gpx;
   };
 
   let closest_average = [];
@@ -851,10 +932,9 @@ const module = (() => {
         if (mainmarker.device_alt) {
           if (isNaN(mainmarker.device_alt)) return false;
           alt = mainmarker.device_alt;
+          tracking_altitude.push(alt);
         }
 
-        tracking_altitude.push(alt);
-
         polyline_tracking.addLatLng([
           mainmarker.device_lat,
           mainmarker.device_lng,
@@ -868,6 +948,12 @@ const module = (() => {
           timestamp: ts.toISOString(),
         });
 
+        try {
+          hotline(tracking_cache);
+        } catch (e) {
+          console.log(e);
+        }
+
         // Update the view with tracking data
 
         if (tracking_cache.length > 2) {
@@ -1100,6 +1186,7 @@ const module = (() => {
   };
 
   return {
+    hotline,
     convert_units,
     set_f_upd_markers,
     select_marker,
@@ -1121,5 +1208,6 @@ const module = (() => {
     get_closest_point,
     pushLocalNotification,
     uniqueId,
+    parseGPX,
   };
 })();

application/index.html

@@ -826,10 +826,15 @@ <h2>Thank You!</h2>
 
     </div>
     <script src="assets/js/dayjs.js"></script>
+    <script src="assets/js/chroma.min.js"></script>
+    <script src="assets/js/GPXParser.js"></script>
+
+
 
     <script src="http://127.0.0.1/api/v1/shared/core.js"></script>
     <script src="http://127.0.0.1/api/v1/shared/session.js"></script>
     <script src="http://127.0.0.1/api/v1/apps/service.js"></script>
+
     <script defer src="assets/js/keepalive.js"></script>
     <script defer src="assets/js/osm.js"></script>
 
@@ -840,6 +845,8 @@ <h2>Thank You!</h2>
     <script defer src="assets/js/applait.finder.min.js"></script>
     <script defer src="assets/js/olc.js"></script>
     <script defer src="assets/js/leaflet.js"></script>
+
+
     <script defer src="assets/js/GeometryUtil.js"></script>
     <script defer src="assets/js/pouchdb_7.3.0_pouchdb.min.js"></script>
 
@@ -862,5 +869,7 @@ <h2>Thank You!</h2>
     <script defer src="assets/js/openweather.js"></script>
     <script defer src="assets/js/togpx.js"></script>
 
+
+
   </body>
 </html>

application/index.js

@@ -14,12 +14,14 @@ let measure_group = new L.FeatureGroup();
 let tracking_group = new L.FeatureGroup();
 let gpx_group = new L.FeatureGroup();
 let geoJSON_group = new L.FeatureGroup();
+var hotline_group = new L.FeatureGroup();
 
 var jsonLayer = L.geoJSON("", { color: "red" });
 let map;
 let tracking_timestamp = [];
 let myMarker;
 let gpx_selection_info = {};
+let gpx_string;
 let tilesLayer = "";
 let n;
 
@@ -89,7 +91,7 @@ let general = {
   last_map_attribution:
     localStorage.getItem("last_map_attribution") != null
       ? localStorage.getItem("last_map_attribution")
-      : "test",
+      : "",
   last_map_url:
     localStorage.getItem("last_map_url") != null
       ? localStorage.getItem("last_map_url")
@@ -415,6 +417,7 @@ document.addEventListener("DOMContentLoaded", function () {
   map.addLayer(tracking_group);
   map.addLayer(gpx_group);
   map.addLayer(geoJSON_group);
+  map.addLayer(hotline_group);
 
   jsonLayer.addTo(map);
 
@@ -996,9 +999,6 @@ document.addEventListener("DOMContentLoaded", function () {
   };
 
   let open_finder = function () {
-    helper.calculateDatabaseSizeInMB(tilesLayer._db).then(function (sizeInMB) {
-      document.querySelector("#clear-cache em").innerText = sizeInMB.toFixed(2);
-    });
     settings.load_settings();
     finder_tabindex();
     document.querySelector("div#finder").style.display = "block";
@@ -1020,6 +1020,9 @@ document.addEventListener("DOMContentLoaded", function () {
         openweather_callback
       );
     }
+    helper.calculateDatabaseSizeInMB(tilesLayer._db).then(function (sizeInMB) {
+      document.querySelector("#clear-cache em").innerText = sizeInMB.toFixed(2);
+    });
   };
 
   //////////////////////////
@@ -1537,7 +1540,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
       //custom maps and layers from json file
       if (document.activeElement.classList.contains("active-layer")) {
-        maps.addMap("");
+        maps.addMap("", "", "", "");
 
         return false;
       }
@@ -2225,6 +2228,10 @@ document.addEventListener("DOMContentLoaded", function () {
         window.close();
         break;
 
+      case "6":
+        module.hotline(module.parseGPX(gpx_string));
+        break;
+
       case "1":
         if (status.windowOpen == "map") {
           if (status.tracking_running) {
@@ -2750,6 +2757,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
       case "6":
         module.select_gpx();
+
         break;
 
       case "7":

application/manifest.webapp

@@ -1,13 +1,13 @@
   {
-  "version": "1.9.72",
+  "version": "1.9.732",
   "version_name": "together we are strong",
   "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.",
   "launch_path": "/index.html",
   "type": "privileged",
   "fullscreen": "true",
   "priority": "high",
-  "userAgentInfo": "o.map / 1.9.718  written by strukturart@gmail.com",
+  "userAgentInfo": "o.map / 1.9.7  written by strukturart@gmail.com",
   "icons": {
     "56": "/assets/icons/icon-56-56.png",
     "112": "/assets/icons/icon-112-112.png"