Is it possible that Map Icons adapt to the status?

• First copy your icons to <Path to PRTG>\PRTG Network Monitor\webroot\icons.
• (Note the icon size ( e.g. 100 x 73)
• Create a new CSS file in <Path to PRTG>\PRTG Network Monitor\webroot\CSS. You can use the following as a template. Name it something distict like smiley.css.
• Go into the css file and adapt it your smileys: change url icon paths, add padding for the icon size, etc. (sensg is green, sensr is red, etc)
• Change every instance of the word map_icon_meter" to "map_icon_smiley"

body.mapshow
body.mapshow
{
	background-color: #fff;
	background-image: none;
}

div.map_object
{
  border:1px solid transparent;
  z-index:1;
}
div.map_icon_meter,div.map_icon_meter div,div.map_icon_meter span,td.map_icon_meter
{
	font-size:14px;
	font-weight: bold;
}
.map_icon_meter .sensg:before, .map_icon_meter .sensr:before, .map_icon_meter .sensq:before, .map_icon_meter .senso:before, .map_icon_meter .sensb:before, .map_icon_meter .sensy:before, .map_icon_meter .sensp:before, .map_icon_meter .sensx:before 
{
    background-image: none !important;
    width: auto;
    height: auto;
    margin: 0;
    display: inline;
    content: "";
}
.map_icon_meter div.sensg,.map_icon_meter div.sensr,.map_icon_meter div.sensq,.map_icon_meter div.senso,.map_icon_meter div.sensb,.map_icon_meter div.sensy,.map_icon_meter div.sensp,.map_icon_meter div.sensx
{
	background-position: 0px 0px;
	background-repeat: no-repeat;
	display: inline !important;
	padding-left: 22px;
}
.map_icon_meter div.sensg
{
	background-image: url(/icons/metergreen.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensy
{
	background-image: url(/icons/meteryellow.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensr
{
	background-image: url(/icons/meter_red.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensb
{
	background-image: url(/icons/meteryellow.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensp
{
	background-image: url(/icons/meteryellow.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
div.map_object,div.map_objectsizer
{
	position: absolute;
}

div.map_object.ui-draggable-dragging
{
	filter: alpha(opacity=50);
	opacity: 0.5;
}
div.map_object.ui-draggable-dragging  .overlay
{
	filter: alpha(opacity=30);
	opacity: 0.3;
	background:#aaa;
}

.map_object .overlay
{
  display:block;
  position:absolute;
  cursor: move !important;
}

div.map_objectsizer
{
	height: 16px;
	width: 16px;
	cursor: se-resize !important;
	z-index:1;
}
div.map_objecttools,div.map_objectsettings
{
	border:1px solid #D3D3D3;
	height: 16px;
	margin: 0px;
	padding: 0;
	position:absolute;
	background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
	top:2px;
	left:2px;
	opacity: 0.9;
	-moz-box-shadow:0 0 2px #aaa;
	width: 16px;
	display:none;
	cursor: pointer;
	z-index:1;
}

div.map_objecttools a,div.map_objectsettings a
{
	height: 16px;
	margin: 0;
	padding: 0;
	width: 16px;
	background: url("images/ui-icons_222222_256x240.png") no-repeat scroll 50% 50% #E6E6E6;
	background-position: -176px -112px;
	display:block;
}
.map_object_buttonbar:hover div.map_objecttools,
.map_object_buttonbar:hover div.map_objectsettings,
.map_object:hover div.map_objecttools,
.map_object:hover div.map_objectsettings
{
    display:block;
}

.map_object_buttonbar
{
	display:block;
	height:43px;
	width:99px;
	position:absolute;
	left:0px;
	top:0px;
}
div.map_objecttools.delete
{
	left:65px;
}
div.map_objecttools a
{
    background-position: -176px -96px;
}
div.map_objecttools.moveup
{
    left:23px;
}
div.map_objecttools.moveup a
{
    background-position:-192px -48px;
}
div.map_objecttools.movedown
{
    left:44px;
}
div.map_objecttools.movedown a
{
	background-position:-224px -48px;
}
div.map_objecttools.dropconnectors
{
    left:86px;
}
div.map_objecttools.dropconnectors a
{
	background-position:-144px -128px;
}
div.map_objecttools a:link,
div.map_objectsettings a:link,
div.map_objecttools a:visited,
div.map_objectsettings a:visited,
div.map_objecttools a:active,
div.map_objectsettings a:active
{
	color: #000;
}
div.map_objecttools img,div.map_objectsizer img,div.map_objectsettings img
{
	height: 14px;
	width: 14px;
}
div.map_objectbox
{
	position: relative;
}
div.map_background
{
	background-repeat: no-repeat;
}
div.map_editor div.map_object
{
	border: 1px solid #ddd;
}
div.map_editor div.map_object:hover
{
	border: 1px solid #888;
	box-shadow: 1px 1px 3px #333;
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 0px 0px 7px #333;
}
div.map_editor div.map_background
{
	box-shadow: 0px 0px 5px #0060B6;
	-moz-box-shadow: inset 0px 0px 3px #0060B6;
	-webkit-box-shadow: 0px 0px 5px #0060B6;
	border:1px solid #eee;
}
div.map_editor
{
	background-image: url(/images/mapdots.png);
	background-repeat: repeat;
	border: 2px solid #CDE2F8;
}
div.map_objectgrip
{
	display: none;
}
div.map_object div.sensg,div.map_object div.sensr,div.map_object div.senso,div.map_object div.sensb,div.map_object div.sensy,div.map_object div.sensp,div.map_object div.sensx,div.map_object div.sensq
{
	display: inline;
	padding-right: 0px;
}
div.map_icon
{
	min-width: 50px;
}
div.map_icon div.sensr,div.map_icon div.sensq,div.map_icon div.senso
{
	background-color: #FFE3E7;
}
div.map_icon span
{
	background-color: white;
	white-space: nowrap;
	width: 100%;
}
div#maprefreshlink
{
	background-color: #444;
	border: 1px solid #888;
	bottom: 0px;
	color: #fff;
	filter: alpha(opacity=30);
	margin: 2px;
	-moz-box-shadow: 1px 1px 1px #888;
	opacity: 0.3;
	padding: 2px;
	position: fixed;
	right: 0px;
	-webkit-box-shadow: 1px 1px 1px #888;
	z-index: 7998;
}
div#maprefreshlink:hover
{
	filter: alpha(opacity=80);
	opacity: 0.8;
}
div#maprefreshlink span
{
	display: none;
}
div#maprefreshlink:hover span
{
	display: inline;
}
#maprefreshlink a,
#maprefreshlink a:hover,
#maprefreshlink a:link,
#maprefreshlink a:visited
{
	color: #fff;
}

#mapobjectpreview
{
	background-color: #fff;
	display: block;
	
}
#mapobjectpreview .container
{
  background:#eee;
  height:auto;
  width:auto;
}
#mapobjectpreview .container.loading
{
  background:none;
  min-height: 0px;
  min-width: 0px;
}
.mapobjectpreviewcontainer
{
	border: 2px solid #ddd;
	float: left;
	height: 167px;
	margin: 1px;
	padding:0;
	margin-right:1px;
	width: 208px;
	overflow:hidden;
	position:relative;
    background:#fff;
}

#minitab-1 .mapobjectpreviewcontainer,
#minitab-3 .mapobjectpreviewcontainer,
#minitab-5 .mapobjectpreviewcontainer
{
  height:121px;
  width:92px;
}
#minitab-2 .mapobjectpreviewcontainer,
#minitab-4 .mapobjectpreviewcontainer,
#minitab-6 .mapobjectpreviewcontainer
{
  width:92px;
  height:90px;
}

.mapobjectpreviewcontainer.selected
{
  border:2px solid #4A86BE;
  background-color: #CDE2F8;
  opacity: 1;
}
.mapobjectpreviewcontainer .overlay
{
	display: block;
	height: 98%;
	position: absolute;
	width: 98%;
	z-index: 2;
	cursor:pointer;
}
.mapobjectpreviewcontainer:hover
{
  opacity: 1;
}
.mapobjectpreviewcontainer .overlay:hover
{
	border:1px solid #4A86BE;
}
.mapobjectpreviewcontainer .chartlegend
{
	display: none;
}
.mapobjectpreviewcontainer>p
{
	font-weight: bold!important;
	color:#000!important;
	margin:0;
}
.mapobjectpreviewcontainer p span
{
	display: inline-block;
	vertical-align: bottom;
}
.mapobjectpreviewcontainer .objectisincompatible
{
	font-weight: normal;
	margin: 0;
	text-align: left;
	width: 190px;
}


._jsPlumb_endpoint
{
  display:none;
  z-index:-100;
}

._jsPlumb_connector
{
  z-index:0;
}
.plumbpointer
{
  display:block;
  width:6px;
  height:6px;
  border-radius: 6px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background:#aaa;
  border:1px solid #888;
  position:absolute;
  cursor:alias;

}
.plumbpointer:hover
{
  background:#CDE2F8;
}
div.map_object.drophover
{
  background:#CDE2F8!important;

}
div.map_object.drophover .overlay
{
  border:2px solid #6697C4!important;

}
.map_object.drophover:hover div.map_objecttools,
.map_object.drophover:hover div.map_objectsettings
{
    display:none;
}
.graphicalmapicon
{
	background:none;
	display:block;
	position:absolute;
}
.graphicalmapicon .label
{
	background:#fff;
	padding:2px;
	display:inline-block
}
.graphicalmapicon.sensr .label,.graphicalmapicon.hasred .label,
.graphicalmapicon.sensq .label,.graphicalmapicon.hasredok .label
{
  background:#FDD5D7;
}
.map_object.master
{
  font-weight:bold;
}

.dependencyreplacer
{
  display:block;
  border:1px solid #aaa;
  padding:3px;
  margin-top:4px;
  overflow:hidden;
}

#mapeditsettingsform>table
{
	width:100%;
}
#mapeditsettingsform table td,
#addobjecttomapform table td
{
	padding: 2px;
}
#mapeditsettingsform div.sensorselect,
#addobjecttomapform div.sensorselect
{
	height: 360px;
}
#mapeditsettingsform select,
#mapeditsettingsform option,
#mapeditsettingsform input,
#addobjecttomapform select,
#addobjecttomapform option,
#addobjecttomapform input
{
	width: 370px;
}

Now you need to tell PRTG to load this custom CSS ; to do this , edit prtg.css file and go to the end of the file and add include smileys.css.

• Next step is to actually create a group that shows these customized status icons in PRTG interface.
• Go to <Path to PRTG>\webroot\mapobjects. Make a copy of an existing .htm like StatusXL.htm.
• Give it the same name as your css (e.g. smiley.htm)
• Edit the htm. Change map_icon_(whatever) to map_icon_smiley (in this example)
• Change the header from Whatever icons to Smiley icons :
• Login to PRTG and make sure you refresh it by pressing CTRL+F5
• you should be able to see a new group called “Smiley” that has those customized icons.

Nice!

Feedback is welcome.

Thats really nice!

But you have to ensure, that the icons have the right size. Otherwise the icons overlaps. I needed a couple of attemps. At least i've taken the same size as the "led....png"-icons.

Now i want to build up a map for my users. Where they can see one smiley only. I've seen that the backroundcolor of an mapobject changes, when the status of some sensors changes. So is it possible to take a picture as backround for a mapobject, that changes when one of the sensors changes? I just want a mapobject which contains only the name and a "status-smiley" of the selected sensor/device/group. I think my users could not understand, when the mapobject has a red, a yellow and a green smile. This happens when i'm selecting a device that has more than one sensor, and one sensor has an error.

I hope you understand what i mean. (i'm sorry my english is not very well :-) )

Hello Daniel, Thank you so much for the answer, but i have any questions about the .htm step.

Idk about version of PRTG, but i can't find for example "StatusXL.htm" at version 15.2.16.2229, so, I can not make it work :/

Can you update that answer please?

Thank you!!!

Hello Erick,

If the "statusXL.htm" is not available, you can the the "An icon" files like "An icon A1.htm" or "An icon A2_XL.htm"

There's a more recent guide to icons that can adapt to the status, here's the link:

• Can custom status-aware icons be used within maps?
  Creating a custom status reactive map object