forked from edward/owl-map
Code formatting with prettier
This commit is contained in:
parent
5cad18c393
commit
2bed4b86a3
240
static/js/map.js
240
static/js/map.js
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
var options = {};
|
||||
if (start_lat || start_lng) {
|
||||
|
|
@ -24,92 +24,95 @@ 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 popup = `
|
||||
<p>
|
||||
<a href="${osm.url}" target="_blank">${osm.identifier}</a>: ${osm.name}
|
||||
</p>`
|
||||
</p>`;
|
||||
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");
|
||||
|
|
@ -123,28 +126,26 @@ function update_wikidata() {
|
|||
|
||||
var item = wikidata_items[qid];
|
||||
if (!item) {
|
||||
osm_list.forEach(osm => {
|
||||
osm_list.forEach((osm) => {
|
||||
osm.marker.setIcon(osmOrangeMarker);
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
if (item.lines === undefined)
|
||||
item.lines = [];
|
||||
item.markers.forEach(marker_data => {
|
||||
if (item.lines === undefined) item.lines = [];
|
||||
item.markers.forEach((marker_data) => {
|
||||
marker_data.marker.setIcon(greenMarker);
|
||||
osm_list.forEach(osm => {
|
||||
osm_list.forEach((osm) => {
|
||||
var path = [osm.centroid, marker_data];
|
||||
var polyline = L.polyline(path, {color: 'green'}).addTo(group);
|
||||
var polyline = L.polyline(path, { color: "green" }).addTo(group);
|
||||
item.lines.push(polyline);
|
||||
});
|
||||
});
|
||||
}
|
||||
for (const qid in wikidata_items) {
|
||||
if (osm_objects[qid])
|
||||
continue;
|
||||
if (osm_objects[qid]) continue;
|
||||
var item = wikidata_items[qid];
|
||||
item.markers.forEach(marker_data => {
|
||||
item.markers.forEach((marker_data) => {
|
||||
marker_data.marker.setIcon(redMarker);
|
||||
});
|
||||
}
|
||||
|
|
@ -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,7 +179,7 @@ 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) {
|
||||
|
|
@ -188,10 +189,12 @@ function checkbox_change() {
|
|||
|
||||
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);
|
||||
|
|
@ -210,7 +213,7 @@ function checkbox_change() {
|
|||
});
|
||||
|
||||
if (osm_objects[qid]) {
|
||||
osm_objects[qid].forEach(osm => {
|
||||
osm_objects[qid].forEach((osm) => {
|
||||
if (intersection.length) {
|
||||
osm.marker.addTo(group);
|
||||
} else {
|
||||
|
|
@ -220,7 +223,7 @@ function checkbox_change() {
|
|||
}
|
||||
|
||||
if (items[qid]) {
|
||||
items[qid].geojson.forEach(geojson => {
|
||||
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);
|
||||
|
|
@ -272,19 +277,19 @@ function set_isa_list(isa_count) {
|
|||
|
||||
function add_wikidata_marker(item, marker_data) {
|
||||
var icon = blueMarker;
|
||||
var label = `${item.label} (${item.qid})`
|
||||
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 = '<p><strong>Wikidata item</strong><br>'
|
||||
popup += `<a href="${wd_url}" target="_blank">${item.label}</a> (${item.qid})`
|
||||
var wd_url = "https://www.wikidata.org/wiki/" + item.qid;
|
||||
var popup = "<p><strong>Wikidata item</strong><br>";
|
||||
popup += `<a href="${wd_url}" target="_blank">${item.label}</a> (${item.qid})`;
|
||||
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>'
|
||||
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_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})`;
|
||||
}
|
||||
|
|
@ -292,17 +297,16 @@ function add_wikidata_marker(item, marker_data) {
|
|||
if (item.image_list && item.image_list.length) {
|
||||
popup += `<br><img src="/commons/${item.image_list[0]}">`;
|
||||
}
|
||||
popup += '</p>';
|
||||
popup += "</p>";
|
||||
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();
|
||||
|
||||
|
|
@ -315,15 +319,15 @@ function load_wikidata_items() {
|
|||
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));
|
||||
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 });
|
||||
osm.marker = marker;
|
||||
var wd_url = 'https://www.wikidata.org/wiki/' + qid;
|
||||
var wd_url = "https://www.wikidata.org/wiki/" + qid;
|
||||
var popup = `
|
||||
<p>
|
||||
${osm.name}:
|
||||
<a href="${osm.url}" target="_blank">${osm.identifier}</a>
|
||||
<br>
|
||||
Wikidata tag: <a href="${wd_url}" target="_blank">${qid}</a>
|
||||
</p>`
|
||||
</p>`;
|
||||
marker.bindPopup(popup);
|
||||
marker.addTo(group);
|
||||
|
||||
if (osm.type != 'node' && osm.geojson) {
|
||||
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');
|
||||
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 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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue