diff --git a/static/js/map.js b/static/js/map.js index d4e89d8..12ed8b5 100644 --- a/static/js/map.js +++ b/static/js/map.js @@ -1,9 +1,9 @@ -'use strict'; +"use strict"; var options = {}; if (start_lat || start_lng) { - start_lat = start_lat.toFixed(5); - start_lng = start_lng.toFixed(5); + start_lat = start_lat.toFixed(5); + start_lng = start_lng.toFixed(5); options = { center: [start_lat, start_lng], zoom: zoom, @@ -24,133 +24,134 @@ var isa_card = document.getElementById("isa-card"); var isa_labels = {}; var connections = {}; map.addLayer(group); -map.zoomControl.setPosition('topright'); +map.zoomControl.setPosition("topright"); var blueMarker = L.ExtraMarkers.icon({ - icon: 'fa-wikidata', - markerColor: 'blue', - shape: 'circle', - prefix: 'fa', + icon: "fa-wikidata", + markerColor: "blue", + shape: "circle", + prefix: "fa", }); var greenMarker = L.ExtraMarkers.icon({ - icon: 'fa-wikidata', - markerColor: 'green', - shape: 'circle', - prefix: 'fa', + icon: "fa-wikidata", + markerColor: "green", + shape: "circle", + prefix: "fa", }); var redMarker = L.ExtraMarkers.icon({ - icon: 'fa-wikidata', - markerColor: 'red', - shape: 'circle', - prefix: 'fa', + icon: "fa-wikidata", + markerColor: "red", + shape: "circle", + prefix: "fa", }); var osmYellowMarker = L.ExtraMarkers.icon({ - icon: 'fa-map', - markerColor: 'yellow', - shape: 'square', - prefix: 'fa', + icon: "fa-map", + markerColor: "yellow", + shape: "square", + prefix: "fa", }); var osmOrangeMarker = L.ExtraMarkers.icon({ - icon: 'fa-map', - markerColor: 'orange', - shape: 'square', - prefix: 'fa', + icon: "fa-map", + markerColor: "orange", + shape: "square", + prefix: "fa", }); - if (!start_lat || !start_lng) { - map.fitBounds([[49.85,-10.5], [58.75, 1.9]]); + map.fitBounds([ + [49.85, -10.5], + [58.75, 1.9], + ]); } // Add OpenStreetMap layer -var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19 }); +var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { + maxZoom: 19, +}); osm.addTo(map); function check_items(items) { - if (items.length === 0) - return; + if (items.length === 0) return; var item = items.shift(); var qid = item.qid; var markers_url = `/api/1/item/${qid}`; - axios.get(markers_url).then(response => { + axios.get(markers_url).then((response) => { // console.log(response.data, item); - response.data.info.forEach(osm => { + response.data.info.forEach((osm) => { var icon = osmYellowMarker; - var marker = L.marker(osm.centroid, {title: osm.name, icon: icon}); + var marker = L.marker(osm.centroid, { title: osm.name, icon: icon }); var popup = `

${osm.identifier}: ${osm.name} -

` +

`; marker.bindPopup(popup); marker.addTo(group); - }); - item.markers.forEach(marker_data => { + item.markers.forEach((marker_data) => { var marker = marker_data.marker; var icon = response.data.tagged ? greenMarker : redMarker; marker.setIcon(icon); - response.data.info.forEach(osm => { + response.data.info.forEach((osm) => { var path = [osm.centroid, marker_data]; - var polyline = L.polyline(path, {color: 'green'}).addTo(map); + var polyline = L.polyline(path, { color: "green" }).addTo(map); }); - }); - if (items.length) - check_items(items); + if (items.length) check_items(items); }); } function update_wikidata() { - if (Object.keys(wikidata_items).length === 0 || Object.keys(osm_objects).length === 0) { + if ( + Object.keys(wikidata_items).length === 0 || + Object.keys(osm_objects).length === 0 + ) { if (wikidata_loaded && osm_loaded) { - loading.classList.add("visually-hidden"); - load_text.classList.remove("visually-hidden"); + loading.classList.add("visually-hidden"); + load_text.classList.remove("visually-hidden"); } return; } for (const qid in osm_objects) { - var osm_list = osm_objects[qid]; + var osm_list = osm_objects[qid]; - var item = wikidata_items[qid]; - if (!item) { - osm_list.forEach(osm => { - osm.marker.setIcon(osmOrangeMarker); - }); - continue; - } - - if (item.lines === undefined) - item.lines = []; - item.markers.forEach(marker_data => { - marker_data.marker.setIcon(greenMarker); - osm_list.forEach(osm => { - var path = [osm.centroid, marker_data]; - var polyline = L.polyline(path, {color: 'green'}).addTo(group); - item.lines.push(polyline); - }); + var item = wikidata_items[qid]; + if (!item) { + osm_list.forEach((osm) => { + osm.marker.setIcon(osmOrangeMarker); }); + continue; + } + + if (item.lines === undefined) item.lines = []; + item.markers.forEach((marker_data) => { + marker_data.marker.setIcon(greenMarker); + osm_list.forEach((osm) => { + var path = [osm.centroid, marker_data]; + var polyline = L.polyline(path, { color: "green" }).addTo(group); + item.lines.push(polyline); + }); + }); } for (const qid in wikidata_items) { - if (osm_objects[qid]) - continue; - var item = wikidata_items[qid]; - item.markers.forEach(marker_data => { - marker_data.marker.setIcon(redMarker); - }); + if (osm_objects[qid]) continue; + var item = wikidata_items[qid]; + item.markers.forEach((marker_data) => { + marker_data.marker.setIcon(redMarker); + }); } - loading.classList.add("visually-hidden"); - load_text.classList.remove("visually-hidden"); + loading.classList.add("visually-hidden"); + load_text.classList.remove("visually-hidden"); } function isa_only(e) { @@ -158,7 +159,7 @@ function isa_only(e) { var this_id = e.target.parentNode.childNodes[0].id; - var checkbox_list = document.getElementsByClassName('isa-checkbox'); + var checkbox_list = document.getElementsByClassName("isa-checkbox"); for (const checkbox of checkbox_list) { checkbox.checked = checkbox.id == this_id; @@ -169,7 +170,7 @@ function isa_only(e) { function show_all_isa(e) { e.preventDefault(); - var checkbox_list = document.getElementsByClassName('isa-checkbox'); + var checkbox_list = document.getElementsByClassName("isa-checkbox"); for (const checkbox of checkbox_list) { checkbox.checked = true; } @@ -178,20 +179,22 @@ function show_all_isa(e) { } function checkbox_change() { - var checkbox_list = document.getElementsByClassName('isa-checkbox'); + var checkbox_list = document.getElementsByClassName("isa-checkbox"); var ticked = []; for (const checkbox of checkbox_list) { - if (checkbox.checked) { - ticked.push(checkbox.id.substr(4)); - } + if (checkbox.checked) { + ticked.push(checkbox.id.substr(4)); + } } for (const qid in wikidata_items) { var item = wikidata_items[qid]; - const item_isa_list = wikidata_items[qid]['isa_list']; - const intersection = ticked.filter(isa_qid => item_isa_list.includes(isa_qid)); + const item_isa_list = wikidata_items[qid]["isa_list"]; + const intersection = ticked.filter((isa_qid) => + item_isa_list.includes(isa_qid) + ); if (item.lines) { - item.lines.forEach(line => { + item.lines.forEach((line) => { if (intersection.length) { line.addTo(group); } else { @@ -200,7 +203,7 @@ function checkbox_change() { }); } - item.markers.forEach(marker_data => { + item.markers.forEach((marker_data) => { var marker = marker_data.marker; if (intersection.length) { marker.addTo(group); @@ -209,8 +212,8 @@ function checkbox_change() { } }); - if(osm_objects[qid]) { - osm_objects[qid].forEach(osm => { + if (osm_objects[qid]) { + osm_objects[qid].forEach((osm) => { if (intersection.length) { osm.marker.addTo(group); } else { @@ -219,8 +222,8 @@ function checkbox_change() { }); } - if(items[qid]) { - items[qid].geojson.forEach(geojson => { + if (items[qid]) { + items[qid].geojson.forEach((geojson) => { if (intersection.length) { geojson.addTo(map); } else { @@ -234,34 +237,36 @@ function checkbox_change() { function set_isa_list(isa_count) { isa_card.classList.remove("visually-hidden"); var isa_list = document.getElementById("isa-list"); - isa_list.innerHTML = ''; - isa_count.forEach(isa => { + isa_list.innerHTML = ""; + isa_count.forEach((isa) => { isa_labels[isa.qid] = isa.label; var isa_id = `isa-${isa.qid}`; - var e = document.createElement('div'); - e.setAttribute('class', 'isa-item'); + var e = document.createElement("div"); + e.setAttribute("class", "isa-item"); - var checkbox = document.createElement('input'); - checkbox.setAttribute('type', 'checkbox'); - checkbox.setAttribute('checked', 'checked'); - checkbox.setAttribute('id', isa_id); - checkbox.setAttribute('class', 'isa-checkbox'); + var checkbox = document.createElement("input"); + checkbox.setAttribute("type", "checkbox"); + checkbox.setAttribute("checked", "checked"); + checkbox.setAttribute("id", isa_id); + checkbox.setAttribute("class", "isa-checkbox"); checkbox.onchange = checkbox_change; e.appendChild(checkbox); - e.appendChild(document.createTextNode(' ')); + e.appendChild(document.createTextNode(" ")); - var label = document.createElement('label'); - label.setAttribute('for', isa_id); - var label_text = document.createTextNode(` ${isa.label} (${isa.qid}): ${isa.count} `); + var label = document.createElement("label"); + label.setAttribute("for", isa_id); + var label_text = document.createTextNode( + ` ${isa.label} (${isa.qid}): ${isa.count} ` + ); label.appendChild(label_text); e.appendChild(label); - e.appendChild(document.createTextNode(' ')); + e.appendChild(document.createTextNode(" ")); - var only = document.createElement('a'); - only.setAttribute('href', '#'); - var only_text = document.createTextNode('only'); + var only = document.createElement("a"); + only.setAttribute("href", "#"); + var only_text = document.createTextNode("only"); only.appendChild(only_text); only.onclick = isa_only; e.appendChild(only); @@ -271,38 +276,37 @@ function set_isa_list(isa_count) { } function add_wikidata_marker(item, marker_data) { - var icon = blueMarker; - 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 wd_url = 'https://www.wikidata.org/wiki/' + item.qid; - var popup = '

Wikidata item
' - popup += `${item.label} (${item.qid})` - if (item.description) { - popup += `
description: ${item.description}` + var icon = blueMarker; + 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 wd_url = "https://www.wikidata.org/wiki/" + item.qid; + var popup = "

Wikidata item
"; + popup += `${item.label} (${item.qid})`; + if (item.description) { + popup += `
description: ${item.description}`; + } + if (item.isa_list && item.isa_list.length) { + popup += "
item type"; + for (const [index, isa_qid] of item.isa_list.entries()) { + var isa_url = "https://www.wikidata.org/wiki/" + isa_qid; + var isa_label = isa_labels[isa_qid]; + popup += `
${isa_label} (${isa_qid})`; } - if (item.isa_list && item.isa_list.length) { - popup += '
item type' - for (const [index, isa_qid] of item.isa_list.entries()) { - var isa_url = 'https://www.wikidata.org/wiki/' + isa_qid; - var isa_label = isa_labels[isa_qid]; - popup += `
${isa_label} (${isa_qid})`; - } - } - if (item.image_list && item.image_list.length) { - popup += `
`; - } - popup += '

'; - marker.bindPopup(popup); - marker.addTo(group); - marker_data.marker = marker; + } + if (item.image_list && item.image_list.length) { + popup += `
`; + } + popup += "

"; + marker.bindPopup(popup); + marker.addTo(group); + marker_data.marker = marker; } function load_wikidata_items() { - var checkbox_list = document.getElementsByClassName('isa-checkbox'); + var checkbox_list = document.getElementsByClassName("isa-checkbox"); - for (const checkbox of checkbox_list) - checkbox.checked = true; + for (const checkbox of checkbox_list) checkbox.checked = true; checkbox_change(); @@ -312,18 +316,18 @@ function load_wikidata_items() { var bounds = map.getBounds(); console.log("map moved", bounds.toBBoxString()); - var params = {bounds: bounds.toBBoxString()}; + var params = { bounds: bounds.toBBoxString() }; var items_url = "/api/1/items"; - axios.get(items_url, {params: params}).then(response => { + axios.get(items_url, { params: params }).then((response) => { set_isa_list(response.data.isa_count); var items = response.data.items; - items.forEach(item => { - if (item.qid in wikidata_items) - return; - item.markers.forEach(marker_data => add_wikidata_marker(item, marker_data)); - wikidata_items[item.qid] = item; - + items.forEach((item) => { + if (item.qid in wikidata_items) return; + item.markers.forEach((marker_data) => + add_wikidata_marker(item, marker_data) + ); + wikidata_items[item.qid] = item; }); wikidata_loaded = true; @@ -331,38 +335,35 @@ function load_wikidata_items() { update_wikidata(); }); var osm_objects_url = "/api/1/osm"; - axios.get(osm_objects_url, {params: params}).then(response => { + axios.get(osm_objects_url, { params: params }).then((response) => { console.log(`${response.data.duration} seconds`); - response.data.objects.forEach(osm => { + response.data.objects.forEach((osm) => { var qid = osm.wikidata; - if (osm_objects[qid] === undefined) - osm_objects[qid] = []; + if (osm_objects[qid] === undefined) osm_objects[qid] = []; osm_objects[qid].push(osm); var icon = osmYellowMarker; - var marker = L.marker(osm.centroid, {title: osm.name, icon: icon}); + var marker = L.marker(osm.centroid, { title: osm.name, icon: icon }); osm.marker = marker; - var wd_url = 'https://www.wikidata.org/wiki/' + qid; + var wd_url = "https://www.wikidata.org/wiki/" + qid; var popup = `

${osm.name}: ${osm.identifier}
Wikidata tag: ${qid} -

` +

`; marker.bindPopup(popup); marker.addTo(group); - if (osm.type != 'node' && osm.geojson) { - var mapStyle = {fillOpacity: 0}; - var geojson = L.geoJSON(null, {style: mapStyle}); + if (osm.type != "node" && osm.geojson) { + var mapStyle = { fillOpacity: 0 }; + var geojson = L.geoJSON(null, { style: mapStyle }); geojson.addTo(map); geojson.addData(osm.geojson); - if (items[qid] === undefined) - items[qid] = {}; - if (items[qid].geojson === undefined) - items[qid].geojson = []; + if (items[qid] === undefined) items[qid] = {}; + if (items[qid].geojson === undefined) items[qid].geojson = []; items[qid].geojson.push(geojson); } @@ -371,35 +372,32 @@ function load_wikidata_items() { osm_loaded = true; update_wikidata(); }); +} +document.getElementById("show-all-isa").onclick = show_all_isa; -}; - -document.getElementById('show-all-isa').onclick = show_all_isa; - -var load_btn = document.getElementById('load-btn'); +var load_btn = document.getElementById("load-btn"); load_btn.onclick = load_wikidata_items; -var search_btn = document.getElementById('search-btn'); -var search_form = document.getElementById('search-form'); -search_form.onsubmit = function(e) { +var search_btn = document.getElementById("search-btn"); +var search_form = document.getElementById("search-form"); +search_form.onsubmit = function (e) { e.preventDefault(); - var search_text = document.getElementById('search-text').value.trim(); - if (!search_text) - return; - var params = {q: search_text}; + var search_text = document.getElementById("search-text").value.trim(); + if (!search_text) return; + var params = { q: search_text }; var search_url = "/api/1/search"; - var search_results = document.getElementById('search-results'); - axios.get(search_url, {params: params}).then(response => { - search_results.innerHTML = ''; - response.data.hits.forEach(hit => { - var e = document.createElement('div'); - var category = document.createTextNode(hit.category + ' '); + var search_results = document.getElementById("search-results"); + axios.get(search_url, { params: params }).then((response) => { + search_results.innerHTML = ""; + response.data.hits.forEach((hit) => { + var e = document.createElement("div"); + var category = document.createTextNode(hit.category + " "); e.appendChild(category); - var a = document.createElement('a'); + var a = document.createElement("a"); var lat = parseFloat(hit.lat).toFixed(5); var lon = parseFloat(hit.lon).toFixed(5); - a.setAttribute('href', `/map/15/${lat}/${lon}`); + a.setAttribute("href", `/map/15/${lat}/${lon}`); var link_text = document.createTextNode(hit.name); a.appendChild(link_text); e.appendChild(a); @@ -407,9 +405,9 @@ search_form.onsubmit = function(e) { }); console.log(response.data); }); -} +}; -map.on('moveend', function (e) { +map.on("moveend", function (e) { var zoom = map.getZoom(); var c = map.getCenter(); var lat = c.lat.toFixed(5);