This article applies to PRTG Network Monitor 15 or later

Custom Status-Related Icons/Objects for Maps

A word of caution

This post contains information about internals of PRTG that may change in future versions. Please note that we provide this information without warranty and that we cannot officially support you with this. Please make sure you keep a proper backup of your configuration and data files.

You can create custom status-related icons by editing map objects, creating a custom CSS class and placing your own images on the server. All changes are performed on subfolders of the webroot folder on the PRTG Core Server under the Program Files folder (by default, C:\Program Files (x86)\PRTG Network Monitor\webroot).

Note: This is not an official feature and as such it is not officially supported. It may or may not work for you.

The image below illustrates the end-result of custom status-aware map-objects within a map.

Full Resolution Image

• Place your custom images on the webroot folder, under mapicons\iconset7. They can be any browser-compatible image type (PNG, JPG or GIF). For this tutorial we use transparent PNG images with 128x128 pixels. Other resolutions may require additional editing of CSS classes.
• Create a new map-object in the mapobjects folder. Use the following or copy a pre-existing file (this sample file is based on An Icon A9.htm).
  • Provide a filename (for example, Added Objects StatusTest.htm) and a name within the file, on the first line.

<!-- Added Objects: StatusTest -->

<div class="map_object map_icon2 map_icon_large <#sensor type="colorclassofstate" prefix="map_iconcolornew_" id="<@objectid>">" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#objectstatus name="lastvalue" id="<@objectid>" var="lastvalue">
  <#objectstatus name="message" show="textraw" id="<@objectid>" var="message">

  <span>
    <#objectstatus name="downsens" id="<@objectid>">
    <#objectstatus name="partialdownsens" id="<@objectid>">
    <#objectstatus name="downacksens" id="<@objectid>">
    <#objectstatus name="warnsens" id="<@objectid>">
    <#objectstatus name="upsens" id="<@objectid>">
    <#objectstatus name="pausedsens" id="<@objectid>">
    <#objectstatus name="unusualsens" id="<@objectid>">
    <#objectstatus name="undefinedsens" id="<@objectid>">
    <br>
    <#objectproperty name="Name" id="<@objectid>">
    <!-- <br><#if value="@nodename" is="sensor" then="@lastvalue" varexpand="value,then"> Remove last Value from Sensors-->
    <br>&nbsp;
    <br><#if value="@nodename" is="sensor" then="@message" varexpand="value,then">
  </span>
    <#mapobject type="htmlafter" subid="<@subid>">
</div>

• The main change that you have to do is renaming the prefix= to a custom one. In this case we use map_iconcolornew_, that will be the prefix for the CSS class.

• In the css folder, edit the provided styles_custom_v2.css file:
  • We create a CSS class for each possible sensor/device status for that object and relate that status to a different background image. Please use the code below as a reference.

