Greasy Fork is available in English.

WME GeoPortal Overlay DACH Beta

Waze Geoportal Overlay für Deutschland, Österreich und Schweiz

// ==UserScript==
// @name         WME GeoPortal Overlay DACH Beta
// @namespace    https://greasyfork.org/de/users/863740-horst-wittlich
// @version      2024.07.13
// @description  Waze Geoportal Overlay für Deutschland, Österreich und Schweiz
// @author       vertexcode, hiwi234, SaiCode
// @include      /^https:\/\/(www|beta)\.waze\.com\/(?!user\/)(.{2,6}\/)?editor\/?.*$/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=waze.com
// @grant        GM_xmlhttpRequest
// @grant        GM_info
// @grant        GM_addStyle
// @license      MIT

// ==/UserScript==

/*global I18n, $, W, OpenLayers*/

/* globals OpenLayers: true */
// Versions Format
// yyyy.mm.dd

DEFAULT_SOURCES = {
  de: {
    name: "GeoOverlays DE",
    flag: "🇩🇪",
    enabled: true,
    layers: [
      {
        name: "Basemap DE",
        enabled: true,
        active: false,
        unique: "__DrawBasemapDE",
        type: "WMTS",
        source:
          "https://sgx.geodatenzentrum.de/wmts_basemapde/1.0.0/WMTSCapabilities.xml",
        layerName: "de_basemapde_web_raster_farbe",
        matrixSet: "GLOBAL_WEBMERCATOR",
      },
      {
        name: "GeoDatenZentrum DE",
        enabled: true,
        active: false,
        unique: "__DrawGeoPortalDE",
        type: "WMTS",
        source:
          "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
        layerName: "web",
        matrixSet: "WEBMERCATOR",
      },
      {
        name: "GeoPortal BW",
        enabled: true,
        active: false,
        unique: "__DrawGeoPortalBW",
        type: "WMTS",
        source:
          "https://owsproxy.lgl-bw.de/owsproxy/ows/WMTS_LGL-BW_Basiskarte?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities&user=ZentrKomp&password=viewerprod",
        layerName: "Basiskarte",
        matrixSet: "GoogleMapsCompatible",
      },
      {
        name: "GeoPortal NRW",
        enabled: true,
        active: false,
        unique: "__DrawGeoPortalNRW",
        type: "WMTS",
        source:
          "https://www.wmts.nrw.de/geobasis/wmts_nw_dtk/1.0.0/WMTSCapabilities.xml",
        layerName: "nw_dtk_col",
        matrixSet: "EPSG_3857_16",
      },
      {
        name: "GeoPortal NRW Overlay",
        enabled: true,
        active: false,
        unique: "__DrawGeoPortalNRWOverlay",
        type: "WMTS",
        source:
          "https://www.wmts.nrw.de/geobasis/wmts_nw_dop_overlay/1.0.0/WMTSCapabilities.xml",
        layerName: "nw_dop_overlay",
        matrixSet: "EPSG_3857_16",
        opacity: 1,
      },
      {
        name: "GeoPortal BY",
        enabled: true,
        active: false,
        unique: "__DrawGeoPortalBY",
        type: "WMTS",
        source:
          "https://geoservices.bayern.de/od/wmts/geobasis/v1/1.0.0/WMTSCapabilities.xml",
        layerName: "by_webkarte",
        matrixSet: "smerc",
      },
    ],
  },
  at: {
    name: "GeoOverlays AT",
    flag: "🇦🇹",
    enabled: true,
    layers: [
      {
        name: "Basemap AT",
        enabled: true,
        active: false,
        unique: "__DrawBasemapAT",
        type: "WMTS",
        source:
          "https://mapsneu.wien.gv.at/basemapneu/1.0.0/WMTSCapabilities.xml",
        layerName: "geolandbasemap",
        matrixSet: "google3857",
      },
      {
        name: "Overlay AT",
        enabled: true,
        active: false,
        unique: "__DrawOverlayAT",
        type: "WMTS",
        source: "https://www.basemap.at/wmts/1.0.0/WMTSCapabilities.xml",
        layerName: "bmapoverlay",
        matrixSet: "google3857",
      },
    ],
  },
  ch: {
    name: "GeoOverlays CH",
    flag: "🇨🇭",
    enabled: true,
    layers: [
      {
        name: "Strassenkarte",
        enabled: true,
        active: false,
        unique: "__DrawSwissTopoStrassenkarte",
        type: "WMTS",
        source:
          "https://wmts.geo.admin.ch/EPSG/3857/1.0.0/WMTSCapabilities.xml",
        layerName: "ch.swisstopo.swisstne-base",
        matrixSet: "3857_18",
      },
      {
        name: "Basisnetz",
        enabled: true,
        active: false,
        unique: "__DrawSwissBasisnetz",
        type: "WMTS",
        source:
          "https://wmts.geo.admin.ch/EPSG/3857/1.0.0/WMTSCapabilities.xml",
        layerName: "ch.swisstopo.swisstlm3d-strassen",
        matrixSet: "3857_18",
      },
      {
        name: "Luftbild",
        enabled: true,
        active: false,
        unique: "__DrawSwissTopoLuftbild",
        type: "WMTS",
        source:
          "https://wmts.geo.admin.ch/EPSG/3857/1.0.0/WMTSCapabilities.xml",
        layerName: "ch.swisstopo.swissimage-product",
        matrixSet: "3857_20",
      },
    ],
  },
};

