forked from edward/owl-map
Highlight markers on hover and selection
This commit is contained in:
parent
96319f8662
commit
03f2eb6d46
|
@ -26,6 +26,8 @@ var isa_labels = {};
|
||||||
var items_url = "/api/1/items";
|
var items_url = "/api/1/items";
|
||||||
var osm_objects_url = "/api/1/osm";
|
var osm_objects_url = "/api/1/osm";
|
||||||
var missing_url = "/api/1/missing";
|
var missing_url = "/api/1/missing";
|
||||||
|
var hover_circles = [];
|
||||||
|
var selected_circles = [];
|
||||||
|
|
||||||
var isa_count = {};
|
var isa_count = {};
|
||||||
|
|
||||||
|
@ -305,6 +307,12 @@ function mouseover(item) {
|
||||||
line.setStyle({ weight: 6 });
|
line.setStyle({ weight: 6 });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
item.markers.forEach((marker) => {
|
||||||
|
var coords = marker.getLatLng();
|
||||||
|
var circle = L.circle(coords, {radius: 25}).addTo(map);
|
||||||
|
hover_circles.push(circle);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseout(item) {
|
function mouseout(item) {
|
||||||
|
@ -316,6 +324,18 @@ function mouseout(item) {
|
||||||
line.setStyle({ weight: 3 });
|
line.setStyle({ weight: 3 });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hover_circles.forEach((circle) => {
|
||||||
|
circle.removeFrom(map);
|
||||||
|
});
|
||||||
|
hover_circles = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function close_item_details() {
|
||||||
|
selected_circles.forEach((circle) => {
|
||||||
|
circle.removeFrom(map);
|
||||||
|
});
|
||||||
|
selected_circles = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouse_events(marker, qid) {
|
function mouse_events(marker, qid) {
|
||||||
|
@ -331,6 +351,13 @@ function mouse_events(marker, qid) {
|
||||||
isa_card.classList.add("visually-hidden");
|
isa_card.classList.add("visually-hidden");
|
||||||
detail_card.classList.remove("visually-hidden");
|
detail_card.classList.remove("visually-hidden");
|
||||||
detail_card.classList.add("bg-highlight");
|
detail_card.classList.add("bg-highlight");
|
||||||
|
close_item_details();
|
||||||
|
|
||||||
|
item.markers.forEach((marker) => {
|
||||||
|
var coords = marker.getLatLng();
|
||||||
|
var circle = L.circle(coords, {radius: 25, color: "orange"}).addTo(map);
|
||||||
|
selected_circles.push(circle);
|
||||||
|
});
|
||||||
|
|
||||||
window.setTimeout(function() {
|
window.setTimeout(function() {
|
||||||
detail_card.classList.remove("bg-highlight");
|
detail_card.classList.remove("bg-highlight");
|
||||||
|
@ -353,15 +380,12 @@ function add_wikidata_marker(item, marker_data) {
|
||||||
var qid = item.qid;
|
var qid = item.qid;
|
||||||
var label = `${item.label} (${item.qid})`;
|
var label = `${item.label} (${item.qid})`;
|
||||||
var marker = L.marker(marker_data, { icon: icon });
|
var marker = L.marker(marker_data, { icon: icon });
|
||||||
// var tooltip = marker.bindTooltip(item.qid, {permanent: true, direction: 'bottom', opacity: 0.5});
|
|
||||||
|
|
||||||
// var popup = item_popup(item);
|
|
||||||
// marker.bindPopup(popup);
|
|
||||||
mouse_events(marker, qid);
|
mouse_events(marker, qid);
|
||||||
|
|
||||||
var group = add_to_feature_group(item.qid, marker);
|
var group = add_to_feature_group(item.qid, marker);
|
||||||
group.addTo(map);
|
group.addTo(map);
|
||||||
items[qid].wikidata = item;
|
items[qid].wikidata = item;
|
||||||
|
|
||||||
marker_data.marker = marker;
|
marker_data.marker = marker;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -386,6 +410,7 @@ function load_wikidata_items() {
|
||||||
|
|
||||||
checkbox_change();
|
checkbox_change();
|
||||||
|
|
||||||
|
close_item_details();
|
||||||
detail_card.classList.add("visually-hidden");
|
detail_card.classList.add("visually-hidden");
|
||||||
loading.classList.remove("visually-hidden");
|
loading.classList.remove("visually-hidden");
|
||||||
load_text.classList.add("visually-hidden");
|
load_text.classList.add("visually-hidden");
|
||||||
|
@ -430,6 +455,8 @@ function load_wikidata_items() {
|
||||||
|
|
||||||
var group = add_to_feature_group(qid, marker);
|
var group = add_to_feature_group(qid, marker);
|
||||||
group.addTo(map);
|
group.addTo(map);
|
||||||
|
items[qid].markers ||= [];
|
||||||
|
items[qid].markers.push(marker);
|
||||||
|
|
||||||
if (osm.type != "node" && osm.geojson) {
|
if (osm.type != "node" && osm.geojson) {
|
||||||
var mapStyle = { fillOpacity: 0 };
|
var mapStyle = { fillOpacity: 0 };
|
||||||
|
@ -473,6 +500,8 @@ document.getElementById("search-form").onsubmit = function (e) {
|
||||||
function close_detail() {
|
function close_detail() {
|
||||||
isa_card.classList.remove("visually-hidden");
|
isa_card.classList.remove("visually-hidden");
|
||||||
detail_card.classList.add("visually-hidden");
|
detail_card.classList.add("visually-hidden");
|
||||||
|
|
||||||
|
close_item_details();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("load-btn").onclick = load_wikidata_items;
|
document.getElementById("load-btn").onclick = load_wikidata_items;
|
||||||
|
|
Loading…
Reference in a new issue