.map_iconcolornew_hasblack,
.map_iconcolornew_sensx {
  background-image: url(/mapicons/iconset7/Custom_black.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasgreen,
.map_iconcolornew_sensg {
  background-image: url(/mapicons/iconset7/Custom_ok.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasblue,
.map_iconcolornew_sensb {
  background-image: url(/mapicons/iconset7/Custom_blue.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasorange,
.map_iconcolornew_sensp {
  background-image: url(/mapicons/iconset7/Custom_yellow.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasyellow,
.map_iconcolornew_sensy {
  background-image: url(/mapicons/iconset7/Custom_yellow.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasack,
.map_iconcolornew_senso {
  background-image: url(/mapicons/iconset7/Custom_red.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasred,
.map_iconcolornew_haspartialred,
.map_iconcolornew_sensr {
  background-image: url(/mapicons/iconset7/Custom_red.png);
  background-repeat: no-repeat;
  background-position: center;
}

• Use the map editor within PRTG. Place the newly created object for a group or sensor. The result will look like below (Custom Sensors on top, standard one on the bottom).
  • You can find the custom object within the editor under "Added Objects" if you preserved all the code from the above examples.

Full Resolution Image

• You’re done. Please note that you’ll have to create a new css class and map object for each status-aware icon that you create. For example, you could create a map_iconcolornew2, map_iconcolornew3, and so on…

You can find the example custom map-object, css, and images under the following link: https://media.paessler.com/kb/2015/64436_webroot.zip

For further map-related customizations, please see:
Where can I find custom map objects and other map customizations?

Hi, Our organisation is configuring something very similar. However, we need to remove the old status icons and only have our images as status icons.

E.g. with your example, we would only have the computer image, but not the name and green, yellow, red or blue checkboxes with associated number of sensors. We need to only have our images as status icons.

This will allow us to have a map of Europe with our 20 something sites each indicated by a circle colored by status.

Thanks

Hello LaurentB,
thank you for your post.

You may be able to further customize the map-object to your specific needs, but please be aware that this is not an officially supported usage/configuration.

Best Regards,

Oh well. An example on how to do this would have been nice.

Guess we'll have to find another way to have a quick view of all our sites without cluthering the map with every type of status sensors.

Thank you for your answer.

We used this code and it worked until we updated to version version 18.2.39.1661+ Are there any changes we can make to get our cool animated status images back? They have become an integral part of our map design.

Update to this issue after upgrading to 18.2.39.1661+
Dariusz from support got back to me with the following which fixed it all up!

"Please note that we introduced a new styles_custom file for custom CSS code. The reason is that old CSS code might break the new interface. Therefore please copy the content of the "styles_custom.css" to the new "styles_custom_v2.css" on the Core Server under "C:\Program Files (x86)\PRTG Network Monitor\webroot\css\".

Now very happy to have my animated status images back making reading the map a little more pleasant.

Hi

I am new to PRTG monitoring system, I did all the steps above described to create custom icons that will be 'responsive' and change the color according to the status of a single sensor, but all i got was static custom icons without the status icon for the sensor.

Can anyone help me if I need to do some other adjustments or if I am doing something wrong?

PRTG version: 18.2.41.1652 .

https://ibb.co/cWgZgd

Hello Mirche,
thank you for your reply.

As you may be aware, we do not officially support the custom map objects shared here. However, by the looks of your screenshot you've created the object multiple times, instead of having only a single object and modify the CSS to allow the object to change color based on it's state.

I encourage you to carefully follow the steps of the guide again, as this should work out just fine.

Best Regards,
Luciano Lingnau [Paessler Support]

Hi,

I've tried using the code as used above but unfortunately the object on the map just comes empty with some status symbols.

https://imgur.com/B1RFoCY

I would appreciate any help you can provide.

I have the same problem than avogiatzis, the object on the map just comes empty.

https://imgur.com/B1RFoCY

Someone has a solution for this.

Hello,

Does anyone have a solution for the empty map object problem? We're trying to create a custom mapobject which changes the color of the icon when the status changes.

Bit out of our styles_custom_v2.css:

.map_object.map_iconcolor_wifi_hasgreen,
.map_object.map_iconcolor_wifi_sensg {
  background-image: url(/mapicons/iconset7/wifi-ok.gif);
  background-repeat: no-repeat;
  background-position: center;
}

The .htm file was copied from An Icon A9.htm and only the prefix is edited:

<!-- Added Objects: Status-Wifi -->

<div class="map_object map_icon2 map_icon_large <#sensor type="colorclassofstate" prefix="map_iconcolor_wifi_" id="<@objectid>">" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#objectstatus name="lastvalue" id="<@objectid>" var="lastvalue">
  <#objectstatus name="message" show="textraw" id="<@objectid>" var="message">

  <span>
    <#objectstatus name="downsens" id="<@objectid>">
    <#objectstatus name="partialdownsens" id="<@objectid>">
    <#objectstatus name="downacksens" id="<@objectid>">
    <#objectstatus name="warnsens" id="<@objectid>">
    <#objectstatus name="upsens" id="<@objectid>">
    <#objectstatus name="pausedsens" id="<@objectid>">
    <#objectstatus name="unusualsens" id="<@objectid>">
    <#objectstatus name="undefinedsens" id="<@objectid>">
    <br>
    <#objectproperty name="Name" id="<@objectid>">
    <br><#if value="@nodename" is="sensor" then="@lastvalue" varexpand="value,then">
    <br>&nbsp;
    <br><#if value="@nodename" is="sensor" then="@message" varexpand="value,then">
  </span>
    <#mapobject type="htmlafter" subid="<@subid>">
</div>

I'm having the same issue as Ant-PJ and avogiatzis, the mapobject is available but no image is displayed, only the name and sensor state are displayed.

Does anyone know what's wrong?

Regards Kevin

Hi, this ist a great How-To and works fine. Thanks for this! Is there a chance to combine the use of custom icons with a library? What I mean is: I want to tag some sensors and create a library, displaying only these sensors. In the map, i want to use the library-id to display a custom icon with changing color (dependig of the state) for this library. Does anyone have an idea? Best Regards Matthias

Hello,

except for a custom sunburst object, libraries are not supported by the map editor. The reason is that libraries are not a device-tree object and most map-objects have no alternative method to access a library.