☰

WME Zoom Level Indicator

Adds a zoom level indicator between plus and minus zoom buttons.

// ==UserScript==
// @name            WME Zoom Level Indicator
// @name:es         WME Indicador de Nivel de Zoom
// @description     Adds a zoom level indicator between plus and minus zoom buttons.
// @description:es  Agrega un indicador de nivel de zoom en medio de los botones de aumentar y disminuir el zoom.

// @namespace       https://greasyfork.org/en/users/670818-edward-navarro
// @version         2022.11.17.01

// @author          EdwardNavarro
// @include         https://www.waze.com/editor*
// @include         https://www.waze.com/*/editor*
// @include         https://beta.waze.com/editor*
// @include         https://beta.waze.com/*/editor*
// @exclude         https://www.waze.com/user/*
// @exclude         https://www.waze.com/*/user/*
// @grant           none
// @icon            https://www.edwardnavarro.com/cdn/wme/wme_zli_icon.svg
// @run-at          document-body
// ==/UserScript==

/* jshint -W097 */
'use strict';

// CREATE THE ZOOM LEVEL INDICATOR CONTAINER AND ADDS A CHILD NODE FOR ZOOM LEVEL NUMBER.
function ZoomLevelIndicator() {
    var zoomBarContainer = document.getElementsByClassName("zoom-bar-container");
    var zoomLevelContainer = document.createElement('div');
    var zoomMinusBtn = document.getElementsByClassName('zoom-minus-button');

    zoomLevelContainer.style.verticalAlign = "middle";
    zoomLevelContainer.style.borderRadius = "0";
    zoomLevelContainer.style.borderTop = "none";
    zoomLevelContainer.style.borderBottom = "none";
    zoomLevelContainer.className = "overlay-button zoom-level-button";

    zoomLevelContainer.innerHTML =
        '<div id="zoom-level-indicator" style="background: rgba(0,0,0,.5); border-radius: 100%; border: 2px solid #FFF; box-shadow: 0px 0px 5px #888; ' +
        'margin: 0; width: 25px; height: 25px; vertical-align: middle; text-align: center; ' +
        'color: #FFF; font-weight: bold; font-size: 14px; line-height: 22px;">#</div>';

    zoomBarContainer[0].insertBefore(zoomLevelContainer, zoomBarContainer[0].lastElementChild);

    updateZoomLevel();

    W.map.events.register("zoomend", W.map, updateZoomLevel);
};

// UPDATE THE ZOOM LEVEL NUMBER.
function updateZoomLevel() {
    document.getElementById("zoom-level-indicator").innerHTML = W.map.olMap.zoom;
};

// INITIALIZE THE SCRIPT
var waitCount = 0;
var maxWait = 60; //60 seconds

function init_ZOOM_LEVEL_IND() {
    try {
        if ("undefined" !== typeof W &&
            "undefined" !== typeof W.map &&
            "undefined" !== typeof W.map.olMap.zoom &&
            "undefined" !== typeof W.map.events &&
            "undefined" !== typeof W.map.events.register &&
            document.getElementsByClassName("zoom-bar-container").length === 1) {
            ZoomLevelIndicator();
            console.info('%c%s','background:green;color:white;padding:5px 10px;','[SUCCESS] WME ZOOM LEVEL INDICATOR >> INITIALIZED');
        } else if (waitCount++ < maxWait) {
            setTimeout(init_ZOOM_LEVEL_IND, 1000);
        } else {
            console.error('%c%s','background:red;color:white;padding:5px 10px;','[ERROR] WME ZOOM LEVEL INDICATOR >> Could not find necessary Waze map objets.');
        }
    } catch (err) {
        console.error('%c%s','background:red;color:white;padding:5px 10px;','[ERROR] WME ZOOM LEVEL INDICATOR >> Failed to initialize.');
        console.error('%c%s','background:red;color:white;padding:5px 10px;','[ERROR] WME ZOOM LEVEL INDICATOR >> Error details: ', err);
    }
};

init_ZOOM_LEVEL_IND();