WebGIS Discussions

[Lizzy]

Is it possible to configure the measurement tool text size?

[jan.neumann]

Hi Lizzy,

Yes, you must provide modified CSS style for the measurement SVG path. For example:

Edit <Portal_Instance_Folder>\App_Themes\Default\Default.css

Add line:

.wc_map_measure svg text {
    font-size: 2500pt !important;
}

You will need to fiddle around with the SVG styling because at some point the texts start to be cropped.

Regards,

Jan

[Lizzy]

Thanks Jan, that's done the trick.

I've set the text size to 200pt so hopefully my users shouldn't need a magnifying glass now!

Liz

[halberti]

Expanding the solution provided by Jan, it is possible to change the size of the text while editing using the tag:

    .wc_map_edit svg text {
        font-size: 2500pt !important;
    }

Cheers,

[halberti · Accepted solution]

Hi,

The code below was created as a POC to make the font bigger. 

The font size is being affected by the SVG “Unit is User Coordinate - http://xahlee.info/js/svg_font_size.html". It means that the Portal has a mechanism to keep a consistent font size when you zoom-in and zoom-out. Outough the class is working fine, the 2500px being displayed is "varying" because of the user coordinate. The best solution that I found was to multiply the font-size by 1.5. If this value is greater than 2, the font-size starts to hit a maximum value and it is not becoming bigger on certain zoom scales. There is a switching effect as well from the original size to the bigger one during the adjust.

$GP.ready(function () {
    startCustom();
});

var startCustom = function () {

    console.log('Starting Customisation...');

    const targetNodeEdit = document.getElementsByClassName("wc_map_edit")[0];
    const targetNodeMeasure = document.getElementsByClassName("wc_map_measure")[0];

    // ------------------------------------------------------
    // Check if the node was created:
    // ------------------------------------------------------
    if (!targetNodeEdit || !targetNodeMeasure) {
        console.log("Node not available... Trying again!");
        setTimeout(function () {
            startCustom();
        }, 300);
        return;
    }

    // ------------------------------------------------------
    // Font size adjusts:
    // ------------------------------------------------------
    const fontSizeControl = {
        multiplier: 1.5,
        currentSize: 0,
        oldSize: 0
    }

    $GP.events.mapMoved.register(function () {
        console.log("mapMoved");
        fontSizeControl.oldSize = 0;
        fontSizeControl.currentSize = 0;
    });

    const callback = function (mutationsList, observer, nodeClass) {

        for (var m = 0; m < mutationsList.length; m++) {
            const mutation = mutationsList[m];
            if (mutation.type === 'childList') {

                if (fontSizeControl.oldSize == 0) {
                    var fontSize = $(".wc_map_measure svg g text").attr("font-size");
                    if (!fontSize) {
                        fontSize = $(".wc_map_edit svg g text").attr("font-size");
                    }
                    if (fontSize) {
                        fontSizeControl.oldSize = fontSize;
                        fontSizeControl.currentSize = fontSize * fontSizeControl.multiplier;
                    }
                    console.log("oldSize[" + fontSizeControl.oldSize + "] currentSize[" + fontSizeControl.currentSize + "]");
                }

                for (var i = 0; i < mutation.addedNodes.length; ++i) {
                    if (mutation.addedNodes[i].nodeName === "g") {
                        setTimeout(function () {
                            $("." + nodeClass + " svg g text").attr("font-size", fontSizeControl.currentSize);
                        }, 50);
                        break;
                    }
                }

            }
        }
    };

    // ------------------------------------------------------
    // MutationObserver
    // ------------------------------------------------------
    const config = {
        childList: true,
        subtree: true
    };

    const observerMeasure = new MutationObserver(
        function (mutationsList, observer) {
            callback(mutationsList, observer, "wc_map_measure");
        });
    observerMeasure.observe(targetNodeMeasure, config);

    const observerEdit = new MutationObserver(
        function (mutationsList, observer) {
            callback(mutationsList, observer, "wc_map_edit");
        });
    observerEdit.observe(targetNodeEdit, config);

    // ------------------------------------------------------
    console.log('Completed Customisation.');
};

// Avoid 'console' errors in browsers that lack a console. Yes I'm looking at you IE
(function () {
    var method;
    var noop = function () { };
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});
    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}
    ());

Cheers,