edward/owl-map
1
1
Fork 1
Code Issues 11 Pull requests 1 Packages Projects Releases Wiki Activity

Highlight markers on hover and selection

Browse source
This commit is contained in:
Edward Betts 2021-05-12 12:52:07 +02:00
parent 96319f8662
commit 03f2eb6d46
1 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
static/js/map.js
View file

@ -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;