Raw Source Toggle Dropdown

• Minified Source

xsanda / Strava custom map with railway lines

// ==UserScript==
// @name     Strava custom map with railway lines
// @version  0.1
// @grant    none
// @include  https://www.strava.com/routes/new*
// @include https://www.strava.com/routes/*/edit*
// @require https://openuserjs.org/src/libs/xsanda/Run_code_as_client.js
// @license MIT
// ==/UserScript==

runAsClient(() => {
  const railStyles = [
    {
      minzoom: 12,
      layout: {},
      metadata: { "mapbox:group": "ceead71cd4ae6d2bbb8924b672540aba" },
      filter: [
        "all",
        ["match", ["get", "class"], ["major_rail"], true, false],
        ["match", ["get", "structure"], ["tunnel"], false, true],
      ],
      type: "line",
      source: "composite",
      id: "rail",
      paint: { "line-color": "hsla(0, 0%, 75%, 0.5)" },
      "source-layer": "road",
      before: "bridge-steps",
    },
    {
      minzoom: 12,
      layout: {},
      metadata: { "mapbox:group": "ceead71cd4ae6d2bbb8924b672540aba" },
      filter: [
        "all",
        ["match", ["get", "class"], ["major_rail"], true, false],
        ["match", ["get", "structure"], ["tunnel"], false, true],
      ],
      type: "line",
      source: "composite",
      id: "rail tracks",
      paint: {
        "line-color": "hsla(0, 0%, 75%, 0.5)",
        "line-dasharray": [0.1, 15],
        "line-width": 4,
      },
      "source-layer": "road",
      before: "bridge-steps",
    },
  ];

  const waitFor = (f, freq = 1000) =>
    new Promise((resolve) => {
      const interval = setInterval(() => {
        const result = f();
        if (result !== undefined) {
          clearInterval(interval);
          resolve(result);
        }
      }, freq);
    });

  (async () => {
    const mapInstancePromise = waitFor(() => {
      const mapElem = document.querySelector(".mapboxgl-map");
      if (!mapElem) return;
      const [key, reactElement] = Object.entries(mapElem).find(([key]) => /^__reactInternalInstance/.test(key)) ?? [];
      return reactElement.memoizedProps?.children?.props?.value?.map;
    });
    const mapInstance = await mapInstancePromise;
    window.map = mapInstance;

    for (const { before, ...layer } of railStyles) {
      mapInstance.addLayer(layer, before);
    }
  })().catch(console.error);
});