Teyvat Borders

README.md

Teyvat Borders

A userscript to add subregional borders in Teyvat Interactive Map

How to install

You need either TamperMonkey or ViolentMonkey to use this.

Click to Install

Preview

Credits

Thiophen for the reference.

6.0 Teyvat Borders SVG

teyvat-borders.user.js

// ==UserScript==
// @name        Teyvat Borders
// @namespace   https://gist.github.com/atouu/4634e073e235db6a4748518fcf0d653f
// @match       https://act.hoyolab.com/ys/app/interactive-map*
// @grant       unsafeWindow
// @version     1.2.4
// @author      atouu, Thiophen
// @description 9/28/2024, 3:31:27 PM
//
// @downloadURL https://gist.github.com/atouu/4634e073e235db6a4748518fcf0d653f/raw/teyvat-borders.user.js
// @updateURL   https://gist.github.com/atouu/4634e073e235db6a4748518fcf0d653f/raw/teyvat-borders.user.js
// ==/UserScript==

const observer = new MutationObserver(() => {
  const container = document.querySelector(".mhy-map-container")

  if (!container) return

  observer.disconnect();

  container.__vue__.$watch("loading", loading => {
    if (loading || container.__vue__.mapData.id != 2) return

    const gis = container.__vue__.$refs.mhyMap

    const newIcon = createIcon(gis.map.getZoom())

    const marker = unsafeWindow.L.marker({
      lat: 3240,
      lng: -5787
    }, {
      icon: newIcon,
      pane: "overlayPane"
    });

    marker.addTo(gis.map);

    gis.map.on("zoomend", function () {
      const refreshIcon = createIcon(gis.map.getZoom())
      marker.setIcon(refreshIcon);
    });
  })
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

function createIcon(zoom) {
  const borderSize = [21197 / Math.pow(2, 0 - zoom), 12375 / Math.pow(2, 0 - zoom)]
  const icon = unsafeWindow.L.icon({
    iconUrl: "https://gist.github.com/user-attachments/assets/8aabdf31-e53a-4f8a-9924-cdd22acd1185",
    iconSize: borderSize,
    iconAnchor: borderSize.map(s => s / 2)
  });
  return icon
}