PRTG Manual: Map Designer

Use the Map Designer to create a map web page representing your network.

icon-i-roundThis documentation refers to the PRTG System Administrator user accessing the PRTG web interface on a master node. If you use other user accounts, interfaces, or nodes, you might not see all of the options in the way described here. If you use a cluster installation, note that failover nodes are read-only by default.

In this section:

Use the Proper Browser

Because of the map designer's extensive scripting capability, it is important that you use a compatible browser when editing maps. We recommend that you use Google Chrome 72. You can also use Mozilla Firefox 65 or Microsoft Internet Explorer 11. 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 editor. It might take a few moments to load. Here, you can create your map by adding or changing items. The Map Designer consists of three main parts: The Device Tree on the left, the current map in the middle, and the Properties on the right.

Map Designer

Map Designer

Each map item takes attributes from both selections.

  • Device Tree (left): Select the object whose data you want to show on the map.
  • Properties (right): Define how to show the map item.

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

Device Tree Selection

Use the Device Tree 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). To find the desired object, you have the following options:

  • Use the arrow symbols at the beginning of each line to open nodes in the device tree and show objects below probes, groups, and devices.
  • Enter a few characters into the Search box in the upper-right corner to search for names (or parts of names) of objects in your configuration. You see the search results immediately. Click the gray x icon to clear your search.
Device Tree Selection in the Map Designer

Device Tree Selection in the Map Designer

  • No matter which method you choose to find the desired object, 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 it onto an existing map item, it replaces the existing item while Properties and size stay the same.
  • You can also select a map item and double-click a Device Tree object to replace the map item. If no item is selected, double-clicking an object adds a new map item.
  • To gain more space for map editing, reduce the size of the Device Tree box by dragging its right border to the left. Drag it to the right to enlarge it again.

Properties Selection

Use the Properties selection to define how to show the map item (for example, as an icon, a map, a table, or a graph). Select the appearance from different categories. Hover over a Properties object to get a live preview of it (in most cases).

icon-i-roundIf a certain Properties object is not available for the selected Device Tree object, you see a corresponding note in the live preview of the Properties object.

Properties Selection in the Map Designer

Properties Selection in the Map Designer

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

Properties Object types

Default Icons A, Default Icons B

These categories offer a variety of icons representing typical network devices in the current PRTG style. Category A comes with object data that category B does not include.

Icons A, Icons B, Icons C

These three categories offer a variety of icons representing typical network devices. Below each icon, you can see the object name and a sensor overview for the object. This shows how many sensors are in which status. For some sensors, a mini graph is shown as well.

Icons A (Static), Icons B (Static), Icons C (Static)

These three categories offer the same variety of icons representing typical network devices as the category described above. Here, no object data is displayed but only the icon.

Static Images

This category offers free or public domain geographical maps from different sources. Use properties section Geo Maps if you want to show Geo Maps in the map.

icon-i-roundThe items in this category are independent of the selected Device Tree objects.

Status Icons

This category offers options to insert status icons in different styles. These show the object name and an overview of how many sensors there are and their status. For example, you can add traffic lights or the QR code of a monitoring object to your map. An object for an audible alert that plays a sound when the number of alarms of the monitored object is > 0 is also available.

icon-i-roundYour browser must support playing embedded sounds for the status icon with audible alert.

icon-book-bulbFor more information, see the Knowledge Base: Which audible notifications are available in PRTG? Can I change the default sound?

icon-book-bulbIf 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

If you use the PRTG Clustering feature, you can add icons to your map that show the status of your cluster.

icon-i-roundThe Map icon does not scale automatically, so the nodes are displayed on top of each other by default. Manually enlarge this icon in the main window of the Map Designer (downwards and to the right) until it fits your needs.

Data Tables

Choose from several table lists that show sensor lists for the selected object. You can also choose from several lists that only show sensors in a certain status.

Device Tree Views

Add several views of your device tree to the map, including sensor gauges for the selected object.

Status Donuts

Choose from several 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

