Skip to content

Commit

Permalink
select polyline
Browse files Browse the repository at this point in the history
  • Loading branch information
@strukturart
strukturart committed Jan 9, 2024
1 parent 6a03cc4 commit 4712f7f
Show file tree
Hide file tree
Showing 16 changed files with 441 additions and 145 deletions.
46 changes: 46 additions & 0 deletions application/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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////////////////*/

Expand Down
2 changes: 1 addition & 1 deletion application/assets/js/maps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
37 changes: 31 additions & 6 deletions application/assets/js/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -463,16 +470,34 @@ 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]);
hh.getLatLngs().forEach((e) => {
L.marker(e)
.addTo(selected_polyline_markers_group)
.setIcon(maps.public_transport);
});
} catch (e) {}

return polyline_collection[index];
};
Expand Down
197 changes: 129 additions & 68 deletions application/assets/js/overpass.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,7 @@ const overpass = (() => {

function call(map, overpassQuery, icon) {
//clear group before ad new items
if (general.zoomlevel > 13) {
helper.side_toaster(
"Please zoom, otherwise too much data will be loaded",
2000
);
return false;
}

let public_transport = false;
let relation_query = "[" + overpassQuery + "]";
let way_query = overpassQuery;
Expand Down Expand Up @@ -77,80 +71,147 @@ const overpass = (() => {

let segmentCoords = [];
let history = "";
fetch(resultUrl)
.then((response) => response.json())
.then(function (data) {
let no_data = false;
data.elements.forEach((element) => {
// 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) {}
}
function fetchDataWithXHR(resultUrl, callback, errorCallback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", resultUrl, true);
xhr.responseType = "json";

var timeoutId; // Variable to store the timeout ID

// Set up a function to handle the timeout event
// Set up a one-time timeout using setTimeout
timeoutId = setTimeout(function () {
xhr.abort();
document.querySelector(".loading-spinner").style.display = "none";
helper.side_toaster("Too much data, loading was aborted", 6000);
}, 20000); // Set the timeout duration in milliseconds

xhr.onload = function () {
if (xhr.status === 200) {
callback(xhr.response);
clearInterval(timeoutId); // Clear the interval if the request is successful
} else {
errorCallback(
new Error(`Failed to fetch: ${xhr.status} ${xhr.statusText}`)
);
}
};

if (element.type == "way" && !public_transport) {
no_data = true;
}
xhr.onprogress = function (event) {
document.querySelector(".loading-spinner").style.display = "block";

if (event.lengthComputable) {
// If total size is known, you can calculate the progress percentage
var progress = (event.loaded / event.total) * 100;
console.log(`Download Progress: ${progress}% (${event.loaded})`);
} else {
// If total size is not known, just track the downloaded size
downloadedSize = event.loaded / (1024 * 1024); // Convert bytes to megabytes
console.log(`Downloaded Size: ${downloadedSize} megabytes`);
}
};

xhr.onerror = function () {
errorCallback(new Error("Network error occurred"));
document.querySelector(".loading-spinner").style.display = "none";
clearTimeout(timeoutId); // Clear the timeout if there is an error
};

xhr.send();
}

fetchDataWithXHR(
resultUrl,
function (data) {
if (data.elements.length === 0) {
helper.side_toaster("no data", 4000);
document.querySelector(".loading-spinner").style.display = "none";
document.activeElement.classList.remove("");
return false;
}

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, {
if (data.elements.length > 80000) {
helper.side_toaster(
"There is too much data to process, please use a different zoom level",
6000
);
document.querySelector(".loading-spinner").style.display = "none";
} else {
for (let i = 0; i < data.elements.length; i++) {
const element = data.elements[i];

// Your existing logic here
if (element.type === "node" && !public_transport) {
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) {
// Your logic for ways
}

if (element.type === "relation" && public_transport) {
let f = element;

element.members.forEach((e) => {
let m = data.elements.find((m) => m.id === e.ref);

let hh = "";
try {
hh = m.tags.name;
} catch (e) {}

if (m && m.type === "way") {
}

if (m && m.type === "node") {
//todo add tags.name as popoup
segmentCoords.push({
latlng: [m.lat, m.lon],
popup: hh,
});

if (f.id !== history) {
segmentCoords.pop();
let h = L.polyline(
segmentCoords.map((coord) => coord.latlng),
{
color: generateRandomColor(),
});
}
);

h.tag = overpassQuery;
h.name = "test";
var popup = L.popup({
maxWidth: "80%",
});

h.addTo(overpass_group);
segmentCoords = [];
}
popup.setContent(f.tags.name);

history = f.id;
h.bindPopup(popup);
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);
document.querySelector(".loading-spinner").style.display = "none";
}
})
.catch(function (err) {
},
function (err) {
helper.side_toaster("something went wrong, try again" + err, 6000);
});
}
);
}

return {
Expand Down
23 changes: 22 additions & 1 deletion application/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -658,6 +665,13 @@ <h2>Instructions</h2>
</div>
</div>

<div class="item" data-map="search">
<div class="flex justify-content-spacebetween">
<div>during tracking,<br> upload /5 min to osm aacount</div>
<div>longpress 1</div>
</div>
</div>

<div class="item" data-map="search">
<div class="flex justify-content-spacebetween">
<div>during tracking,<br> larger view of the parameters</div>
Expand Down Expand Up @@ -727,6 +741,13 @@ <h2>Instructions</h2>
</div>
</div>

<div class="item" data-map="share">
<div class="flex justify-content-spacebetween">
<div>jump between linies</div>
<div>0</div>
</div>
</div>

<div class="item" data-map="null">
<div class="flex justify-content-spacebetween">
<div>keylock</div>
Expand All @@ -751,7 +772,7 @@ <h2>Instructions</h2>
<div class="item" data-map="share">
<div class="flex justify-content-spacebetween">
<div>share your position</div>
<div>0</div>
<div>3</div>
</div>
</div>

Expand Down
Loading

0 comments on commit 4712f7f

Please sign in to comment.