(() => {
  let uOpenLayers;
  let uWaze;

  let shiftPressed = false;

  let opacity = localStorage.getItem("geoportal_opacity") || 0.5;

  if (isNaN(opacity)) {
    opacity = 0.5;
  }

  //check if opacity is in a valid range
  if (opacity < 0 || opacity > 1) {
    opacity = 0.5;
  }

  // Define WMTS Layers


  const layersList = [];

  let sources = loadSettings();

  /**
   * Define WMTS/WMS Layers. Hide this function for better readability
   */
  function geoportal_init() {
    const layerControl = $(".layer-switcher").find(".list-unstyled.togglers");
    if (layerControl.length) {
      console.info(`Loading Geoportal Layers...`);
      $.each(sources, function (key, country) {
        const controlEntry = `
        <li class="group layer-toggle-${country.flag}" style="${
          country.enabled ? "" : "display: none;"
        }">
          <div class="layer-switcher-toggler-tree-category">
            <wz-button class="expand-country-${key}" color="clear-icon" size="xs">
              <i class="toggle-category w-icon w-icon-caret-down"></i>
            </wz-button>
            <label class="label-text" for="layer-switcher-group_overlay">
              ${country.name}
            </label>
          </div>
          <ul class="collapsible-GROUP_OVERLAY ${key}"></ul>
        </li>
        `;
        // append the control entry as the second last entry
        layerControl.children().eq(-1).before(controlEntry);
        //make the caret clickable
        $(`.expand-country-${key}`).on("click", function () {
          $(`.collapsible-GROUP_OVERLAY.${key}`).toggle();
          //rotate the caret transform: rotate(90deg);
          if ($(this).find("i").css("transform") === "none") {
            $(this).find("i").css("transform", "rotate(-90deg)");
          } else {
            $(this).find("i").css("transform", "");
          }
        });
        country_init(key, country.layers, country.flag);
      });
    }
  }

  /**
   * Initialize the country layers
   * @param {string} country
   * @param {Array} layers
   * @param {string} flag
   */
  function country_init(country, layers, flag) {
    let overlayGroup = $(`ul.collapsible-GROUP_OVERLAY.${country}`);
    $.each(layers, function (index, source) {
      // Make and add layer
      GM.xmlHttpRequest({
        method: "GET",
        url: source.source,
        onload: (response) => {
          var responseXML = response.responseXML;
          // Inject responseXML into existing Object (only appropriate for XML content).
          if (!response.responseXML) {
            responseXML = new DOMParser().parseFromString(
              response.responseText,
              "text/xml"
            );
          }
          //if responseXML is not a XML document, cancel the loading
          if (!responseXML || responseXML instanceof XMLDocument === false) {
            console.error(
              `Failed to load ${flag} Layer ${index + 1}/${layers.length}: ${
                source.name
              }`
            );
            return;
          }

          //chec if WMST or WMTS and load the correct format
          if (source.type === "WMTS") {
            var format = new OpenLayers.Format.WMTSCapabilities();
            var doc = responseXML;
            var capabilities = format.read(doc);
            layersList[source.unique] = format.createLayer(capabilities, {
              layer: source.layerName,
              matrixSet: source.matrixSet,
              opacity: source.opacity ?? opacity,
              isBaseLayer: false,
              requestEncoding: source.requestEncoding ?? "REST",
              visibility: source.active,
            });
          } else if (source.type === "WMS") {
            var format = new OpenLayers.Format.WMSCapabilities();
            var doc = responseXML;
            var capabilities = format.read(doc);

            // Find the specific layer by its name
            var wmsLayer = capabilities.capability.layers.find(
              (layer) => layer.name === source.layerName
            );

            if (wmsLayer) {
              console.log(wmsLayer);
              layersList[source.unique] = new OpenLayers.Layer.Tile({
                source: new OpenLayers.Source.TileWMS({
                  url: wmsLayer.url,
                  params: {
                    LAYERS: wmsLayer.name,
                    FORMAT: "image/png",
                  },
                }),
                name: source.name,
                opacity: source.opacity ?? opacity,
                isBaseLayer: false,
                visibility: false,
              });
              JSON.stringify(result, null, 2);
              console.log(wmsLayer.url);
            } else {
              console.error(
                `Layer ${source.layerName} not found in WMS capabilities for ${flag} ${source.name}`
              );
              return;
            }
          }

          uWaze.map.addLayer(layersList[source.unique]);
          uWaze.map.setLayerIndex(layersList[source.unique], 3);

          //check for errors
          if (!layersList[source.unique]) {
            console.error(
              `Failed to load ${flag} Layer ${index + 1}/${layers.length}: ${
                source.name
              }`
            );
            return;
          }
          if (!layersList[source.unique].url.length) {
            console.error(
              `Failed to load ${flag} Layer ${index + 1}/${layers.length}: ${
                source.name
              }. No URL found in capabilities.`
            );
            console.log(layersList[source.unique]);
            return;
          }

          console.debug(layersList[source.unique].url);

          // Make checkbox and add to the section
          let toggleEntry = $("<li></li>");
          let checkbox = $("<wz-checkbox></wz-checkbox>", {
            id: source.unique,
            class: "hydrated",
            checked: layersList[source.unique].getVisibility(),
            text: source.name,
          });

          toggleEntry.append(checkbox).toggle(source.enabled);
          overlayGroup.append(toggleEntry);

          checkbox.on("click", function (e) {
            layersList[source.unique].setVisibility(e.target.checked);
            sources[country].layers[index].active = e.target.checked;
            saveSettings();
          });

          console.log(
            `${flag} Layer ${index + 1}/${layers.length}: ${source.name} loaded`
          );
        },
        onerror: (response) => {
          console.error(
            `Failed to load ${flag} Layer ${index + 1}/${layers.length}: ${
              source.name
            }`
          );
        },
        ontimeout: (response) => {
          console.error(
            `Request to ${flag} Layer ${index + 1}/${layers.length}: ${
              source.name
            } timed out`
          );
        },
      });
    });
  }

  /**
   * Initialize the UI
   * @returns {void}
   */
  function ui_init() {
    //Add a Opacity control to the map controls
    const controlContainer = $(".overlay-buttons-container.bottom").first();
    //check if the opacity control already exists
    if (controlContainer.find(".opacity-control-container").length) {
      return;
    }

    const opacityControl = $(`
    <div class="opacity-control-container">
    <wz-basic-tooltip class="sc-wz-basic-tooltip-h sc-wz-basic-tooltip-s">
        <wz-tooltip class="sc-wz-basic-tooltip sc-wz-basic-tooltip-s">
            <wz-tooltip-source class="sc-wz-tooltip-source-h sc-wz-tooltip-source-s">
                <wz-button color="clear-icon" class="opacity-button opacity-plus">
                  <wz-tooltip-target class="sc-wz-tooltip-target-h sc-wz-tooltip-target-s">
                  </wz-tooltip-target><i class="w-icon w-icon-eye-fill"></i>
                </wz-button>
            </wz-tooltip-source>
            <wz-tooltip-content position="left">
                <span> Increase Opacity </span>
            </wz-tooltip-content>
        </wz-tooltip>
    </wz-basic-tooltip>
    <wz-basic-tooltip class="sc-wz-basic-tooltip-h sc-wz-basic-tooltip-s">
        <wz-tooltip class="sc-wz-basic-tooltip sc-wz-basic-tooltip-s">
            <wz-tooltip-source class="sc-wz-tooltip-source-h sc-wz-tooltip-source-s">
                <wz-button color="clear-icon" disabled="false" class="opacity-button opacity-minus">
                  <wz-tooltip-target class="sc-wz-tooltip-target-h sc-wz-tooltip-target-s">
                  </wz-tooltip-target><i class="w-icon w-icon-eye2"></i>
                </wz-button>
            </wz-tooltip-source>
            <wz-tooltip-content position="left">
                <span> Decrease Opacity </span>
            </wz-tooltip-content>
        </wz-tooltip>
    </wz-basic-tooltip>
    </div>
    `);
    controlContainer.append(opacityControl);

    //check if control is pressed an update the value
    $(document).on("keydown", function (e) {
      if (e.key == "Shift") {
        shiftPressed = true;
      }
    });

    $(document).on("keyup", function (e) {
      if (e.key == "Shift") {
        shiftPressed = false;
      }
    });

    // Add event listeners to the opacity control
    $(".opacity-plus").on("click", function () {
      if (shiftPressed) {
        opacity = 1;
      } else {
        opacity = Math.min(opacity + 0.1, 1);
      }
      localStorage.setItem("geoportal_opacity", opacity);

      $.each(sources, function (index, source) {
        source.layers.forEach((source) => {
          try {
            layersList[source.unique].setOpacity(opacity);
          } catch (e) {
            console.error(`Failed to set opacity for ${source.name}`);
            return;
          }
        });
      });
    });

    $(".opacity-minus").on("click", function () {
      if (shiftPressed) {
        opacity = 0;
      } else {
        opacity = Math.max(opacity - 0.1, 0);
      }
      localStorage.setItem("geoportal_opacity", opacity);
      $.each(sources, function (index, source) {
        source.layers.forEach((source) => {
          try {
            layersList[source.unique].setOpacity(opacity);
          } catch (e) {
            console.error(`Failed to set opacity for ${source.name}`);
            return;
          }
        });
      });
    });

    //check every 10 seconds if the opacity control is still there
    setInterval(() => {
      if (
        !$(".overlay-buttons-container.bottom")
          .first()
          .find(".opacity-control-container").length
      ) {
        console.log("Opacity control not found, re-adding...");
        $(".overlay-buttons-container.bottom").first().append(opacityControl);
      }
    }, 10000);

    //add a mutation observer to check if the opacity control is removed
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (!mutation.addedNodes.length) {
          return;
        }
        mutation.addedNodes.forEach((node) => {
          if (node.id === "overlay-buttons") {
            $(".overlay-buttons-container.bottom")
              .first()
              .append(opacityControl);
          }
        });
      });
    });

    observer.observe($("#overlay-buttons-region").get(0), {
      childList: true,
    });
  }

  /**
   * Initialize the settings
   */
  async function settings_init() {
    const { tabLabel, tabPane } =
      W.userscripts.registerSidebarTab("geoportal-dach");

    tabLabel.innerText = "🌍 Geoportal";
    tabLabel.title = "Geoportal DACH";

    tabPane.innerHTML = `
  <div class="geoportal-settings">
    <h1>Settings</h1>
    <div class="geoportal-countrys">
      <div v-for="country in countries" :key="country">
        <input type="checkbox" :id="country" v-model="layers[country].enabled" @change="updateCountry" />
        <label :for="country" class="countyname">{{ layers[country].flag }} {{ layers[country].name }}</label>
        <ul class="geoportal-layers" v-if="layers[country].enabled">
          <li v-for="layer in layers[country].layers" :key="layer.unique">
            <input type="checkbox" :id="layer.unique" v-model="layer.enabled" @change="updateLayer" />
            <label :for="layer.unique">{{ layer.name }}</label>
          </li>
        </ul>
    </div>
  </div>
  `;

    await W.userscripts.waitForElementConnected(tabPane);

    //check if Vue.js is already loaded
    while (typeof Vue === "undefined") {
      await new Promise((resolve) => setTimeout(resolve, 500));
    }
    //initialize Vue.js
    const { createApp, ref } = Vue;
    createApp({
      setup() {
        const countries = ref(Object.keys(sources));
        const layers = ref(sources);

        return { countries, layers };
      },
      methods: {
        updateCountry(event) {
          //hide the layers if the country is disabled
          if (!event.target.checked) {
            sources[event.target.id].layers.forEach((layer) => {
              layersList[layer.unique].setVisibility(false);
            });
          } else {
            sources[event.target.id].layers.forEach((layer) => {
              layersList[layer.unique].setVisibility(layer.active);
            });
          }
          $(`.layer-toggle-${this.layers[event.target.id].flag}`).toggle(
            event.target.checked
          );
          saveSettings();
        },
        updateLayer(event) {
          layersList[event.target.id].setVisibility(event.target.checked);
          $(`li wz-checkbox#${event.target.id}`).toggle(
            event.target.checked
          ).prop("checked", event.target.checked);
          saveSettings();
        },
      },
    }).mount(tabPane);
  }

  /**
   * Load the settings from localStorage
   * @returns {Object} sources
   */
  function loadSettings() {
    try {
      const savedSources = JSON.parse(
        localStorage.getItem("geoportal_sources")
      );

      if (!savedSources || typeof savedSources !== "object") {
        return DEFAULT_SOURCES;
      }

      // Check if each key in savedSources matches the keys in DEFAULT_SOURCES
      for (const key in savedSources) {
        const savedSource = savedSources[key];

        // Check if the structure of savedSource matches the structure of defaultSource
        if (
          typeof savedSource.name !== "string" ||
          typeof savedSource.flag !== "string" ||
          !Array.isArray(savedSource.layers)
        ) {
          throw new Error("Invalid country format");
        }
        savedSource.enabled = savedSource.enabled ?? true;

        for (const layer of savedSource.layers) {
          if (
            typeof layer.name !== "string" ||
            typeof layer.unique !== "string" ||
            typeof layer.type !== "string" ||
            typeof layer.source !== "string" ||
            typeof layer.layerName !== "string" ||
            typeof layer.matrixSet !== "string"
          ) {
            throw new Error("Invalid layer format");
          }
          layer.enabled = layer.enabled ?? true;
          layer.active = layer.active ?? false;
        }
      }
      // If all checks passed, use savedSources
      return savedSources;
    } catch (error) {
      // If any check fails, log the error and use DEFAULT_SOURCES
      console.error(error.message);
      return DEFAULT_SOURCES;
    }
  }

  /**
   * Save the settings to localStorage
   */
  async function saveSettings() {
    localStorage.setItem("geoportal_sources", JSON.stringify(sources));
  }

  /**
   * Bootstrap the Geoportal Overlays
   */
  function geoportal_bootstrap() {
    uWaze = unsafeWindow.W;
    uOpenLayers = unsafeWindow.OpenLayers;
    if (
      !uOpenLayers ||
      !uWaze ||
      !uWaze.map ||
      !document.querySelector(".list-unstyled.togglers .group")
    ) {
      setTimeout(geoportal_bootstrap, 500);
    } else {
      console.log("Loading Geoportal Maps...");
      settings_init();
      geoportal_init();
      ui_init();
    }
  }

  /**
   * Patch OpenLayers to fix missing features
   * @returns {void}
   */
  async function patchOpenLayers() {
    console.groupCollapsed("WME Geometries: Patching missing features...");
    if (!OpenLayers.VERSION_NUMBER.match(/^Release [0-9.]*$/)) {
      console.error(
        "WME Geometries: OpenLayers version mismatch (" +
          OpenLayers.VERSION_NUMBER +
          ") - cannot apply patch"
      );
      return;
    }
    loadOLScript("lib/OpenLayers/Format/XML");
    loadOLScript("lib/OpenLayers/Format/XML/VersionedOGC");
    loadOLScript("lib/OpenLayers/Layer/WMTS");
    loadOLScript("lib/OpenLayers/Layer/Tile");
    loadOLScript("lib/OpenLayers/Format/OWSCommon");
    loadOLScript("lib/OpenLayers/Format/OWSCommon/v1");
    loadOLScript("lib/OpenLayers/Format/OWSCommon/v1_1_0");
    loadOLScript("lib/OpenLayers/Format/WMSCapabilities");
    loadOLScript("lib/OpenLayers/Format/WMSCapabilities/v1");
    loadOLScript("lib/OpenLayers/Format/WMSCapabilities/v1_3");
    loadOLScript("lib/OpenLayers/Format/WMSCapabilities/v1_3_0");
    loadOLScript("lib/OpenLayers/Format/WMTSCapabilities");
    loadOLScript("lib/OpenLayers/Format/WMTSCapabilities/v1_0_0");

    console.groupEnd();
  }

  /**
   * Load OpenLayers script from CDN
   * @param {string} filename
   */
  function loadOLScript(filename) {
    var version = OpenLayers.VERSION_NUMBER.replace(/Release /, "");
    console.info("Loading openlayers/" + version + "/" + filename + ".js");

    var openlayers = document.createElement("script");
    openlayers.src =
      "https://cdnjs.cloudflare.com/ajax/libs/openlayers/" +
      version +
      "/" +
      filename +
      ".js";
    openlayers.type = "text/javascript";
    openlayers.async = false;
    document.head.appendChild(openlayers);
  }

  function loadVueJS() {
    //check if Vue.js is already loaded
    if (typeof Vue !== "undefined") {
      return;
    }
    console.log("Loading Vue.js");
    var vuejs = document.createElement("script");
    vuejs.src = "https://unpkg.com/vue@3/dist/vue.global.js";
    document.head.appendChild(vuejs);
  }

  loadVueJS();
  patchOpenLayers();
  geoportal_bootstrap();
})();

GM_addStyle(`

  .opacity-control-container {
    align-items: center;
    background: var(--background_default);
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .overlay-buttons-container.bottom {
    bottom: 42px;
  }

  .geoportal-settings {
    padding: 10px;
    user-select: none;
  }

  .geoportal-settings label {
    margin-left: 6px;
  }

`);