qbi/additional_plugins
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

JavaScript code changed for Geo-JSON version 3 and better readability

Browse source
This commit is contained in:
surrim 2023-01-29 23:38:13 +00:00
parent 98ff6901df
commit f285f5b647
1 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
serendipity_event_osm/ressources/osm.js
View file

@ -1,26 +1,25 @@
const dateToColor = date => {
const minDate = new Date(date.getFullYear(), date.getMonth() - 1, 0);
const maxDate = new Date(date.getFullYear(), date.getMonth(), 0);
return "hsl(" + ((date.getTime() - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())).toFixed(3) + "turn, 100%, 50%)"
return "hsl(" + ((date.getTime() - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())).toFixed(3) + "turn, 100%, 50%)";
};
window.addEventListener("load", () => {
document.querySelectorAll("div.map").forEach(divMap => {
const popup = document.createElement("div");
popup.setAttribute("class", "ol-popup");
const overlay = new ol.Overlay({
element: popup
});
popup.onclick = () => {
overlay.setPosition(undefined);
};
const overlay = new ol.Overlay({
element: popup
});
const data = divMap.dataset;
const entries = geo.entries.filter(x => ["all", "none"].includes(data.category) || x.categories.includes(parseInt(data.category)));
const uploads = geo.uploads.filter(x => data.path.split("\n").some(y => x.url.startsWith(y)));
const features = entries.map((entry, id) => {
const feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(entry.pos.reverse())));
const dataset = divMap.dataset;
const articles = geo.articles.filter(article => ["all", "none"].includes(dataset.category) || article.categories.includes(parseInt(dataset.category)));
const tracks = geo.tracks.filter(track => dataset.path.split("\n").some(y => track.url.startsWith(y)));
const features = articles.map((article, id) => {
const feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(article.location.reverse())));
feature.setId(id);
return feature;
});
@ -32,8 +31,8 @@ window.addEventListener("load", () => {
source: new ol.source.Vector({features: features}),
style: feature => {
const id = feature.getId();
const entry = entries[id];
const date = new Date(entry.date * 1000);
const article = articles[id];
const date = new Date(article.date * 1000);
return new ol.style.Style({
image: new ol.style.Circle({
@ -45,19 +44,19 @@ window.addEventListener("load", () => {
zIndex: Infinity
})
];
for (const upload of uploads) {
for (const track of tracks) {
const source = new ol.source.Vector({
url: upload.url,
url: track.url,
format: new ol.format.GPX()
});
source.on("featuresloadend", event => {
upload.length = event.features
track.distance = event.features
.filter(feature => feature.getGeometry().getType() === "MultiLineString")
.map(feature => ol.sphere.getLength(feature.getGeometry()))
.reduce((a, b) => a + b, 0);
});
const color = dateToColor(new Date(upload.date * 1000));
const lineDash = upload.date * 1000 > Date.now() ? [3, 6] : undefined;
const color = dateToColor(new Date(track.date * 1000));
const lineDash = track.date * 1000 > Date.now() ? [3, 6] : undefined;
const layer = new ol.layer.VectorImage({
source: source,
style: feature => feature.getGeometry().getType() === "MultiLineString"
@ -93,8 +92,8 @@ window.addEventListener("load", () => {
overlays: [overlay],
target: divMap,
view: new ol.View({
center: ol.proj.fromLonLat([data.longitude, data.latitude]),
zoom: data.zoom
center: ol.proj.fromLonLat([dataset.longitude, dataset.latitude]),
zoom: dataset.zoom
})
});
@ -112,7 +111,7 @@ window.addEventListener("load", () => {
+
new Date(object.date * 1000).toLocaleString(undefined, {year: "numeric", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit"})
+
(object.length !== undefined ? ", " + (object.length / 1000).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "km" : "")
(object.distance !== undefined ? ", " + (object.distance / 1000).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "km" : "")
);
return a;
})()
@ -121,32 +120,32 @@ window.addEventListener("load", () => {
return li;
};
const foundEntries = [];
const foundUploads = [];
const foundArticles = [];
const foundTracks = [];
map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
const id = feature.getId();
if (id !== undefined) {
foundEntries.push(id);
foundArticles.push(id);
} else {
const url = layer.getSource().getUrl();
const id = uploads.findIndex(upload => upload.url === url);
foundUploads.push(id);
const id = tracks.findIndex(track => track.url === url);
foundTracks.push(id);
}
}, {hitTolerance: 10});
foundEntries.sort((x, y) => x - y);
foundUploads.sort((x, y) => x - y);
foundArticles.sort();
foundTracks.sort();
if (foundEntries.length || foundUploads.length) {
if (foundArticles.length || foundTracks.length) {
const initUl = title => {
const ul = document.createElement("ul");
ul.setAttribute("data-title", title);
return ul;
};
const ulEntries = foundEntries.map(x => makeItem(entries[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Blogs"));
const ulUploads = foundUploads.map(x => makeItem(uploads[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Downloads"));
popup.innerHTML = (foundEntries.length ? ulEntries.outerHTML : "") + (foundUploads.length ? ulUploads.outerHTML : "");
overlay.setPosition(foundEntries.length ? ol.proj.fromLonLat(
[0, 1].map(latLon => foundEntries.map(x => entries[x].pos[latLon]).reduce((x, y) => x + y, 0) / foundEntries.length)
const ulArticles = foundArticles.map(x => makeItem(articles[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Articles"));
const ulTracks = foundTracks.map(x => makeItem(tracks[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Tracks"));
popup.innerHTML = (foundArticles.length ? ulArticles.outerHTML : "") + (foundTracks.length ? ulTracks.outerHTML : "");
overlay.setPosition(foundArticles.length ? ol.proj.fromLonLat(
[0, 1].map(latLon => foundArticles.map(x => articles[x].location[latLon]).reduce((x, y) => x + y, 0) / foundArticles.length)
) : event.coordinate);
} else {
overlay.setPosition(undefined);
@ -158,8 +157,8 @@ window.addEventListener("load", () => {
divMap.style.cursor = hit ? "pointer" : "";
});
map.on("rendercomplete", event => {
const distance = uploads.map(u => u.length).reduce((a, b) => a + b, 0);
document.querySelectorAll("span.distance-counter[data-category=\"" + data.category + "\"]").forEach(span => {
const distance = tracks.map(track => track.distance).reduce((a, b) => a + b, 0);
document.querySelectorAll("span.distance-counter[data-category=\"" + dataset.category + "\"]").forEach(span => {
span.innerHTML = (distance / 1000).toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 0});
});
});