What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

SVG Map Background

Votes:

0

Please allow SVG files to be used as map backgrounds. This would greatly improve the scalability (resolution independent) of large campus/cad-based maps, and reduce memory use.

background image map memory svg

Created on Sep 13, 2017 6:31:28 PM



5 Replies

Votes:

0

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

Created on Sep 14, 2017 12:41:36 PM by  Stephan Linke [Paessler Support]

Last change on Dec 1, 2017 7:28:41 AM by  Stephan Linke [Paessler Support]



Votes:

0

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

Created on Dec 1, 2017 12:32:49 AM



Votes:

0

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

Created on Dec 1, 2017 7:30:32 AM by  Stephan Linke [Paessler Support]



Votes:

0

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');
            });

        }
    }
}

Created on Dec 1, 2017 5:42:12 PM



Votes:

0

Nice, thanks for the hack! :)


Kind regards,
Stephan Linke, Tech Support Team

Created on Dec 4, 2017 6:59:24 AM by  Stephan Linke [Paessler Support]




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.