WebGIS Discussions

Need a push in the right direction when configuring WebMap, Portal or SDI services? Looking for hints and tips, or just looking for Ideas and information? The WebGIS discussion board is where you start those discussions, connect and share information.
Showing results for 
Search instead for 
Do you mean 
Reply
Occasional Contributor
Posts: 5
Registered: ‎04-13-2016
Accepted Solution

Measurement Tool Text Size

Is it possible to configure the measurement tool text size?

Technical Evangelist
Posts: 1,386
Registered: ‎09-11-2015

Re: Measurement Tool Text Size

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

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Occasional Contributor
Posts: 5
Registered: ‎04-13-2016

Re: Measurement Tool Text Size

Thanks Jan, that's done the trick. Smiley Very Happy

 

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

 

Liz

Occasional Contributor
Posts: 7
Registered: ‎12-07-2015

Re: Measurement Tool Text Size

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,

 

 

Occasional Contributor
Posts: 7
Registered: ‎12-07-2015

Re: Measurement Tool Text Size

[ Edited ]

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,