PRTG Manual: Map Designer

i_round_blueThis 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

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

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 b_map_designer_expand at the beginning of a line to expand objects in the device tree and show objects below probes, groups, and devices. Click b_map_designer_collapse 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 b_map_designer_close_search 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

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.

i_round_blueIf 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.

i_round_blueUse the category Geo Maps if you want to show geographical maps that include monitoring locations.

i_round_blueThe 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.

i_round_blueYour browser must support playing embedded sounds for the status icon that includes an audible alert.

i_square_cyanFor more information, see the Knowledge Base: Which audible notifications are available in the PRTG web interface and in the PRTG app for desktop?

i_square_cyanIf 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.

i_round_blueThe Map item does not scale automatically. You need to manually enlarge the item in the map design area.

i_round_blueIf 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.

i_round_blueIf 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.

i_round_blueThe 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.

i_round_blueThe 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

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.

i_round_blueYou 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.

i_round_blueYou 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.

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

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.

i_round_blueTo 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.

i_round_redSave 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

Edit Map Items via Context Buttons

Context Button

Description

Bring to front b_map_designer_bring_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 b_map_designer_send_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 b_delete_light

Delete the item.

i_round_redThe item is immediately deleted without notice. You cannot undo this action.

i_round_blueYou can also select the item and press the Delete key on your keyboard.

Drop Connections b_map_designer_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.

i_square_cyanFor 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

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 b_map_designer_drop_connections to delete it.

i_round_blueThe 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 b_inherited_disabled 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 b_inherited_enabled 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 b_map_designer_undo (Ctrl+Z) at the bottom of the Device Tree section. To redo actions, click b_map_designer_redo (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.

i_round_blueBoth buttons are only available if they can apply, otherwise they are grayed out.

More

i_square_blueKNOWLEDGE BASE

Which audible notifications are available in the PRTG web interface and in the PRTG app for desktop?

Why are audible alerts in public maps not working in Chrome?

How to add text to a map?

Why does my browser show an unresponsive script warning while loading the Map Designer?