<%NUMBERING1%>.<%NUMBERING2%>.<%NUMBERING3%> PRTG Manual: Map Designer

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

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.

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 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:

  • 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 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 b_map_designer_close_search 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 a map item, it replaces the 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).

i_round_blueIf 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

Object Type

Description

Default Icons A, Default Icons B

These categories offer a variety of icons representing typical network devices in the style of the PRTG web interface. 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 geographical maps in the map.

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

i_round_blueYour browser must support playing embedded sounds for the status icon with audible alert.

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

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

If you run PRTG in a cluster, you can add icons to your map that show the status of your cluster.

i_round_blueThe Map icon does not scale automatically. 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 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.

i_round_blueIf 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 a 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 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:

Property

Description

Top, Left, Width, and Height

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

i_round_blueYou 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 an item if the items overlap. The item with the higher number appears on top. Enter a positive integer value and click Save to save your settings.

i_round_blueYou can also use the icons in the context menu 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

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

Context Buttons

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

Context Button

Description

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

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

Delete b_delete_light

Delete this item.

i_round_redThe item is deleted immediately without notice and you cannot undo this.

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

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

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.

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. 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 b_map_designer_drop_connections in the item's context buttons.

i_round_blueYou also delete a connection line by hovering over the connection line and clicking b_map_designer_drop_connections.

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 the 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

Click b_inherited_disabled below the Device Tree box to enable Snap to Grid 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. Click b_inherited_enabled to disable Snap to Grid to place map objects freely.

Undo and Redo

You can revert previous changes to the map and its objects by clicking b_map_designer_undo (Ctrl+Z) in the Device Tree box. To revert undo 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 later.

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

More

i_square_blueKNOWLEDGE BASE

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

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

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

How to add text to a map?

Maps