Save and load curret item with URL

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 = '<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;
+  update_map_path();
-
-  detail_image.setAttribute("src", "");
-  detail_image.classList.add("d-none");
 
   if (candidate_outline) {
     candidate_outline.removeFrom(map);
@@ -371,18 +396,9 @@ function show_outline(osm) {
     candidate_outline = geojson;
 }
 
-function mouse_events(marker, qid) {
+function open_detail(qid) {
-  items[qid] ||= {};
   var item = items[qid];
-  marker.on("mouseover", function () {
+  if (item.wikidata === undefined) {
-    mouseover(item);
-  });
-  marker.on("mouseout", function () {
-    mouseout(item);
-  });
-  marker.on("click", function () {
-    var wd_item = items[qid].wikidata;
-    if (wd_item === undefined) {
     console.log("not found:", qid);
     return;
   }
@@ -390,6 +406,7 @@ function mouse_events(marker, qid) {
   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();
@@ -401,17 +418,9 @@ function mouse_events(marker, qid) {
     detail_card.classList.remove("bg-highlight");
   }, 1000);
 
-    detail_qid = qid;
+  update_map_path();
 
-    if (wd_item.image_list && wd_item.image_list.length) {
+  var item_label = `${item.wikidata.label} (${item.wikidata.qid})`;
-      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));
 
@@ -421,7 +430,7 @@ function mouse_events(marker, qid) {
     if (response.data.qid != detail_qid) {
       tag_or_key_list = []; // different QID
     }
-      var item_detail = build_item_detail(wd_item, tag_or_key_list);
+    var item_detail = build_item_detail(item.wikidata, tag_or_key_list);
     detail.innerHTML = item_detail;
 
     if (tag_or_key_list.length == 0) return;
@@ -447,7 +456,6 @@ function mouse_events(marker, qid) {
           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 + " ";
           }
@@ -478,6 +486,21 @@ function mouse_events(marker, qid) {
         }
       });
   });
+
+}
+
+function mouse_events(marker, qid) {
+  items[qid] ||= {};
+  var item = items[qid];
+  marker.on("mouseover", function () {
+    mouseover(item);
+  });
+  marker.on("mouseout", function () {
+    mouseout(item);
+  });
+  marker.on("click", function () {
+    detail_qid = qid;
+    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();
+}

templates/map.html

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