12-14-2016 04:22 PM
Is it possible to configure the measurement tool text size?
Solved! Go to Solution.
12-15-2016 01:24 AM
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
12-20-2016 12:28 PM
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
11-06-2019 05:16 PM
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,
12-08-2019 04:29 PM - edited 12-10-2019 02:43 PM
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,