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.
SVG Map Background
Votes:
0
5 Replies
Votes:
0
Hi,
Interesting request - Javascript, to the rescue! ;) Proceed with the following steps:
- Open up C:\Program Files (x86)\PRTG Network Monitor\webroot\javascript\scripts_custom.js
- 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?
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
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'); }); } } }
Votes:
0
Nice, thanks for the hack! :)
Kind regards,
Stephan Linke, Tech Support Team
Add comment