edward
/
owl-map
1
1
Fork 1
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

Save and load curret item with URL

This commit is contained in:
Edward Betts 2021-05-14 21:51:22 +02:00
parent 809b92b656
commit 89c45883ad
2 changed files with 140 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
static/js/map.js
View File

@ -8,7 +8,6 @@ if (start_lat || start_lng) {
center: [start_lat, start_lng],
zoom: zoom,
};
history.replaceState(null, null, `/map/${zoom}/${start_lat}/${start_lng}`);
}
var map = L.map("map", options);
@ -22,7 +21,6 @@ var load_text = document.getElementById("load-text");
var isa_card = document.getElementById("isa-card");
var detail_card = document.getElementById("detail-card");
var detail = document.getElementById("detail");
var detail_image = document.getElementById("detail-image");
var detail_header = document.getElementById("detail-header");
var search_and_isa = document.getElementById("search-and-isa");
var detail_qid;
@ -41,13 +39,29 @@ var isa_count = {};
map.zoomControl.setPosition("topright");
map.on("moveend", function (e) {
function build_map_path() {
var zoom = map.getZoom();
var c = map.getCenter();
var lat = c.lat.toFixed(5);
var lng = c.lng.toFixed(5);
history.replaceState(null, null, `/map/${zoom}/${lat}/${lng}`);
});
var path = `/map/${zoom}/${lat}/${lng}`;
if (detail_qid !== undefined) {
path += `?item=${detail_qid}`;
}
return path;
}
function update_map_path() {
history.replaceState(null, null, build_map_path());
}
function qid_from_url() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
return urlParams.get("item") || undefined;
}
map.on("moveend", update_map_path);
var blueMarker = L.ExtraMarkers.icon({
icon: "fa-wikidata",
@ -101,6 +115,9 @@ function load_complete() {
loading.classList.add("d-none");
load_text.classList.remove("d-none");
detail_card.classList.add("d-none");
if(detail_qid) {
open_detail(detail_qid);
}
}
function add_to_feature_group(qid, thing) {
@ -272,6 +289,7 @@ function set_isa_list(isa_count_list) {
function build_item_detail(item, tag_or_key_list) {
var wd_url = "https://www.wikidata.org/wiki/" + item.qid;
var popup = '<div class="row"><div class="col">'
var has_image = item.image_list && item.image_list.length;
popup += "<strong>Wikidata item</strong><br>";
popup += `<a href="${wd_url}" target="_blank">${item.label}</a> (${item.qid})`;
@ -291,15 +309,25 @@ function build_item_detail(item, tag_or_key_list) {
popup += `<br>${item.street_address[0]}`;
}
popup += '</div><div class="col">'
if (tag_or_key_list && tag_or_key_list.length) {
popup += "<br><strong>OSM tags/keys to search for</strong>";
if (!has_image) {
popup += '</div><div class="col">'
} else {
popup += "<br>"
}
popup += "<strong>OSM tags/keys to search for</strong>";
for (const v of tag_or_key_list) {
popup += `<br>${v}`;
}
}
if (has_image) {
popup += '</div><div class="col">'
popup += `<img class="w-100" src="/commons/${item.image_list[0]}">`;
}
popup += "</div></div>";
return popup;
@ -347,10 +375,7 @@ function close_item_details() {
detail_header.innerHTML = "";
detail.innerHTML = "";
candidates.innerHTML = "";
detail_qid = undefined;
detail_image.setAttribute("src", "");
detail_image.classList.add("d-none");
update_map_path();
if (candidate_outline) {
candidate_outline.removeFrom(map);
@ -371,6 +396,99 @@ function show_outline(osm) {
candidate_outline = geojson;
}
function open_detail(qid) {
var item = items[qid];
if (item.wikidata === undefined) {
console.log("not found:", qid);
return;
}
search_and_isa.classList.add("d-none");
detail_card.classList.remove("d-none");
detail_card.classList.add("bg-highlight");
close_item_details();
detail_qid = qid;
item.markers.forEach((marker) => {
var coords = marker.getLatLng();
var circle = L.circle(coords, { radius: 20, color: "orange" }).addTo(map);
selected_circles.push(circle);
});
window.setTimeout(function () {
detail_card.classList.remove("bg-highlight");
}, 1000);
update_map_path();
var item_label = `${item.wikidata.label} (${item.wikidata.qid})`;
detail_header.innerHTML = "";
detail_header.append(document.createTextNode(item_label));
var item_tags_url = `/api/1/item/${qid}/tags`;
axios.get(item_tags_url).then((response) => {
var tag_or_key_list = response.data.tag_or_key_list;
if (response.data.qid != detail_qid) {
tag_or_key_list = []; // different QID
}
var item_detail = build_item_detail(item.wikidata, tag_or_key_list);
detail.innerHTML = item_detail;
if (tag_or_key_list.length == 0) return;
var item_osm_candidates_url = `/api/1/item/${qid}/candidates`;
var bounds = map.getBounds();
var params = { bounds: bounds.toBBoxString() };
axios
.get(item_osm_candidates_url, { params: params })
.then((response) => {
if (response.data.qid != detail_qid) return; // different QID
var nearby = response.data.nearby;
if (!nearby.length) return;
var osm_html = "<strong>Possible OSM matches</strong><br>";
osm_html += '<table class="table table-sm table-hover">'
osm_html += '<tbody>'
for (const osm of nearby) {
var candidate_id = osm.identifier.replace("/", "_");
osm_html += `<tr class="osm-candidate" id="${candidate_id}"><td class="text-end text-nowrap">${osm.distance.toFixed(0)}m `;
osm_html += `<a href="https://www.openstreetmap.org/${osm.identifier}" target="_blank">`;
osm_html += '<i class="fa fa-map-o"></i></a>';
osm_html += "</td><td>";
nearby_lookup[candidate_id] = osm;
if (osm.name) {
osm_html += osm.name + " ";
}
if (!osm.presets.length && !osm.name) {
osm_html += "no name ";
}
osm_html += osm.presets.map(function(p) {
var wiki_url = `http://wiki.openstreetmap.org/wiki/${p.tag_or_key}`;
return `<a href="${wiki_url}" class="osm-wiki-link" target="_blank">${p.name} <i class="fa fa-external-link"></i></a>`;
}).join(", ");
if (osm.address_list && osm.address_list.length) {
if (osm.address_list.length == 1) {
osm_html += "<br>address node: " + osm.address_list[0];
} else {
osm_html += "<br>address nodes: " + osm.address_list.join("; ")
}
}
osm_html += "</td></tr>";
}
osm_html += "</tbody></table>"
candidates.innerHTML = osm_html;
var span_list = document.getElementsByClassName("osm-candidate");
for (const osm_span of span_list) {
osm_span.onmouseenter = function (e) {
show_outline(nearby_lookup[e.target.id]);
};
}
});
});
}
function mouse_events(marker, qid) {
items[qid] ||= {};
var item = items[qid];
@ -381,103 +499,8 @@ function mouse_events(marker, qid) {
mouseout(item);
});
marker.on("click", function () {
var wd_item = items[qid].wikidata;
if (wd_item === undefined) {
console.log("not found:", qid);
return;
}
search_and_isa.classList.add("d-none");
detail_card.classList.remove("d-none");
detail_card.classList.add("bg-highlight");
close_item_details();
item.markers.forEach((marker) => {
var coords = marker.getLatLng();
var circle = L.circle(coords, { radius: 20, color: "orange" }).addTo(map);
selected_circles.push(circle);
});
window.setTimeout(function () {
detail_card.classList.remove("bg-highlight");
}, 1000);
detail_qid = qid;
if (wd_item.image_list && wd_item.image_list.length) {
detail_image.setAttribute("src", `/commons/${wd_item.image_list[0]}`);
detail_image.classList.remove("d-none");
} else {
detail_image.setAttribute("src", "");
detail_image.classList.add("d-none");
}
var item_label = `${wd_item.label} (${wd_item.qid})`;
detail_header.innerHTML = "";
detail_header.append(document.createTextNode(item_label));
var item_tags_url = `/api/1/item/${qid}/tags`;
axios.get(item_tags_url).then((response) => {
var tag_or_key_list = response.data.tag_or_key_list;
if (response.data.qid != detail_qid) {
tag_or_key_list = []; // different QID
}
var item_detail = build_item_detail(wd_item, tag_or_key_list);
detail.innerHTML = item_detail;
if (tag_or_key_list.length == 0) return;
var item_osm_candidates_url = `/api/1/item/${qid}/candidates`;
var bounds = map.getBounds();
var params = { bounds: bounds.toBBoxString() };
axios
.get(item_osm_candidates_url, { params: params })
.then((response) => {
if (response.data.qid != detail_qid) return; // different QID
var nearby = response.data.nearby;
if (!nearby.length) return;
var osm_html = "<strong>Possible OSM matches</strong><br>";
osm_html += '<table class="table table-sm table-hover">'
osm_html += '<tbody>'
for (const osm of nearby) {
var candidate_id = osm.identifier.replace("/", "_");
osm_html += `<tr class="osm-candidate" id="${candidate_id}"><td class="text-end text-nowrap">${osm.distance.toFixed(0)}m `;
osm_html += `<a href="https://www.openstreetmap.org/${osm.identifier}" target="_blank">`;
osm_html += '<i class="fa fa-map-o"></i></a>';
osm_html += "</td><td>";
nearby_lookup[candidate_id] = osm;
// osm_html += `<span class="osm-candidate" id="${span_id}"> ${osm.distance.toFixed(0)}m `
if (osm.name) {
osm_html += osm.name + " ";
}
if (!osm.presets.length && !osm.name) {
osm_html += "no name ";
}
osm_html += osm.presets.map(function(p) {
var wiki_url = `http://wiki.openstreetmap.org/wiki/${p.tag_or_key}`;
return `<a href="${wiki_url}" class="osm-wiki-link" target="_blank">${p.name} <i class="fa fa-external-link"></i></a>`;
}).join(", ");
if (osm.address_list && osm.address_list.length) {
if (osm.address_list.length == 1) {
osm_html += "<br>address node: " + osm.address_list[0];
} else {
osm_html += "<br>address nodes: " + osm.address_list.join("; ")
}
}
osm_html += "</td></tr>";
}
osm_html += "</tbody></table>"
candidates.innerHTML = osm_html;
var span_list = document.getElementsByClassName("osm-candidate");
for (const osm_span of span_list) {
osm_span.onmouseenter = function (e) {
show_outline(nearby_lookup[e.target.id]);
};
}
});
});
open_detail(qid);
});
item.markers ||= [];
@ -560,7 +583,7 @@ function load_wikidata_items() {
<br>
Wikidata tag: <a href="${wd_url}" target="_blank">${qid}</a>
</p>`;
// marker.bindPopup(popup);
mouse_events(marker, qid);
var group = add_to_feature_group(qid, marker);
@ -612,8 +635,16 @@ function close_detail() {
detail_card.classList.add("d-none");
close_item_details();
detail_qid = undefined;
}
document.getElementById("load-btn").onclick = load_wikidata_items;
document.getElementById("show-all-isa").onclick = show_all_isa;
document.getElementById("close-detail").onclick = close_detail;
detail_qid = qid_from_url();
update_map_path();
if(detail_qid) {
load_wikidata_items();
}

1
templates/map.html
View File

@ -57,7 +57,6 @@
<div id="candidates"></div>
</div>
</div>
<img src="" class="card-img-bottom d-none" id="detail-image">
</div>
</div>