From 71da7707d97603566bf4044368cf12dabef6e7ff Mon Sep 17 00:00:00 2001 From: strukturart Date: Sun, 7 Jan 2024 11:41:41 +0100 Subject: [PATCH] select icons the better way ? --- .../assets/css/images/public-transport.png | Bin 0 -> 1466 bytes application/assets/css/main.css | 11 ++ application/assets/js/maps.js | 39 ++++++- application/assets/js/module.js | 70 ++++-------- application/assets/js/overpass.js | 107 +++++++++++++++--- application/index.js | 19 ++-- application/manifest.webapp | 2 +- application/manifest.webmanifest | 2 +- docs/assets/css/images/public-transport.png | Bin 0 -> 1466 bytes docs/assets/css/main.css | 17 ++- docs/assets/js/maps.js | 39 ++++++- docs/assets/js/module.js | 22 ++-- docs/assets/js/overpass.js | 104 ++++++++++++++--- docs/index.html | 2 +- docs/index.js | 28 +++-- docs/manifest.webapp | 2 +- docs/manifest.webmanifest | 2 +- 17 files changed, 346 insertions(+), 120 deletions(-) create mode 100644 application/assets/css/images/public-transport.png create mode 100644 docs/assets/css/images/public-transport.png diff --git a/application/assets/css/images/public-transport.png b/application/assets/css/images/public-transport.png new file mode 100644 index 0000000000000000000000000000000000000000..950edf24677ded147df13b26f91baa2b0fa70513 GIT binary patch literal 1466 zcmV;r1x5OaP)P001cn1^@s6z>|W`000GnNklGNuHDcIX17Zdjl&3`L?0sTjIws<{((Dh&g-s0<@jYQyl?D*X^?%13;ml^gy> ziMrY_^1WI=(g@LMizu=zCoA>C`6|QEq1eV92k*7m>G65*&@&6)aC&e}G zI)pf-Za|N`DT&Cn1J|o`19mumxW~hiKiKyc-P`S@q)rdTo84@QI@;0yXrG%9uhI>A zG5QHb6s4=<6xy{1 z@NMxEkryp{LS44%z$3lP^cX!9+2-;CTt3wM4(k*#C{aiIiLuB>jJj;KPhPzIC00bL zU3a#;aJld94lCW=`4&aAy8M7PY=HQ>O%$YEP4c4UY#CRxfgbE~(|uiI=YS8q;O9y6 zmIkXzR`}p7ti|PrM3a}WMnR=3NVnWdAAR>b9X@)DKL6=YsvmH%?I24wdq?Gh54_;# z$?_LvgjEdspdQlft#4CQ z`2Zyvy?*)N1Ftw|{_hakhG9WjS?Az@I@+IZ8JbWewR!XUK4&6346+d#~gsE0SY(LX8&JfY>Aj)RxGy96nwhs2rv zzW6pTnMpFkDSkT*a*6Dx|u@ds6ISVn0@^RmIsKZ5Y;bazbc;tTSq(kg(=481ODrPyNB6n z-$+U}(w$m6U6H$w17Bw+wDaFIe~GvNMYvnw31MpY0eQKT9l>SU``8k7w4)z!GZKMI z#_cEKq7k~i%nlK@6c-K?+R;B#5$?T#YpKD`t_4bAs^#E+@5QW$@OX3*`;(#{U^d-vY)&xEE>n5lYl&T?Am { html: '
', }); - const climbing_icon = L.divIcon({ + const default_overpass_icon = L.divIcon({ iconSize: [40, 40], iconAnchor: [30, 40], className: "climbing-marker", @@ -65,6 +65,13 @@ const maps = (() => { className: "end-marker", }); + const public_transport = L.divIcon({ + iconSize: [20, 20], + iconAnchor: [30, 40], + className: "climbing-marker", + html: '
', + }); + //caching settings from settings panel let caching_time = ""; @@ -211,7 +218,8 @@ const maps = (() => { let overlayer = ""; - let addMap = function (url, attribution, max_zoom, type) { + 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; //remove layer @@ -301,6 +309,9 @@ const maps = (() => { if (map.hasLayer(overlayer)) { general.active_layer.splice(general.active_layer.indexOf(url), 1); map.removeLayer(overlayer); + document.activeElement.classList.remove("active-layer"); + document.activeElement.style.background = "black"; + document.activeElement.style.color = "white"; return false; } general.active_layer.push(url); @@ -313,6 +324,9 @@ const maps = (() => { if (map.hasLayer(overlayer)) { general.active_layer.splice(general.active_layer.indexOf(url), 1); map.removeLayer(overlayer); + document.activeElement.classList.remove("active-layer"); + document.activeElement.style.background = "black"; + document.activeElement.style.color = "white"; return false; } else { general.active_layer.push(url); @@ -324,11 +338,23 @@ const maps = (() => { //overpass if (type == "overpass") { - if (overpass_query == url) { - overpass.call(map, url, "climbing_icon"); + //reset + + if (marker == "" || marker == null) marker = "default_overpass_icon"; + if (general.active_layer.includes(url)) { + //remove + overpass.call(map, url, marker); general.active_layer.splice(general.active_layer.indexOf(url), 1); + document.activeElement.classList.remove("active-layer"); + document.activeElement.style.background = "black"; + document.activeElement.style.color = "white"; } else { - overpass.call(map, url, "climbing_icon"); + overpass.call(map, url, marker); + general.active_layer.push(url); + + document.activeElement.classList.add("active-layer"); + document.activeElement.style.background = "white"; + document.activeElement.style.color = "black"; } } }; @@ -552,8 +578,9 @@ const maps = (() => { return { follow_icon, default_icon, + default_overpass_icon, goal_icon, - climbing_icon, + public_transport, water_icon, select_icon, tracking_icon, diff --git a/application/assets/js/module.js b/application/assets/js/module.js index 762ae2ca..a2bd7abf 100644 --- a/application/assets/js/module.js +++ b/application/assets/js/module.js @@ -382,66 +382,39 @@ const module = (() => { marker_list_updated = false; }; - let marker_list_updated = false; - - let markers_collection = []; //makers in map boundingbox let index = -1; let select_marker = function () { index++; + let markers_collection = []; //makers in map boundingbox - if (marker_list_updated == false) { - // Reset contained list - markers_collection = []; - - if (overpass_group != "") { - overpass_group.eachLayer(function (l) { - markers_collection.push(l); - }); + // Reset contained list + overpass_group.eachLayer(function (l) { + // Check if the layer is a marker + if (l instanceof L.Marker && markers_collection.indexOf(l) === -1) { + markers_collection.push(l); } + }); - markers_group.eachLayer(function (l) { + 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); - }); - - marker_list_updated = true; - } + } + }); status.marker_selection = true; status.windowOpen = "marker"; - console.log(markers_collection, index); - if (index >= markers_collection.length) index = 0; - map.setView(markers_collection[index]._latlng, map.getZoom()); + + console.log(overpass_group) + status.selected_marker = markers_collection[index]; helper.bottom_bar("cancel", "option", ""); - //reset icons and close popus - for (let t = 0; t < markers_collection.length; t++) { - let p = markers_collection[t].getIcon(); - - if ( - p.options.className != "follow-marker" && - p.options.className != "goal-marker" && - p.options.className != "start-marker" && - p.options.className != "end-marker" - ) { - markers_collection[t].setIcon(maps.default_icon); - } - markers_collection[index].closePopup(); - } - //show selected marker + map.setView(markers_collection[index].getLatLng()); - let p = markers_collection[index].getIcon(); - if ( - p.options.className != "follow-marker" && - p.options.className != "goal-marker" && - p.options.className != "start-marker" && - p.options.className != "end-marker" - ) { - markers_collection[index].setIcon(maps.select_icon); - } //popup document.querySelector("input#popup").value = ""; @@ -451,13 +424,16 @@ const module = (() => { //get popup content document.querySelector("input#popup").value = pu._content; //show popup - markers_collection[index] - .bindPopup(pu._content, popup_option) - .openPopup(); + + setTimeout(function () { + markers_collection[index] + .bindPopup(pu._content, popup_option) + .openPopup(); + }, 1000); //close popup setTimeout(function () { markers_collection[index].closePopup(); - }, 3000); + }, 5000); } return markers_collection[index]; }; diff --git a/application/assets/js/overpass.js b/application/assets/js/overpass.js index ac1518a4..38935539 100644 --- a/application/assets/js/overpass.js +++ b/application/assets/js/overpass.js @@ -1,6 +1,25 @@ const overpass = (() => { + function getRandomRgbColor(min, max) { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + function generateRandomColor() { + const minBrightness = 255; // Customize this threshold for darkness + + let r, g, b; + + do { + r = getRandomRgbColor(0, 255); + g = getRandomRgbColor(0, 255); + b = getRandomRgbColor(0, 255); + + // Check if the color is too light (adjust this condition based on your needs) + } while ((r + g + b) / 3 > minBrightness); + + return `rgb(${r}, ${g}, ${b})`; + } + function call(map, overpassQuery, icon) { - console.log(general.zoomlevel); //clear group before ad new items if (general.zoomlevel > 13) { helper.side_toaster( @@ -9,24 +28,34 @@ const overpass = (() => { ); return false; } - if (overpass_group != "") { - overpass_group.clearLayers(); - contained = []; + let public_transport = false; + let relation_query = "[" + overpassQuery + "]"; + let way_query = overpassQuery; + if (overpassQuery.indexOf("public_transport") > -1) { + relation_query = "['type'='route']['route'='bus']"; + way_query = "public_transport=platform"; + public_transport = true; } //remove layer - if (overpass_query == overpassQuery) { + if (general.active_layer.includes(overpassQuery)) { helper.side_toaster("layer removed", 2000); - overpass_group.clearLayers(); - contained = []; - overpass_query = ""; + overpass_group.eachLayer(function (layer) { + if (layer.tag === overpassQuery) { + console.log("try"); + overpass_group.removeLayer(layer._leaflet_id); + } + }); + + general.active_layer.splice( + general.active_layer.indexOf(overpassQuery), + 1 + ); return false; } - overpass_query = overpassQuery; - //boundingbox let e = map.getBounds().getEast(); let w = map.getBounds().getWest(); @@ -35,8 +64,8 @@ const overpass = (() => { var bounds = s + "," + w + "," + n + "," + e; var nodeQuery = "(node[" + overpassQuery + "](" + bounds + ");"; - var wayQuery = "way[" + overpassQuery + "](" + bounds + ");"; - var relationQuery = "relation[" + overpassQuery + "](" + bounds + ");)"; + var wayQuery = "way[" + way_query + "](" + bounds + ");"; + var relationQuery = "relation" + relation_query + "(" + bounds + ");)"; var query = "?data=[out:json][timeout:25];" + nodeQuery + @@ -46,22 +75,70 @@ const overpass = (() => { var baseUrl = "https://overpass-api.de/api/interpreter"; var resultUrl = baseUrl + query; + let segmentCoords = []; + let history = ""; fetch(resultUrl) .then((response) => response.json()) .then(function (data) { - console.log(data); let no_data = false; data.elements.forEach((element) => { - console.log(element); - if (element.type == "node") { + // console.log(element); + if (element.type == "node" && !public_transport) { no_data = true; let k = L.marker([element.lat, element.lon]) .addTo(overpass_group) .setIcon(maps[icon]); + + k.tag = overpassQuery; try { k.bindPopup(element.tags.name); } catch (e) {} } + + if (element.type == "way" && !public_transport) { + no_data = true; + } + + if (element.type == "relation" && public_transport) { + no_data = true; + 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.addTo(overpass_group); + segmentCoords = []; + } + + history = f.id; + } + } + }); + }); + } }); if (!no_data) { diff --git a/application/index.js b/application/index.js index b2eb22a2..45617204 100644 --- a/application/index.js +++ b/application/index.js @@ -3,8 +3,6 @@ let save_mode = ""; let scale; const debug = false; -let contained = []; //markers in viewport -let overpass_query = ""; //to toggle overpass layer //groups let markers_group = new L.FeatureGroup(); @@ -390,7 +388,7 @@ document.addEventListener("DOMContentLoaded", function () { .querySelector("div#overpass") .insertAdjacentHTML( "afterend", - '
public transport Layer
' + '
public transport Layer
' ); find_gpx(); @@ -454,8 +452,6 @@ document.addEventListener("DOMContentLoaded", function () { files = uniqueData; - console.log(uniqueData); - uniqueData.forEach((e) => { if (e.type == "gpx") { document.getElementById("gpx-title").style.display = "block"; @@ -885,7 +881,7 @@ document.addEventListener("DOMContentLoaded", function () { }; let open_finder = function () { - console.log(files); + console.log(overpass_group); settings.load_settings(); finder_tabindex(); document.querySelector("div#finder").style.display = "block"; @@ -1444,8 +1440,15 @@ document.addEventListener("DOMContentLoaded", function () { let item_attribution = document.activeElement.getAttribute("data-attribution"); let item_maxzoom = document.activeElement.getAttribute("data-maxzoom"); - - maps.addMap(item_url, item_attribution, item_maxzoom, item_type); + let marker = document.activeElement.getAttribute("data-marker"); + + maps.addMap( + item_url, + item_attribution, + item_maxzoom, + item_type, + marker + ); document.querySelector("div#finder").style.display = "none"; status.windowOpen = "map"; diff --git a/application/manifest.webapp b/application/manifest.webapp index cc7ddc12..51e957e5 100644 --- a/application/manifest.webapp +++ b/application/manifest.webapp @@ -1,5 +1,5 @@ { - "version": "1.9.775", + "version": "1.9.776", "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.", diff --git a/application/manifest.webmanifest b/application/manifest.webmanifest index f921784a..3e228f75 100644 --- a/application/manifest.webmanifest +++ b/application/manifest.webmanifest @@ -21,7 +21,7 @@ ], "b2g_features": { - "version": "2.0.85", + "version": "2.0.86", "id": "o.map", "core": true, "categories": ["utilities"], diff --git a/docs/assets/css/images/public-transport.png b/docs/assets/css/images/public-transport.png new file mode 100644 index 0000000000000000000000000000000000000000..950edf24677ded147df13b26f91baa2b0fa70513 GIT binary patch literal 1466 zcmV;r1x5OaP)P001cn1^@s6z>|W`000GnNklGNuHDcIX17Zdjl&3`L?0sTjIws<{((Dh&g-s0<@jYQyl?D*X^?%13;ml^gy> ziMrY_^1WI=(g@LMizu=zCoA>C`6|QEq1eV92k*7m>G65*&@&6)aC&e}G zI)pf-Za|N`DT&Cn1J|o`19mumxW~hiKiKyc-P`S@q)rdTo84@QI@;0yXrG%9uhI>A zG5QHb6s4=<6xy{1 z@NMxEkryp{LS44%z$3lP^cX!9+2-;CTt3wM4(k*#C{aiIiLuB>jJj;KPhPzIC00bL zU3a#;aJld94lCW=`4&aAy8M7PY=HQ>O%$YEP4c4UY#CRxfgbE~(|uiI=YS8q;O9y6 zmIkXzR`}p7ti|PrM3a}WMnR=3NVnWdAAR>b9X@)DKL6=YsvmH%?I24wdq?Gh54_;# z$?_LvgjEdspdQlft#4CQ z`2Zyvy?*)N1Ftw|{_hakhG9WjS?Az@I@+IZ8JbWewR!XUK4&6346+d#~gsE0SY(LX8&JfY>Aj)RxGy96nwhs2rv zzW6pTnMpFkDSkT*a*6Dx|u@ds6ISVn0@^RmIsKZ5Y;bazbc;tTSq(kg(=481ODrPyNB6n z-$+U}(w$m6U6H$w17Bw+wDaFIe~GvNMYvnw31MpY0eQKT9l>SU``8k7w4)z!GZKMI z#_cEKq7k~i%nlK@6c-K?+R;B#5$?T#YpKD`t_4bAs^#E+@5QW$@OX3*`;(#{U^d-vY)&xEE>n5lYl&T?Am { html: '
', }); - const climbing_icon = L.divIcon({ + const default_overpass_icon = L.divIcon({ iconSize: [40, 40], iconAnchor: [30, 40], className: "climbing-marker", @@ -65,6 +65,13 @@ const maps = (() => { className: "end-marker", }); + const public_transport = L.divIcon({ + iconSize: [40, 40], + iconAnchor: [30, 40], + className: "climbing-marker", + html: '
', + }); + //caching settings from settings panel let caching_time = ""; @@ -211,7 +218,8 @@ const maps = (() => { let overlayer = ""; - let addMap = function (url, attribution, max_zoom, type) { + 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; //remove layer @@ -301,6 +309,9 @@ const maps = (() => { if (map.hasLayer(overlayer)) { general.active_layer.splice(general.active_layer.indexOf(url), 1); map.removeLayer(overlayer); + document.activeElement.classList.remove("active-layer"); + document.activeElement.style.background = "black"; + document.activeElement.style.color = "white"; return false; } general.active_layer.push(url); @@ -313,6 +324,9 @@ const maps = (() => { if (map.hasLayer(overlayer)) { general.active_layer.splice(general.active_layer.indexOf(url), 1); map.removeLayer(overlayer); + document.activeElement.classList.remove("active-layer"); + document.activeElement.style.background = "black"; + document.activeElement.style.color = "white"; return false; } else { general.active_layer.push(url); @@ -324,11 +338,23 @@ const maps = (() => { //overpass if (type == "overpass") { - if (overpass_query == url) { - overpass.call(map, url, "climbing_icon"); + //reset + + if (marker == "" || marker == null) marker = "default_overpass_icon"; + if (general.active_layer.includes(url)) { + //remove + overpass.call(map, url, marker); general.active_layer.splice(general.active_layer.indexOf(url), 1); + document.activeElement.classList.remove("active-layer"); + document.activeElement.style.background = "black"; + document.activeElement.style.color = "white"; } else { - overpass.call(map, url, "climbing_icon"); + overpass.call(map, url, marker); + general.active_layer.push(url); + + document.activeElement.classList.add("active-layer"); + document.activeElement.style.background = "white"; + document.activeElement.style.color = "black"; } } }; @@ -552,8 +578,9 @@ const maps = (() => { return { follow_icon, default_icon, + default_overpass_icon, goal_icon, - climbing_icon, + public_transport, water_icon, select_icon, tracking_icon, diff --git a/docs/assets/js/module.js b/docs/assets/js/module.js index 762ae2ca..de4afa27 100644 --- a/docs/assets/js/module.js +++ b/docs/assets/js/module.js @@ -409,10 +409,13 @@ const module = (() => { status.marker_selection = true; status.windowOpen = "marker"; - console.log(markers_collection, index); - + let f = markers_collection[index]; + let m = f._latlng; + console.log(f); if (index >= markers_collection.length) index = 0; - map.setView(markers_collection[index]._latlng, map.getZoom()); + setTimeout(() => { + map.setView([m.lat, m.lng], map.getZoom()); + }, 800); status.selected_marker = markers_collection[index]; helper.bottom_bar("cancel", "option", ""); @@ -426,7 +429,7 @@ const module = (() => { p.options.className != "start-marker" && p.options.className != "end-marker" ) { - markers_collection[t].setIcon(maps.default_icon); + // markers_collection[t].setIcon(maps.default_icon); } markers_collection[index].closePopup(); } @@ -440,7 +443,7 @@ const module = (() => { p.options.className != "start-marker" && p.options.className != "end-marker" ) { - markers_collection[index].setIcon(maps.select_icon); + // markers_collection[index].setIcon(maps.select_icon); } //popup @@ -451,9 +454,12 @@ const module = (() => { //get popup content document.querySelector("input#popup").value = pu._content; //show popup - markers_collection[index] - .bindPopup(pu._content, popup_option) - .openPopup(); + + setTimeout(function () { + markers_collection[index] + .bindPopup(pu._content, popup_option) + .openPopup(); + }, 1000); //close popup setTimeout(function () { markers_collection[index].closePopup(); diff --git a/docs/assets/js/overpass.js b/docs/assets/js/overpass.js index f797b7a4..85c8116b 100644 --- a/docs/assets/js/overpass.js +++ b/docs/assets/js/overpass.js @@ -1,6 +1,25 @@ const overpass = (() => { + function getRandomRgbColor(min, max) { + return Math.floor(Math.random() * (max - min + 1) + min); + } + + function generateRandomColor() { + const minBrightness = 255; // Customize this threshold for darkness + + let r, g, b; + + do { + r = getRandomRgbColor(0, 255); + g = getRandomRgbColor(0, 255); + b = getRandomRgbColor(0, 255); + + // Check if the color is too light (adjust this condition based on your needs) + } while ((r + g + b) / 3 > minBrightness); + + return `rgb(${r}, ${g}, ${b})`; + } + function call(map, overpassQuery, icon) { - console.log(general.zoomlevel); //clear group before ad new items if (general.zoomlevel > 13) { helper.side_toaster( @@ -9,24 +28,34 @@ const overpass = (() => { ); return false; } - if (overpass_group != "") { - overpass_group.clearLayers(); - contained = []; + let public_transport = false; + let relation_query = "[" + overpassQuery + "]"; + let way_query = overpassQuery; + if (overpassQuery.indexOf("public_transport") > -1) { + relation_query = "['type'='route']['route'='bus']"; + way_query = "public_transport=platform"; + public_transport = true; } //remove layer - if (overpass_query == overpassQuery) { + if (general.active_layer.includes(overpassQuery)) { helper.side_toaster("layer removed", 2000); - overpass_group.clearLayers(); - contained = []; - overpass_query = ""; + overpass_group.eachLayer(function (layer) { + if (layer.tag === overpassQuery) { + console.log("try"); + overpass_group.removeLayer(layer._leaflet_id); + } + }); + + general.active_layer.splice( + general.active_layer.indexOf(overpassQuery), + 1 + ); return false; } - overpass_query = overpassQuery; - //boundingbox let e = map.getBounds().getEast(); let w = map.getBounds().getWest(); @@ -35,8 +64,8 @@ const overpass = (() => { var bounds = s + "," + w + "," + n + "," + e; var nodeQuery = "(node[" + overpassQuery + "](" + bounds + ");"; - var wayQuery = "way[" + overpassQuery + "](" + bounds + ");"; - var relationQuery = "relation[" + overpassQuery + "](" + bounds + ");)"; + var wayQuery = "way[" + way_query + "](" + bounds + ");"; + var relationQuery = "relation" + relation_query + "(" + bounds + ");)"; var query = "?data=[out:json][timeout:25];" + nodeQuery + @@ -46,20 +75,69 @@ const overpass = (() => { var baseUrl = "https://overpass-api.de/api/interpreter"; var resultUrl = baseUrl + query; + let segmentCoords = []; + let history = ""; fetch(resultUrl) .then((response) => response.json()) .then(function (data) { let no_data = false; data.elements.forEach((element) => { - if (element.type == "node") { + // console.log(element); + if (element.type == "node" && !public_transport) { no_data = true; let k = L.marker([element.lat, element.lon]) .addTo(overpass_group) .setIcon(maps[icon]); + + k.tag = overpassQuery; try { k.bindPopup(element.tags.name); } catch (e) {} } + + if (element.type == "way" && !public_transport) { + no_data = true; + } + + if (element.type == "relation" && public_transport) { + no_data = true; + 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); + let k = L.marker([m.lat, m.lon]) + .addTo(overpass_group) + .setIcon(maps[icon]); + + k.tag = overpassQuery; + 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.addTo(overpass_group); + segmentCoords = []; + } + + history = f.id; + + try { + k.bindPopup(element.tags.name); + } catch (e) {} + } + } + }); + }); + } }); if (!no_data) { diff --git a/docs/index.html b/docs/index.html index 49472435..8e98cabc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -128,7 +128,7 @@

Routing

- +
diff --git a/docs/index.js b/docs/index.js index 8c87eda8..45617204 100644 --- a/docs/index.js +++ b/docs/index.js @@ -3,8 +3,6 @@ let save_mode = ""; let scale; const debug = false; -let contained = []; //markers in viewport -let overpass_query = ""; //to toggle overpass layer //groups let markers_group = new L.FeatureGroup(); @@ -386,6 +384,13 @@ document.addEventListener("DOMContentLoaded", function () { '
Drinking water Layer
' ); + document + .querySelector("div#overpass") + .insertAdjacentHTML( + "afterend", + '
public transport Layer
' + ); + find_gpx(); find_geojson(); load_maps(); @@ -447,8 +452,6 @@ document.addEventListener("DOMContentLoaded", function () { files = uniqueData; - console.log(uniqueData); - uniqueData.forEach((e) => { if (e.type == "gpx") { document.getElementById("gpx-title").style.display = "block"; @@ -878,7 +881,7 @@ document.addEventListener("DOMContentLoaded", function () { }; let open_finder = function () { - console.log(files); + console.log(overpass_group); settings.load_settings(); finder_tabindex(); document.querySelector("div#finder").style.display = "block"; @@ -1437,8 +1440,15 @@ document.addEventListener("DOMContentLoaded", function () { let item_attribution = document.activeElement.getAttribute("data-attribution"); let item_maxzoom = document.activeElement.getAttribute("data-maxzoom"); - - maps.addMap(item_url, item_attribution, item_maxzoom, item_type); + let marker = document.activeElement.getAttribute("data-marker"); + + maps.addMap( + item_url, + item_attribution, + item_maxzoom, + item_type, + marker + ); document.querySelector("div#finder").style.display = "none"; status.windowOpen = "map"; @@ -1847,6 +1857,10 @@ document.addEventListener("DOMContentLoaded", function () { if (!routing.loaded) { finder_panels = finder_panels.filter((e) => e.id != "routing"); } + + if (files.length == 0) { + finder_panels = finder_panels.filter((e) => e.id != "files"); + } tabIndex = 0; panels.forEach(function (e) { diff --git a/docs/manifest.webapp b/docs/manifest.webapp index 741283b3..51e957e5 100644 --- a/docs/manifest.webapp +++ b/docs/manifest.webapp @@ -1,5 +1,5 @@ { - "version": "1.9.774", + "version": "1.9.776", "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.", diff --git a/docs/manifest.webmanifest b/docs/manifest.webmanifest index 1bb6b135..3e228f75 100644 --- a/docs/manifest.webmanifest +++ b/docs/manifest.webmanifest @@ -21,7 +21,7 @@ ], "b2g_features": { - "version": "2.0.84", + "version": "2.0.86", "id": "o.map", "core": true, "categories": ["utilities"],