diff --git a/static/js/map.js b/static/js/map.js
index 0a8cf34..b5df921 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -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 = '
'
+ var has_image = item.image_list && item.image_list.length;
popup += "
Wikidata item";
popup += `
${item.label} (${item.qid})`;
@@ -291,15 +309,25 @@ function build_item_detail(item, tag_or_key_list) {
popup += `
${item.street_address[0]}`;
}
- popup += '
'
-
if (tag_or_key_list && tag_or_key_list.length) {
- popup += "
OSM tags/keys to search for";
+ if (!has_image) {
+ popup += '
'
+ } else {
+ popup += "
"
+ }
+
+ popup += "OSM tags/keys to search for";
for (const v of tag_or_key_list) {
popup += `
${v}`;
}
}
+
+ if (has_image) {
+ popup += '
'
+ popup += `
`;
+ }
+
popup += "
";
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 = "Possible OSM matches
";
+ osm_html += ''
+ osm_html += ''
+ for (const osm of nearby) {
+ var candidate_id = osm.identifier.replace("/", "_");
+ osm_html += `${osm.distance.toFixed(0)}m `;
+ osm_html += ``;
+ osm_html += '';
+ osm_html += " | ";
+ 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 `${p.name} `;
+ }).join(", ");
+ if (osm.address_list && osm.address_list.length) {
+ if (osm.address_list.length == 1) {
+ osm_html += " address node: " + osm.address_list[0];
+ } else {
+ osm_html += " address nodes: " + osm.address_list.join("; ")
+ }
+ }
+ osm_html += " |
";
+ }
+ osm_html += "
"
+ 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 = "Possible OSM matches
";
- osm_html += ''
- osm_html += ''
- for (const osm of nearby) {
- var candidate_id = osm.identifier.replace("/", "_");
- osm_html += `${osm.distance.toFixed(0)}m `;
- osm_html += ``;
- osm_html += '';
- osm_html += " | ";
- nearby_lookup[candidate_id] = osm;
- // osm_html += ` ${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 `${p.name} `;
- }).join(", ");
- if (osm.address_list && osm.address_list.length) {
- if (osm.address_list.length == 1) {
- osm_html += " address node: " + osm.address_list[0];
- } else {
- osm_html += " address nodes: " + osm.address_list.join("; ")
- }
- }
- osm_html += " |
";
- }
- osm_html += "
"
- 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() {
Wikidata tag: ${qid}
`;
- // 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();
+}
diff --git a/templates/map.html b/templates/map.html
index 674ed64..b358177 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -57,7 +57,6 @@
-