From 38798929d78316027cddd039bf8fb0a4b7327395 Mon Sep 17 00:00:00 2001 From: Edward Betts Date: Tue, 11 May 2021 10:05:56 +0200 Subject: [PATCH] Include mouse move events --- static/js/map.js | 70 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 55 insertions(+), 15 deletions(-) diff --git a/static/js/map.js b/static/js/map.js index a75f43c..b621188 100644 --- a/static/js/map.js +++ b/static/js/map.js @@ -150,10 +150,12 @@ function update_wikidata(check_for_missing = true) { item.markers.forEach((marker_data) => { marker_data.marker.setIcon(greenMarker); + if (!items[qid].lines) items[qid].lines = []; osm_list.forEach((osm) => { var path = [osm.centroid, marker_data]; var polyline = L.polyline(path, { color: "green" }); add_to_feature_group(qid, polyline); + items[qid].lines.push(polyline); }); }); } @@ -166,11 +168,6 @@ function update_wikidata(check_for_missing = true) { } var isa_count_values = Object.values(isa_count); - isa_count_values.sort((a, b) => { - b.count - a.count; - }); - console.log(isa_count_values); - set_isa_list(isa_count_values); load_complete(); } @@ -220,11 +217,13 @@ function checkbox_change() { } } -function set_isa_list(isa_count) { +function set_isa_list(isa_count_list) { + isa_count_list.sort((a, b) => b.count - a.count); + isa_card.classList.remove("visually-hidden"); var isa_list = document.getElementById("isa-list"); isa_list.innerHTML = ""; - isa_count.forEach((isa) => { + isa_count_list.forEach((isa) => { var isa_id = `isa-${isa.qid}`; var e = document.createElement("div"); e.setAttribute("class", "isa-item"); @@ -260,13 +259,9 @@ function set_isa_list(isa_count) { }); } -function add_wikidata_marker(item, marker_data) { - var icon = blueMarker; - var qid = item.qid; - var label = `${item.label} (${item.qid})`; - var marker = L.marker(marker_data, { icon: icon }); - // var tooltip = marker.bindTooltip(item.qid, {permanent: true, direction: 'bottom', opacity: 0.5}); +function item_popup(item) { var wd_url = "https://www.wikidata.org/wiki/" + item.qid; + var popup = "

Wikidata item
"; popup += `${item.label} (${item.qid})`; if (item.description) { @@ -287,7 +282,50 @@ function add_wikidata_marker(item, marker_data) { popup += `
street address: ${item.street_address[0]["text"]}`; } popup += "

"; + + return popup; +} + +function mouseover(item) { + if (item.outline) { + item.outline.setStyle({ fillOpacity: 0.2, weight: 6 }); + } + if (item.lines) { + item.lines.forEach((line) => { line.setStyle({ weight: 6}); }); + } + +}; + +function mouseout(item) { + if (item.outline) { + item.outline.setStyle({ fillOpacity: 0, weight: 3 }); + } + if (item.lines) { + item.lines.forEach((line) => { line.setStyle({ weight: 3}); }); + } +}; + +function mouse_events(marker, qid) { + items[qid] ||= {}; + var item = items[qid]; + marker.on("mouseover", function() { mouseover(item); }); + marker.on("mouseout", function() { mouseout(item); }); + + item.markers ||= []; + item.markers.push(marker); +} + +function add_wikidata_marker(item, marker_data) { + var icon = blueMarker; + var qid = item.qid; + var label = `${item.label} (${item.qid})`; + 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); + var group = add_to_feature_group(item.qid, marker); group.addTo(map); marker_data.marker = marker; @@ -304,6 +342,7 @@ function process_wikidata_items(load_items) { if (items[qid] === undefined) items[qid] = {}; items[qid].isa_list = item.isa_list; + }); } @@ -328,8 +367,6 @@ function load_wikidata_items() { isa_labels[isa.qid] = isa.label; }); - // set_isa_list(response.data.isa_count); - process_wikidata_items(response.data.items); wikidata_loaded = true; @@ -356,6 +393,8 @@ function load_wikidata_items() { Wikidata tag: ${qid}

`; marker.bindPopup(popup); + mouse_events(marker, qid); + var group = add_to_feature_group(qid, marker); group.addTo(map); @@ -364,6 +403,7 @@ function load_wikidata_items() { var geojson = L.geoJSON(null, { style: mapStyle }); geojson.addData(osm.geojson); add_to_feature_group(qid, geojson); + items[qid].outline = geojson; } });