SVG Map Background

Hi,
Interesting request - Javascript, to the rescue! ;) Proceed with the following steps:

1. Open up C:\Program Files (x86)\PRTG Network Monitor\webroot\javascript\scripts_custom.js
   
2. Paste the following code into it and save it:

// read the parameter value of a given URL
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// background images for the various maps 
var backgroundImages = {
	"1861A298-F999-4404-828E-F133D8E8ED8C":"https://upload.wikimedia.org/wikipedia/commons/0/07/Wikipedia_logo_%28svg%29.svg",
	"1861A298-F999-4404-828E-F133D8E8ED8E":"https://upload.wikimedia.org/wikipedia/commons/0/07/Wikipedia_logo_%28svg%28.svg"
}

// get the current map id 
var mapid = getParameterByName('mapid');

// log the loaded background image 
console.log("Loading background image " + backgroundImages[mapid]);

// set the background image accordingly
$('#map_objectbox').css('background-image', 'url(' + backgroundImages[mapid] + ')');
// no repeating! 
$('#map_objectbox').css('background-repeat', 'no-repeat');

Modify backgroundImages accordingly and add the maps with their ID and the corresponding wallpaper you'd like it to have. The image will then be loaded dynamically when the map is opened.

---

Kind regards,
Stephan Linke, Tech Support Team

Sep, 2017 - Permalink

Is there an updated solution for new versions that also persists across map refresh intervals?

Dec, 2017 - Permalink

In the latest PRTG versions, you need to place the code in scripts_custom_v2.js. Did you try that?

---

Kind regards,
Stephan Linke, Tech Support Team

Dec, 2017 - Permalink

Yes thanks, that move was required. I was also able to update the code to work with new versions and persist across map refresh intervals. This would be made much easier if the map settings background file would just allow selecting SVG files.

{
    {
        {



            // read the parameter value of a given URL

            function getParameterByName(name, url) {

                if (!url) url = window.location.href;

                name = name.replace(/[\[\]]/g, "\\$&");

                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

                    results = regex.exec(url);

                if (!results) return null;

                if (!results[2]) return '';

                return decodeURIComponent(results[2].replace(/\+/g, " "));

            }



            // background images for the various maps

            var backgroundImages = {

                "2519": "/images/RVD1.svg"

            }

            $(document).ajaxComplete(function (event, jqXHR, ajaxOptions) {

                // get the current map id

                var mapid = getParameterByName('id');

                // Abort if not map ajax
                if (!mapid || !backgroundImages[mapid]) return;

                // log the loaded background image
                console.log("Loading background image " + backgroundImages[mapid]);



                // set the background image accordingly
                var svgParent = $('#mapsvg').parent();
                svgParent.parent().css('background-image', 'url(' + backgroundImages[mapid] + ')');

                // no repeating!
                svgParent.css('background-repeat', 'no-repeat');
            });

        }
    }
}

Dec, 2017 - Permalink

Nice, thanks for the hack! :)

---

Kind regards,
Stephan Linke, Tech Support Team

Dec, 2017 - Permalink