Previous Next

PRTG Manual: Map Designer

This documentation refers to an administrator that accesses the PRTG web interface on a master node. Other user accounts, interfaces, or failover nodes might not have all of the options in the way described here. In a cluster, note that failover nodes are read-only by default.

With the Map Designer feature, you can create custom web pages as maps, or dashboards, that represent your network.

In this section:

Browser Compatibility

Because of the map designer's extensive scripting capability, it is important that you use a compatible browser when you edit maps. We recommend that you use Google Chrome 75. You can also use Mozilla Firefox 67 or Microsoft Edge 79. The map designer is not fully compatible with earlier versions of Internet Explorer or Opera browsers.

Basic Design Concept

Click the Map Designer tab to open the map editor. It might take a few moments to load. Here, you can add or change map items to create your individual map.

Map Designer General Layout

The map designer consists of three main sections:

The Device Tree section on the left side. Here you can select the object whose data you want to show on the map.
The map design area in the middle that has the size in pixels that you specified in the map settings.
The Properties section on the right side. Here you can define how a map item is displayed, for example, as an icon or a data table.

Drag and drop any object from either side onto the map, or double-click an object. You always see all changes immediately.

Device Tree Section

Use the Device Tree section to select the object whose data you want to show on the map. This can be a probe, a group, a device, or a single sensor.

Device Tree Section in the Map Designer

The following actions are available:

Action	Description
Find an object	To find the desired object, you have the following options: Click at the beginning of a line to expand objects in the device tree and show objects below probes, groups, and devices. Click to collapse the object again. Enter a few characters into the Search box to search for names or parts of names of objects in your configuration. You immediately get the search results. Click to clear your search.
Drag-and-drop	You can always drag any object from the device tree onto a free area of the map to create a new map item. If you drag the object onto an existing map item, the displayed device tree object is replaced while the property and size stay the same.
Double-click	Double-click an object in the device tree to add a new map item. If you select a map item and double-click an object in the device tree, the map designer replaces the map item.
Change size	You can adapt the size of the Device Tree section. Drag the right border to the left to make the section smaller. To enlarge the section, drag the right border to the right.

Properties Section

Use the Properties section to define how to display the map item, for example, as an icon, a map, a table, or a graph. Select the appearance of a map item from different categories.

Properties Section in the Map Designer

The following actions are available:

Hover over an object to get a live preview of it, if available.
Drag an object onto a free area of the map to create a new map item. If you drag the object onto an existing map item, the property is replaced while the device tree object attributes and size stay the same.
Double-click an object to add it to the map, or select an existing map item and double-click an object to replace the map item.

If a specific Properties object is not available for a selected Device Tree object, you see a corresponding note in the live preview of the Properties object.

Properties Object Types

Many different object types are available. Click one of the categories to show all available types.

Object Type	Description
Default Icons A, Default Icons B	Choose from various icons that represent typical network devices in the style of the PRTG web interface. Default icons from category A also display object data. You can see the object name and a sensor overview for the object. This indicates how many sensors show a specific status. For some sensors, a mini graph is shown as well.
Icons A, Icons B, Icons C	Choose from various icons that represent typical network devices. Icons from this category also display object data. You can see the object name and a sensor overview for the object. This indicates how many sensors show a specific status. For some sensors, a mini graph is shown as well.
Icons A (Static), Icons B (Static), Icons C (Static)	Choose from the same icons as in the category described above. Here, only the icon is displayed without additional object data.
Static Images	Choose from various free or public domain geographical maps from different sources. Use the category Geo Maps if you want to show geographical maps that include monitoring locations. The items in this category are independent from the selected objects in the device tree.
Status Icons	Choose from various sensor status icons in different styles. You can see the object name and a sensor overview for the object. This indicates how many sensors show a specific status. For some sensors, a mini graph is shown as well. Additionally, you can add traffic lights or the QR code of an object to your map. A map item for an audible alert that plays a sound when the number of alarms of the monitored object is > 0 is also available. Your browser must support playing embedded sounds for the status icon that includes an audible alert. For more information, see the Knowledge Base: Which audible notifications are available in the PRTG web interface and in the PRTG app for desktop? If you experience issues with audible notifications in Google Chrome, see the Knowledge Base: Why are audible alerts in public maps not working in Chrome?
Cluster	These map items are only available if you run PRTG in a failover cluster. Choose between a map and a status table. The Map item does not scale automatically. You need to manually enlarge the item in the map design area. If you do not have a cluster, you only see white boxes instead of map previews.
Data Tables	Choose from various table lists that show sensors for the selected object. You can also choose from several lists that only show sensors in a specific status.
Device Tree Views	Choose from various device tree views, including gauges for the selected object.
Status Donuts	Choose from various status donuts that either show all alarms or all sensor states for the selected object. These are the same status donuts that you see on the Welcome page.
Geo Maps	These map items are only available if you enable the Geo Maps feature and enter location information in the selected device tree object's settings. Choose between a globe and a geographical map. If the Geo Maps feature is disabled, you only see white boxes instead of map previews.
Graphs	Choose from various graph styles that differ in font size and detail. You can also select graphs that include a legend or sensor states.
Shapes	Choose from various geometrical shapes. The items in this category are independent from the selected objects in the device tree.
Top 10 Lists	Choose from various tables that show the top 10 sensors in specific categories like the highest bandwidth usage or the best availability. The items in this category are independent from the selected objects in the device tree.
Custom HTML	Use this property, for example, to add custom text, external images, or applets to your map. Drag the item to the map design area and select it to edit it. You can then copy your custom code into the HTML Before and HTML After fields.

