New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


SVG Map Background

Votes:

0

Your Vote:

Up

Down

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 by  erict-rvd (2) 1



5 Replies

Votes:

0

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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

Created on Dec 1, 2017 12:32:49 AM by  erict-rvd (2) 1



Votes:

0

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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 by  erict-rvd (2) 1



Votes:

0

Your Vote:

Up

Down

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]



Please log in or register to enter your reply.


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.