How can I add my own HTML or Javascript block to PRTG maps?

This applies to PRTG Network Monitor 7.1-7.3

Note: The information given below is not officially covered by Paessler's support offerings. You can use it at your own risk. Our support team will not be able to dig into questions regarding this technique.

In order to include your own HTML and/or Javascript code in a map you must create a "map object" that includes this code.

Step 1: Create a new mapobject file

• Go to the following folder of your PRTG installation and duplicate a file (e.g. "An Icon A1.htm") \PRTG Network Monitor\website\mapobjects

• Rename the file to a new name starting with a "z" to move it to the end of alphabetically sorted list, (e.g. zz_MyHTML.htm)

Step 2: Edit the mapobject file

• Open the file in a text editor
• Change the first line of the file, it contains the name which will be shown in the web interface (format is "group:name")
• Delete the HTML code between the <span> and </span> and paste your own HTML and/or JS code
• Save the file

IMPORTANT LIMITATIONS

The HTML and Javascript code will potentially be loaded multiple times into one webpage, either because the map object is used more than once, or because it is available in the DOM due to usage of the "tabs" on the map/map editor page, or they are loaded multiple times by PRTG's in-page refresh.

This means that

• you can not use function declarations
• you may not use "setTimer" and "setInterval" functions as usual, they would run multiple times. The code below shows a "dirty" trick to work around this issue.
• you may not use document.write, please use DOM manipulation instead, using jQuery is recommended

Also you should not use ActiveX controls or the <object> tag and other performance heavy HTML techniques, they could create problems on maps that are reloaded every 60 seconds for hours.

Step 3: Use the new mapobject in a map

Now go to PRTG's Map Editor and add the new object (don't forget to select one icon from the sensor tree, even though it is not necessary for this object)

Sample Map Object for an AXIS 207 Network Camera with automatic 2 second webcam image refresh

<!--Samples: AXIS 207 Network Camera Webcam-->

<div class="map_object map_graph" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
	<span>
		<SCRIPT LANGUAGE="JavaScript">

	// Script to download and refresh a webcam image from an AXIS 207 Network Camera

		
	$(document).ready(function() //let's do everything after the page had fully loaded
	{		

		// Set the BaseURL to the URL of your camera, set width and height
		var BaseURL = "http://10.0.0.252/";
		var DisplayWidth = "<@width>";  // @width and @height will be replaced with map object size
		var DisplayHeight = "<@height>";
		
		// This is the path to the image generating file inside the camera itself
		var File = "axis-cgi/jpg/image.cgi?resolution=<@width>x<@height>&";

		var url = BaseURL+File;
	
		// Let's set the image URL and size
		$(".webcam").attr("src",url).attr("height",DisplayHeight).attr("width",DisplayWidth);
		
	});

		// Here we define our refreshing code. This must be done "dirty" because we may not 
		// use "function" etc. in a map object (the HTML of the map object is potentially loaded
		// multiple times because it is used multiple times or because of the in-page refresh of PRTG
		
		// let's test if the variable for the code is already defined. If yes, don't do it again!

		if ((typeof(window["webcamrefreshcode"]) == "undefined"))
		{
			webcamrefreshcode="$('.webcam').each(function(i,a){$(a).attr('src',$(a).attr('src').replace(/\&.*$/, '') + '&' + Math.random())});setTimeout(webcamrefreshcode, 2000);";
			theTimer = setTimeout(webcamrefreshcode, 2000);
		}

		</SCRIPT> 
		<img class="webcam" src="" height="1" width="1" alt="Live Webcam Image">
	</span>
	<#mapobject type="htmlafter" subid="<@subid>">
</div>