Internet Roadtrip Minimap tricks

Provide some bonus options for the Internet Roadtrip minimap.
当前为 2025-05-21 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Internet Roadtrip Minimap tricks
// @namespace   jdranczewski.github.io
// @match       https://neal.fun/*
// @version     0.1.0
// @author      jdranczewski
// @description Provide some bonus options for the Internet Roadtrip minimap.
// @license     MIT
// @run-at      document-end
// @require     https://cdn.jsdelivr.net/npm/[email protected]
// ==/UserScript==

(async function() {
    // Get map methods
    const map = await IRF.vdom.map;
    const mapMethods = map.methods;

    // Fly to a location
    let first_fly = true;
    const zoom_subscription = map.data.map.on("moveend", () => {
        console.log("Zoom ended");
        if (Math.abs(map.data.map.getZoom() - 12.5) < 0.2) {
            first_fly = false;
            zoom_subscription.unsubscribe();
        }
    })
    function flyTo(map, coords) {
        args = {
            center: [
                coords[1],
                coords[0]
            ],
            essential: !0
        }
        if (first_fly) {
            args["zoom"] = 12.5;
        }
        map.flyTo(args)
    }

	// Proxy the map resetting
	(await IRF.vdom.map).state.flyTo = new Proxy(mapMethods.flyTo, {
		apply: (target, thisArg, args) => {
			Date.now() - thisArg.lastUserInteraction > 30000 &&
            flyTo(thisArg.map, args)
		},
	});

    class TricksControl {
        constructor() {
            this._container = document.createElement('div');
        }
        
        onAdd(map) {
            this._map = map;
            this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
            return this._container;
        }

        onRemove() {
            this._container.parentNode.removeChild(this._container);
            this._map = undefined;
        }

        addButton(icon, callback) {
            let button = document.createElement("button");
            let button_icon = document.createElement("span");
            button_icon.className = "maplibregl-ctrl-icon";
            button_icon.style.backgroundImage = `url("${icon}")`;
            button_icon.style.backgroundSize = "contain";
            button.appendChild(button_icon);
            button.onclick = callback;
            this._container.appendChild(button);
        }
    }

    // Define map controls
    let control = new TricksControl();

    control.addButton(
        "https://storage.googleapis.com/support-kms-prod/SNP_E2308F5561BE1525D2C88838252137BC5634_4353424_en_v0",
        async () => {
            let data = (await IRF.vdom.container).data;
            // URL pattern from https://roadtrip.pikarocks.dev/
            const url = (
                "https://www.google.com/maps/@?api=1&map_action=pano" +
                `&viewpoint=${data.currentCoords.lat},${data.currentCoords.lng}` +
                `&pano=${data.currentPano}&heading=${data.currentHeading}` +
                "&fov=90"
            )
		    window.open(url, "_blank")
        }
    );

    control.addButton(
        "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E",
        async () => {
            let coords = (await IRF.vdom.container).data.currentCoords;
            flyTo(
                map.data.map,
                [coords.lat, coords.lng]
            )
        }
    );

    map.data.map.addControl(control, "bottom-left");

    // Expand the map by default
    map.state.isExpanded = true;

})();