Skip to content

Commit

Permalink
select icons the better way ?
Browse files Browse the repository at this point in the history
  • Loading branch information
@strukturart
strukturart committed Jan 7, 2024
1 parent f8b0537 commit 71da770
Show file tree
Hide file tree
Showing 17 changed files with 346 additions and 120 deletions.
Binary file added application/assets/css/images/public-transport.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions application/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,17 @@ img.marker-1 {
left: 23px;
}

.public_transport {
width: 10px;
height: 10px;
background-color: #867772;
border-radius: 50%;
position: absolute;
top: 23px;
left: 23px;
border: 2px solid black;
}

.climbing {
width: 15px;
height: 15px;
Expand Down
39 changes: 33 additions & 6 deletions application/assets/js/maps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const maps = (() => {
html: '<div class="ringring"></div><div class="goal"></div>',
});

const climbing_icon = L.divIcon({
const default_overpass_icon = L.divIcon({
iconSize: [40, 40],
iconAnchor: [30, 40],
className: "climbing-marker",
Expand Down Expand Up @@ -65,6 +65,13 @@ const maps = (() => {
className: "end-marker",
});

const public_transport = L.divIcon({
iconSize: [20, 20],
iconAnchor: [30, 40],
className: "climbing-marker",
html: '<div></div><div class="public_transport"></div>',
});

//caching settings from settings panel
let caching_time = "";

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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";
}
}
};
Expand Down Expand Up @@ -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,
Expand Down
70 changes: 23 additions & 47 deletions application/assets/js/module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
Expand All @@ -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];
};
Expand Down
107 changes: 92 additions & 15 deletions application/assets/js/overpass.js
View file
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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();
Expand All @@ -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 +
Expand All @@ -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) {
Expand Down
Loading

0 comments on commit 71da770

Please sign in to comment.