dpriskorn/owl-map
1
0
Fork 0
forked from edward/owl-map
Code Pull requests Activity

Code formatting with prettier

Browse source
This commit is contained in:
Edward Betts 2021-05-09 12:18:56 +02:00
parent 5cad18c393
commit 2bed4b86a3
1 changed files with 169 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

340
static/js/map.js
View file

@ -1,9 +1,9 @@
'use strict'; "use strict";
var options = {}; var options = {};
if (start_lat || start_lng) { if (start_lat || start_lng) {
start_lat = start_lat.toFixed(5); start_lat = start_lat.toFixed(5);
start_lng = start_lng.toFixed(5); start_lng = start_lng.toFixed(5);
options = { options = {
center: [start_lat, start_lng], center: [start_lat, start_lng],
zoom: zoom, zoom: zoom,
@ -24,133 +24,134 @@ var isa_card = document.getElementById("isa-card");
var isa_labels = {}; var isa_labels = {};
var connections = {}; var connections = {};
map.addLayer(group); map.addLayer(group);
map.zoomControl.setPosition('topright'); map.zoomControl.setPosition("topright");
var blueMarker = L.ExtraMarkers.icon({ var blueMarker = L.ExtraMarkers.icon({
icon: 'fa-wikidata', icon: "fa-wikidata",
markerColor: 'blue', markerColor: "blue",
shape: 'circle', shape: "circle",
prefix: 'fa', prefix: "fa",
}); });
var greenMarker = L.ExtraMarkers.icon({ var greenMarker = L.ExtraMarkers.icon({
icon: 'fa-wikidata', icon: "fa-wikidata",
markerColor: 'green', markerColor: "green",
shape: 'circle', shape: "circle",
prefix: 'fa', prefix: "fa",
}); });
var redMarker = L.ExtraMarkers.icon({ var redMarker = L.ExtraMarkers.icon({
icon: 'fa-wikidata', icon: "fa-wikidata",
markerColor: 'red', markerColor: "red",
shape: 'circle', shape: "circle",
prefix: 'fa', prefix: "fa",
}); });
var osmYellowMarker = L.ExtraMarkers.icon({ var osmYellowMarker = L.ExtraMarkers.icon({
icon: 'fa-map', icon: "fa-map",
markerColor: 'yellow', markerColor: "yellow",
shape: 'square', shape: "square",
prefix: 'fa', prefix: "fa",
}); });
var osmOrangeMarker = L.ExtraMarkers.icon({ var osmOrangeMarker = L.ExtraMarkers.icon({
icon: 'fa-map', icon: "fa-map",
markerColor: 'orange', markerColor: "orange",
shape: 'square', shape: "square",
prefix: 'fa', prefix: "fa",
}); });
if (!start_lat || !start_lng) { 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 // 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); osm.addTo(map);
function check_items(items) { function check_items(items) {
if (items.length === 0) if (items.length === 0) return;
return;
var item = items.shift(); var item = items.shift();
var qid = item.qid; var qid = item.qid;
var markers_url = `/api/1/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); // console.log(response.data, item);
response.data.info.forEach(osm => { response.data.info.forEach((osm) => {
var icon = osmYellowMarker; 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 = ` var popup = `
<p> <p>
<a href="${osm.url}" target="_blank">${osm.identifier}</a>: ${osm.name} <a href="${osm.url}" target="_blank">${osm.identifier}</a>: ${osm.name}
</p>` </p>`;
marker.bindPopup(popup); marker.bindPopup(popup);
marker.addTo(group); marker.addTo(group);
}); });
item.markers.forEach(marker_data => { item.markers.forEach((marker_data) => {
var marker = marker_data.marker; var marker = marker_data.marker;
var icon = response.data.tagged ? greenMarker : redMarker; var icon = response.data.tagged ? greenMarker : redMarker;
marker.setIcon(icon); marker.setIcon(icon);
response.data.info.forEach(osm => { response.data.info.forEach((osm) => {
var path = [osm.centroid, marker_data]; 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) if (items.length) check_items(items);
check_items(items);
}); });
} }
function update_wikidata() { 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) { if (wikidata_loaded && osm_loaded) {
loading.classList.add("visually-hidden"); loading.classList.add("visually-hidden");
load_text.classList.remove("visually-hidden"); load_text.classList.remove("visually-hidden");
} }
return; return;
} }
for (const qid in osm_objects) { for (const qid in osm_objects) {
var osm_list = osm_objects[qid]; var osm_list = osm_objects[qid];
var item = wikidata_items[qid]; var item = wikidata_items[qid];
if (!item) { if (!item) {
osm_list.forEach(osm => { osm_list.forEach((osm) => {
osm.marker.setIcon(osmOrangeMarker); 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);
});
}); });
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) { for (const qid in wikidata_items) {
if (osm_objects[qid]) if (osm_objects[qid]) continue;
continue; var item = wikidata_items[qid];
var item = wikidata_items[qid]; item.markers.forEach((marker_data) => {
item.markers.forEach(marker_data => { marker_data.marker.setIcon(redMarker);
marker_data.marker.setIcon(redMarker); });
});
} }
loading.classList.add("visually-hidden"); loading.classList.add("visually-hidden");
load_text.classList.remove("visually-hidden"); load_text.classList.remove("visually-hidden");
} }
function isa_only(e) { function isa_only(e) {
@ -158,7 +159,7 @@ function isa_only(e) {
var this_id = e.target.parentNode.childNodes[0].id; 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) { for (const checkbox of checkbox_list) {
checkbox.checked = checkbox.id == this_id; checkbox.checked = checkbox.id == this_id;
@ -169,7 +170,7 @@ function isa_only(e) {
function show_all_isa(e) { function show_all_isa(e) {
e.preventDefault(); e.preventDefault();
var checkbox_list = document.getElementsByClassName('isa-checkbox'); var checkbox_list = document.getElementsByClassName("isa-checkbox");
for (const checkbox of checkbox_list) { for (const checkbox of checkbox_list) {
checkbox.checked = true; checkbox.checked = true;
} }
@ -178,20 +179,22 @@ function show_all_isa(e) {
} }
function checkbox_change() { function checkbox_change() {
var checkbox_list = document.getElementsByClassName('isa-checkbox'); var checkbox_list = document.getElementsByClassName("isa-checkbox");
var ticked = []; var ticked = [];
for (const checkbox of checkbox_list) { for (const checkbox of checkbox_list) {
if (checkbox.checked) { if (checkbox.checked) {
ticked.push(checkbox.id.substr(4)); ticked.push(checkbox.id.substr(4));
} }
} }
for (const qid in wikidata_items) { for (const qid in wikidata_items) {
var item = wikidata_items[qid]; var item = wikidata_items[qid];
const item_isa_list = wikidata_items[qid]['isa_list']; const item_isa_list = wikidata_items[qid]["isa_list"];
const intersection = ticked.filter(isa_qid => item_isa_list.includes(isa_qid)); const intersection = ticked.filter((isa_qid) =>
item_isa_list.includes(isa_qid)
);
if (item.lines) { if (item.lines) {
item.lines.forEach(line => { item.lines.forEach((line) => {
if (intersection.length) { if (intersection.length) {
line.addTo(group); line.addTo(group);
} else { } else {
@ -200,7 +203,7 @@ function checkbox_change() {
}); });
} }
item.markers.forEach(marker_data => { item.markers.forEach((marker_data) => {
var marker = marker_data.marker; var marker = marker_data.marker;
if (intersection.length) { if (intersection.length) {
marker.addTo(group); marker.addTo(group);
@ -209,8 +212,8 @@ function checkbox_change() {
} }
}); });
if(osm_objects[qid]) { if (osm_objects[qid]) {
osm_objects[qid].forEach(osm => { osm_objects[qid].forEach((osm) => {
if (intersection.length) { if (intersection.length) {
osm.marker.addTo(group); osm.marker.addTo(group);
} else { } else {
@ -219,8 +222,8 @@ function checkbox_change() {
}); });
} }
if(items[qid]) { if (items[qid]) {
items[qid].geojson.forEach(geojson => { items[qid].geojson.forEach((geojson) => {
if (intersection.length) { if (intersection.length) {
geojson.addTo(map); geojson.addTo(map);
} else { } else {
@ -234,34 +237,36 @@ function checkbox_change() {
function set_isa_list(isa_count) { function set_isa_list(isa_count) {
isa_card.classList.remove("visually-hidden"); isa_card.classList.remove("visually-hidden");
var isa_list = document.getElementById("isa-list"); var isa_list = document.getElementById("isa-list");
isa_list.innerHTML = ''; isa_list.innerHTML = "";
isa_count.forEach(isa => { isa_count.forEach((isa) => {
isa_labels[isa.qid] = isa.label; isa_labels[isa.qid] = isa.label;
var isa_id = `isa-${isa.qid}`; var isa_id = `isa-${isa.qid}`;
var e = document.createElement('div'); var e = document.createElement("div");
e.setAttribute('class', 'isa-item'); e.setAttribute("class", "isa-item");
var checkbox = document.createElement('input'); var checkbox = document.createElement("input");
checkbox.setAttribute('type', 'checkbox'); checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute('checked', 'checked'); checkbox.setAttribute("checked", "checked");
checkbox.setAttribute('id', isa_id); checkbox.setAttribute("id", isa_id);
checkbox.setAttribute('class', 'isa-checkbox'); checkbox.setAttribute("class", "isa-checkbox");
checkbox.onchange = checkbox_change; checkbox.onchange = checkbox_change;
e.appendChild(checkbox); e.appendChild(checkbox);
e.appendChild(document.createTextNode(' ')); e.appendChild(document.createTextNode(" "));
var label = document.createElement('label'); var label = document.createElement("label");
label.setAttribute('for', isa_id); label.setAttribute("for", isa_id);
var label_text = document.createTextNode(` ${isa.label} (${isa.qid}): ${isa.count} `); var label_text = document.createTextNode(
` ${isa.label} (${isa.qid}): ${isa.count} `
);
label.appendChild(label_text); label.appendChild(label_text);
e.appendChild(label); e.appendChild(label);
e.appendChild(document.createTextNode(' ')); e.appendChild(document.createTextNode(" "));
var only = document.createElement('a'); var only = document.createElement("a");
only.setAttribute('href', '#'); only.setAttribute("href", "#");
var only_text = document.createTextNode('only'); var only_text = document.createTextNode("only");
only.appendChild(only_text); only.appendChild(only_text);
only.onclick = isa_only; only.onclick = isa_only;
e.appendChild(only); e.appendChild(only);
@ -271,38 +276,37 @@ function set_isa_list(isa_count) {
} }
function add_wikidata_marker(item, marker_data) { function add_wikidata_marker(item, marker_data) {
var icon = blueMarker; var icon = blueMarker;
var label = `${item.label} (${item.qid})` var label = `${item.label} (${item.qid})`;
var marker = L.marker(marker_data, {icon: icon}); var marker = L.marker(marker_data, { icon: icon });
// var tooltip = marker.bindTooltip(item.qid, {permanent: true, direction: 'bottom', opacity: 0.5}); // var tooltip = marker.bindTooltip(item.qid, {permanent: true, direction: 'bottom', opacity: 0.5});
var wd_url = 'https://www.wikidata.org/wiki/' + item.qid; var wd_url = "https://www.wikidata.org/wiki/" + item.qid;
var popup = '<p><strong>Wikidata item</strong><br>' var popup = "<p><strong>Wikidata item</strong><br>";
popup += `<a href="${wd_url}" target="_blank">${item.label}</a> (${item.qid})` popup += `<a href="${wd_url}" target="_blank">${item.label}</a> (${item.qid})`;
if (item.description) { if (item.description) {
popup += `<br>description: ${item.description}` popup += `<br>description: ${item.description}`;
}
if (item.isa_list && item.isa_list.length) {
popup += "<br><strong>item type</strong>";
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 += `<br><a href="${isa_url}" target="_blank">${isa_label}</a> (${isa_qid})`;
} }
if (item.isa_list && item.isa_list.length) { }
popup += '<br><strong>item type</strong>' if (item.image_list && item.image_list.length) {
for (const [index, isa_qid] of item.isa_list.entries()) { popup += `<br><img src="/commons/${item.image_list[0]}">`;
var isa_url = 'https://www.wikidata.org/wiki/' + isa_qid; }
var isa_label = isa_labels[isa_qid]; popup += "</p>";
popup += `<br><a href="${isa_url}" target="_blank">${isa_label}</a> (${isa_qid})`; marker.bindPopup(popup);
} marker.addTo(group);
} marker_data.marker = marker;
if (item.image_list && item.image_list.length) {
popup += `<br><img src="/commons/${item.image_list[0]}">`;
}
popup += '</p>';
marker.bindPopup(popup);
marker.addTo(group);
marker_data.marker = marker;
} }
function load_wikidata_items() { function load_wikidata_items() {
var checkbox_list = document.getElementsByClassName('isa-checkbox'); var checkbox_list = document.getElementsByClassName("isa-checkbox");
for (const checkbox of checkbox_list) for (const checkbox of checkbox_list) checkbox.checked = true;
checkbox.checked = true;
checkbox_change(); checkbox_change();
@ -312,18 +316,18 @@ function load_wikidata_items() {
var bounds = map.getBounds(); var bounds = map.getBounds();
console.log("map moved", bounds.toBBoxString()); console.log("map moved", bounds.toBBoxString());
var params = {bounds: bounds.toBBoxString()}; var params = { bounds: bounds.toBBoxString() };
var items_url = "/api/1/items"; 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); set_isa_list(response.data.isa_count);
var items = response.data.items; var items = response.data.items;
items.forEach(item => { items.forEach((item) => {
if (item.qid in wikidata_items) if (item.qid in wikidata_items) return;
return; item.markers.forEach((marker_data) =>
item.markers.forEach(marker_data => add_wikidata_marker(item, marker_data)); add_wikidata_marker(item, marker_data)
wikidata_items[item.qid] = item; );
wikidata_items[item.qid] = item;
}); });
wikidata_loaded = true; wikidata_loaded = true;
@ -331,38 +335,35 @@ function load_wikidata_items() {
update_wikidata(); update_wikidata();
}); });
var osm_objects_url = "/api/1/osm"; 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`); console.log(`${response.data.duration} seconds`);
response.data.objects.forEach(osm => { response.data.objects.forEach((osm) => {
var qid = osm.wikidata; var qid = osm.wikidata;
if (osm_objects[qid] === undefined) if (osm_objects[qid] === undefined) osm_objects[qid] = [];
osm_objects[qid] = [];
osm_objects[qid].push(osm); osm_objects[qid].push(osm);
var icon = osmYellowMarker; 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; osm.marker = marker;
var wd_url = 'https://www.wikidata.org/wiki/' + qid; var wd_url = "https://www.wikidata.org/wiki/" + qid;
var popup = ` var popup = `
<p> <p>
${osm.name}: ${osm.name}:
<a href="${osm.url}" target="_blank">${osm.identifier}</a> <a href="${osm.url}" target="_blank">${osm.identifier}</a>
<br> <br>
Wikidata tag: <a href="${wd_url}" target="_blank">${qid}</a> Wikidata tag: <a href="${wd_url}" target="_blank">${qid}</a>
</p>` </p>`;
marker.bindPopup(popup); marker.bindPopup(popup);
marker.addTo(group); marker.addTo(group);
if (osm.type != 'node' && osm.geojson) { if (osm.type != "node" && osm.geojson) {
var mapStyle = {fillOpacity: 0}; var mapStyle = { fillOpacity: 0 };
var geojson = L.geoJSON(null, {style: mapStyle}); var geojson = L.geoJSON(null, { style: mapStyle });
geojson.addTo(map); geojson.addTo(map);
geojson.addData(osm.geojson); geojson.addData(osm.geojson);
if (items[qid] === undefined) if (items[qid] === undefined) items[qid] = {};
items[qid] = {}; if (items[qid].geojson === undefined) items[qid].geojson = [];
if (items[qid].geojson === undefined)
items[qid].geojson = [];
items[qid].geojson.push(geojson); items[qid].geojson.push(geojson);
} }
@ -371,35 +372,32 @@ function load_wikidata_items() {
osm_loaded = true; osm_loaded = true;
update_wikidata(); update_wikidata();
}); });
}
document.getElementById("show-all-isa").onclick = show_all_isa;
}; var load_btn = document.getElementById("load-btn");
document.getElementById('show-all-isa').onclick = show_all_isa;
var load_btn = document.getElementById('load-btn');
load_btn.onclick = load_wikidata_items; load_btn.onclick = load_wikidata_items;
var search_btn = document.getElementById('search-btn'); var search_btn = document.getElementById("search-btn");
var search_form = document.getElementById('search-form'); var search_form = document.getElementById("search-form");
search_form.onsubmit = function(e) { search_form.onsubmit = function (e) {
e.preventDefault(); e.preventDefault();
var search_text = document.getElementById('search-text').value.trim(); var search_text = document.getElementById("search-text").value.trim();
if (!search_text) if (!search_text) return;
return; var params = { q: search_text };
var params = {q: search_text};
var search_url = "/api/1/search"; var search_url = "/api/1/search";
var search_results = document.getElementById('search-results'); var search_results = document.getElementById("search-results");
axios.get(search_url, {params: params}).then(response => { axios.get(search_url, { params: params }).then((response) => {
search_results.innerHTML = ''; search_results.innerHTML = "";
response.data.hits.forEach(hit => { response.data.hits.forEach((hit) => {
var e = document.createElement('div'); var e = document.createElement("div");
var category = document.createTextNode(hit.category + ' '); var category = document.createTextNode(hit.category + " ");
e.appendChild(category); e.appendChild(category);
var a = document.createElement('a'); var a = document.createElement("a");
var lat = parseFloat(hit.lat).toFixed(5); var lat = parseFloat(hit.lat).toFixed(5);
var lon = parseFloat(hit.lon).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); var link_text = document.createTextNode(hit.name);
a.appendChild(link_text); a.appendChild(link_text);
e.appendChild(a); e.appendChild(a);
@ -407,9 +405,9 @@ search_form.onsubmit = function(e) {
}); });
console.log(response.data); console.log(response.data);
}); });
} };
map.on('moveend', function (e) { map.on("moveend", function (e) {
var zoom = map.getZoom(); var zoom = map.getZoom();
var c = map.getCenter(); var c = map.getCenter();
var lat = c.lat.toFixed(5); var lat = c.lat.toFixed(5);