Edit Map Items

Properties Section

Click a map item to select it. You can then edit its attributes in the upper part of the Properties section.

Edit Map Items in the Properties Section

Property	Description
Top Left	Enter position values to directly position the item on the map. Enter a positive integer. You can also use the mouse to move a map item.
Width Height	Enter size values to give the item a predefined size. Enter a positive integer. You can also use the mouse to resize a map item.
Layer	Enter a layer value that defines if an item appears in front of or behind a different item if the items overlap. The item with the higher value appears in front. Enter a positive integer. You can also use the context buttons of a map item to bring it an item to the front () or send it back one layer ().
External Link	Enter the address of any web page. If you click the map item while you view the map, PRTG opens the web page in a browser window. Enter the full URL of an external website, for example, https://www.paessler.com, or the address of a subpage of your PRTG installation, for example, devices.htm. To make a map interactive, you need to define a suitable public access setting for the map.
HTML Before HTML After	Enter custom HTML code to embed an object in the map. Any HTML code you enter in these fields is added before or after the map item and your HTML object is inserted into the map. For example, you can enter <img src="https://media.paessler.com/common/img/logoclaim_r1.gif"> to insert an image of a Paessler logo.

Property

Description

Top

Left

Enter position values to directly position the item on the map. Enter a positive integer.

You can also use the mouse to move a map item.

Width

Height

Enter size values to give the item a predefined size. Enter a positive integer.

You can also use the mouse to resize a map item.

Layer

Enter a layer value that defines if an item appears in front of or behind a different item if the items overlap. The item with the higher value appears in front. Enter a positive integer.

You can also use the context buttons of a map item to bring it an item to the front () or send it back one layer ().

External Link

Enter the address of any web page. If you click the map item while you view the map, PRTG opens the web page in a browser window. Enter the full URL of an external website, for example, https://www.paessler.com, or the address of a subpage of your PRTG installation, for example, devices.htm.

To make a map interactive, you need to define a suitable public access setting for the map.

HTML Before

HTML After

Enter custom HTML code to embed an object in the map. Any HTML code you enter in these fields is added before or after the map item and your HTML object is inserted into the map. For example, you can enter <img src="https://media.paessler.com/common/img/logoclaim_r1.gif"> to insert an image of a Paessler logo.

Save your settings. If you change tabs or use the main menu without saving, all changes to the settings are lost.

Context Buttons

Hover over a map item to show its context buttons.

Edit Map Items via Context Buttons

Context Button	Description
Bring to front	Move this item one layer to the front. This is useful when you add several items to a map that overlap each other.
Send to back	Move the item one layer to the back. This is useful when you add several items to a map that overlap each other.
Delete	Delete the item. The item is immediately deleted without notice. You cannot undo this action. You can also select the item and press the Delete key on your keyboard.
Drop Connections	Delete all connection lines to the item.

Cursor Keys

Select a map item and use the cursor keys to move the item one pixel at a time. Hold down the Shift key in combination with the cursor keys to move the object 10 pixels at a time.

Add Custom Text

You can add custom text with individual styling to your map with the Custom HTML Element.

For more information, see the Knowledge Base: How to add text to a map?

Draw Connection Lines Between Items

You can draw connection lines between any map items via drag-and-drop to indicate, for example, network connections or a logical coherence between two items.

Map with Connection Lines

Click the gray handle to the left of an item and drag it onto the item with which you want to create a connection to create a connection line.
Hover over a connection line and click to delete it.

The map designer dynamically colors the lines between items depending on the status of the linked objects. A line is red, for example, if the linked objects both show the Down status. Connection lines can also have two colors. For example, if one linked object shows the Down status and the second linked object shows the Warning status, one half of the line is red and the other half is yellow.

Snap To Grid

With the Snap To Grid setting, you can define how map items are positioned when you add or remove them via drag-and-drop.

Click at the bottom of the Device Tree section to enable Snap To Grid so that you can only place items aligned with the grid. Click to disable Snap To Grid to place map objects freely.

Undo and Redo

You can undo previous changes to the map and its items by clicking (Ctrl+Z) at the bottom of the Device Tree section. To redo actions, click (Ctrl+Y). You can undo and redo up to 50 changes when you work on a map. Because PRTG saves changes persistently in your configuration, you can even revert changes at a later point in time.