This article applies to PRTG Network Monitor 19 or later

Adding external information to PRTG maps

Whether you want to add webcam images, weather data, or show the recent traffic around your city on a dashboard, with some HTML skills you can turn your PRTG Map into an amazing information provider. You can add external information to PRTG maps using the Custom HTML map object.

Here is a sample map that embeds various external sources with live data:

Click to enlarge.

Adding external objects

The external information must be available as an IFRAME or IMG (script-based embedding is not supported) with a specified width and height.

If your external information uses a script, create a small webpage on some webserver, place the code there, and embed this page in your map using an IFRAME.

Note: Current browsers only allow custom web objects that include an SSL certificate. Therefore, IFRAME or IMG objects that link to a URL starting with http and not https will not be displayed in PRTG.

Insert the external object

1. Create a new map or open an existing one.
2. Open the Map Designer tab.
3. Select Custom HTML under Properties on the right side, select the first available map object Custom HTML Element, and drag it into the main window.
4. Click the object in the map. In the HTML Before field at the top of the Properties section on the right side, enter the code that you want to embed in the map.
5. Click Save.

This is all. Your new object will show up in your map and you can move it around.

Examples

Weather information

Visit meteoblue.com to get the code.

For example, the IFRAME code could look like this:

<iframe src='https://www.meteoblue.com/en/weather/widget/three/nuremberg_germany_2861650?geoloc=fixed&amp;nocurrent=0&amp;noforecast=0&amp;days=4&amp;tempunit=CELSIUS&amp;windunit=KILOMETER_PER_HOUR&amp;layout=image' frameborder='0' scrolling='NO' allowtransparency='true' sandbox='allow-same-origin allow-scripts allow-popups' style='width: 500px;height: 320px'></iframe><!-- DO NOT REMOVE THIS LINK --><a href='https://www.meteoblue.com/en/weather/forecast/week/nuremberg_germany_2861650?utm_source=weather_widget&amp;utm_medium=linkus&amp;utm_content=three&amp;utm_campaign=Weather%2BWidget' target='_blank'>meteoblue</a>

Dark Sky Maps

Dark Sky Maps provides weather maps that you can filter for your required information. Visit Dark Sky Maps, define your desired properties, copy the embed code, and paste it into the PRTG Map Designer.

For example, the IFRAME code could look like this:

<iframe src='https://maps.darksky.net/@temperature,49.448,11.076,11' style='border:0px #ffffff none;' name='myiFrame' scrolling='no' frameborder='1' marginheight='0px' marginwidth='0px' height='400px' width='600px' allowfullscreen=''></iframe>

Unwetterzentrale

The German Unwetterzentrale provides free maps with severe weather warnings for Europe and Germany. We also use it on our office dashboards.

Visit Unwetterzentrale: Warnungen für Ihre Homepage, copy the provided code, and paste it into the PRTG Map Designer.

Radar check

You can use the radar check to see if your browser session is working. For example, the HTML code could look like this: img src='https://gotbeer.com/images/radar-loading.gif' width='79' height='79/'