Overlay GPX files on the OpenStreetMap website
当前为
// ==UserScript==
// @name OpenStreetMap GPX Overlay
// @namespace Violentmonkey Scripts
// @match *://www.openstreetmap.org/*
// @version 1.1
// @author CyrilSLi
// @description Overlay GPX files on the OpenStreetMap website
// @license MIT
// @require https://update.greasyfork.org/scripts/533461/1574689/Get%20OpenStreetMap%20Leaflet%20object.js
// @require https://cdn.jsdelivr.net/npm/@jitbit/htmlsanitizer@2/HtmlSanitizer.min.js
// @require https://cdn.jsdelivr.net/npm/gpxparser@3/dist/GPXParser.min.js
// ==/UserScript==
// https://github.com/gpxstudio/gpx.studio/blob/306ed2ae0e2ab46f32eadcc9d38c441c219cf428/website/src/lib/components/gpx-layer/GPXLayer.ts#L27
const colors = [
'#ff0000',
'#0000ff',
'#46e646',
'#00ccff',
'#ff9900',
'#ff00ff',
'#ffff32',
'#288228',
'#9933ff',
'#50f0be',
'#8c645a',
];
var colorIndex = 0;
function addFiles(ev) {
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", ".gpx");
input.setAttribute("multiple", "");
input.addEventListener("change", (ev) => {
[...ev.target.files].forEach((file) => {
if (!file.name.toLowerCase().endsWith(".gpx")) {
return;
}
const reader = new FileReader();
reader.addEventListener("load", (ev) => {
const gpx = new gpxParser();
gpx.parse(ev.target.result);
gpx.tracks.concat(gpx.routes).forEach((line) => {
L.polyline(line.points.map((point) => [point.lat, point.lon]), {
weight: 5,
color: colors[colorIndex++ % colors.length]
}).addTo(unsafeWindow.userscriptMap);
});
gpx.waypoints.forEach((wpt) => {
txt = document.createElement("textarea");
txt.innerHTML = HtmlSanitizer.SanitizeHtml(wpt.name ?? "") +
((wpt.name != null && wpt.desc != null) ? "<br>" : "") +
HtmlSanitizer.SanitizeHtml(wpt.desc ?? "");
L.marker([wpt.lat, wpt.lon], {title: wpt.name ?? ""}).addTo(unsafeWindow.userscriptMap).bindPopup(txt.value);
});
});
reader.readAsText(file, "UTF-8");
});
});
input.click();
}
window.addEventListener("load", () => {
if (!unsafeWindow.userscriptMap) {
return;
}
keyButton = document.getElementsByClassName("control-key")[0];
gpxButton = keyButton.cloneNode(true);
keyButton.parentNode.insertBefore(gpxButton, keyButton.nextSibling);
keyButton.children[0].click();
keyButton.children[0].click();
gpxButton.classList.remove("control-key");
gpxButton.children[0].setAttribute("data-bs-original-title", "Overlay GPX");
gpxButton.children[0].classList.remove("disabled");
gpxButton.children[0].style.padding = "10px";
gpxButton.children[0].innerHTML = `<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#ffffff" fill-rule="evenodd" d="M11.291 21.706 12 21l-.709.706zM12 21l.708.706a1 1 0 0 1-1.417 0l-.006-.007-.017-.017-.062-.063a47.708 47.708 0 0 1-1.04-1.106 49.562 49.562 0 0 1-2.456-2.908c-.892-1.15-1.804-2.45-2.497-3.734C4.535 12.612 4 11.248 4 10c0-4.539 3.592-8 8-8 4.408 0 8 3.461 8 8 0 1.248-.535 2.612-1.213 3.87-.693 1.286-1.604 2.585-2.497 3.735a49.583 49.583 0 0 1-3.496 4.014l-.062.063-.017.017-.006.006L12 21zm0-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" clip-rule="evenodd"/></svg>`;
gpxButton.children[0].addEventListener("click", addFiles);
});