OpenStreetMap GPX Overlay

Overlay and display GPX files (tracks, routes, waypoints) on the OpenStreetMap website. Add files by clicking the sidebar button or ny dragging them onto the map. Clear all files by right-clicking the sidebar button or reloading the site.
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name        OpenStreetMap GPX Overlay
// @namespace   Violentmonkey Scripts
// @match       *://www.openstreetmap.org/*
// @version     1.4
// @author      CyrilSLi
// @description Overlay and display GPX files (tracks, routes, waypoints) on the OpenStreetMap website. Add files by clicking the sidebar button or ny dragging them onto the map. Clear all files by right-clicking the sidebar button or reloading the site.
// @license     MIT
// @require     https://update.gf.qytechs.cn/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;
var gpxLayers;

function prevent(ev) {
    ev.preventDefault();
    ev.stopPropagation();
}
function showFile(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(gpxLayers);
        });
        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(gpxLayers).bindPopup(txt.value);
        });
    });
    reader.readAsText(file, "UTF-8");
}
function buttonAdd(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(showFile));
    input.click();
}
function dragAdd(ev) {
    prevent(ev);
    [...ev.dataTransfer.files].forEach(showFile);
}
function clearFiles(ev) {
    prevent(ev);
    gpxLayers.clearLayers();
}

window.addEventListener("load", () => {
    if (!unsafeWindow.userscriptMap) {
        return;
    }
    gpxLayers = L.layerGroup().addTo(unsafeWindow.userscriptMap);
    keyButton = document.getElementsByClassName("control-legend")[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", buttonAdd);
    gpxButton.children[0].addEventListener("contextmenu", clearFiles);
    const mapEl = document.getElementById("map");
    mapEl.addEventListener("dragover", prevent);
    mapEl.addEventListener("drop", dragAdd);
});
欢迎访问Greasy Fork镜像