In this category, you can choose between a globe and a geographical map. You can see the location of the selected object in the Device Tree on the map. To use this feature, you must enable Geo Maps integration and you have to enter a Location in the settings of the monitoring object that you want to use this with. For more information, see section Geo Maps.

icon-i-roundIf Geo Maps integration is disabled, you only see white boxes instead of map previews.

Graphs

This category offers different graph styles in several dimensions and detail. You can also select graphs including a legend or sensor states.

Shapes

Add some simple geometric shapes to your map. The items in this category do not depend on the selected object in the Device Tree.

Top 10 Lists

Choose from several tables that show the top 10 sensors in certain categories like least used CPU, highest bandwidth usage, best availability, or slowest website.

Custom HTML

You can use this property, for example, to add custom text, external images, or applets to your map. To actually add custom HTML code to your map, add the item, and select it to edit it. You can then copy your custom code into the HTML Before and HTML After fields in the Properties box.

No matter which object you choose, you can always drag any object from the Properties box onto a free area of the map to create a new map item. If you drag it onto an existing map item, it replaces this item, while its Device Tree object attributes and size stay the same. You can also select a map item and double-click an object in the Properties box to replace the map item. If no item is selected, double-clicking an object adds a new map item.

Edit Existing Map Items—Properties Box

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

Properties BOX

Top, Left, Width, and Height

Enter position and size values for direct positioning. Click the Save button to save your settings.

icon-i-roundYou can also use the mouse to move and resize a map item.

Layer

The layer number defines if an item appears on top of or behind another item if they overlap. The item with the higher number appears on top. Enter a positive integer value and click the Save button to save your settings.

icon-i-roundYou can also use the arrow symbols in the context menu of a map item to bring it an item to the front or send it back one layer (see below).

External Link

PRTG maps are interactive. You can enter the address of any website here. If you click the map item when viewing the map, PRTG opens this page in a browser window. Enter the whole URL to an external website (for example, https://www.paessler.com) or the address of a subpage of your PRTG installation (for example, devices.htm).

HTML Before and HTML After

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

Edit Existing Map Items—Edit Icons

Hover over a map item to show the edit icons for it.

Edit icons

Bring to front icon-bring-to-front

Move this item one layer to the front. This is useful when adding several items to a map that overlap each other. to move and resize a map item.

Send to back icon-send-to-back

Move this item one layer to the back. This is useful when adding several items to a map that overlap each other.

Delete icon-delete

Delete this item.

icon-i-round-redBe careful! The item is deleted immediately without notice and you cannot undo this.

icon-i-roundYou can also select the item and press the Delete key on your keyboard.

Drop Connections icon-drop-connections

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

Edit Existing Map Items—Using Cursor Keys

While an object is selected, use the cursor keys to move it 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 to the Map

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

icon-book-bulbFor details, 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. Click the gray handle to the left of an item and drag a line to the item that you want to draw a connection to. A line between these items appears immediately. This can be useful to indicate network connections or logical coherence between two items. To delete connection lines, click the scissors symbol in the item's edit icons.

icon-i-roundYou also delete a connection line by hovering over the connection line and clicking the scissors symbol.

Lines between objects are colored dynamically depending on the status of linked objects. For example, a line is red as long as one of the object's icons shows a red Down status. This only affects half of the line, at the end where the red sensor is shown. If both objects connected show a red sensor, this results in a continuous red line.

Map with Status Colored Connection Lines

Map with Status Colored Connection Lines

Snap to Grid

Select Snap to Grid below the Device Tree box to define how map items are positioned when you add or remove them via drag-and-drop. The setting is immediately active. If you enable Snap to Grid, you can only place items so that they are aligned with the grid. If you disable the Snap to Grid option, you can place map objects freely.

Undo and Redo

You can revert previous changes to the map and its objects with the Undo button (Ctrl+Z) in the Device Tree box. To revert undo actions, use the Redo button (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 later.

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

More

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

Knowledge Base: Which audible notifications are available in the PRTG web interface and in PRTG Desktop?

Knowledge Base: Why are audible alerts in public maps not working in Chrome?

Knowledge Base: How to add text to a map?

Maps—Topics