New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


How can I change the way markers look like in PRTG's geo maps?

Votes:

0

Your Vote:

Up

Down

We're using PRTG's maps with the MapQuest option.

Is there a way to change the map markers to something like the pins in Google Maps? We have a large number of locations with multiple office in close proximity. When viewing the global map we only see one of the buildings for each location as the others are hidden beneath it.

custom-html customize geo-maps locations maps markers prtg

Created on Nov 5, 2012 8:36:54 AM by  Daniel Zobel [Paessler Support]

Last change on Nov 5, 2012 8:41:21 AM by  Daniel Zobel [Paessler Support]



14 Replies

Accepted Answer

Votes:

0

Your Vote:

Up

Down

This article applies to PRTG Network Monitor 12 through 17.3.33

Customize Appearance of Geo Map Markers

Important note: The current customization approach is unsupported and deprecated as of versions 17.3.34/17.4.35. This customization no longer works. For more details, see How can I re-brand and customize the PRTG web interface using CSS and Javascript?

Yes, the marker appearance can be changed.

In PRTG Network Monitor 13.2 or later, you can customize the appearance of markers easily. See the descriptions below. In PRTG 12, the approach works a bit different. See the end of this article.


Customizing the Size of Markers

You can change the size of markers in Geo Maps this way:

  • Open this file in a text editor (or create it if it has not existed already). You can adjust the size of markers with the following line:_Prtg.Core.objects.geomapIconSize = 24; //default
  • If you define a size smaller than 18, the icons will disappear. In this case, only colored points will be displayed. The color depends on the current object status._Prtg.Core.objects.geomapIconSize = 16; //customized

Changing the Shape of Markers to Circles

You can display circle markers in your Geo Maps instead of square markers this way:

  • Open this file in a text editor (or create it if it has not existed already).
  • Add the following line: .map-marker{border-radius:20px;}

Of course, you can define any size for the circles suitable to your needs.


Circle Markers and Square Markers in the Same Geo Map

Using the Labeling Locations feature of PRTG Geo Maps (see PRTG Manual: Geo Maps), you can even display round and square markers in the same geomap, depending on the type of object in the map.

Consider you have various locations in your map—some of them use an ADSL connection, some of them a cable connection. Now you would like to display markers depending on the connectivity of the location: ADSL with circle markers, cable with squared markers. In addition, the "real" label of the location should be displayed and not only "ADSL".

  • Provide the following information in location settings of the respective objects in two lines: Location XY ADSL LONGITUDE,LATITUDE
  • Note that the selector "ADSL" is important here!
  • Do this with all objects you want to consider with their specific properties.
  • Add the following to styles_custom.css: .map-marker[title~="ADSL"], .map-marker[data-original-title~="ADSL"]{border-radius:20px;}

Now will see your locations with their corresponding label and in the shape you have defined for them respectively!


Changing the Color of Geo Markers

You can change the colors of the markers in geo maps with the following code:

.map-marker.up
{
  background-color: #b4cc38;
}

Add this code to the file \webroot\css\styles_custom.css (see above). You can use any color by editing the color code, which is #b4cc38 in the example.


Customizing in PRTG Network Monitor 12

For PRTG Network Monitor 12, the following code will "transform" the markers to circles with 5px aperture.

Please append the following code to the file htmlheader_customer.htm in the \website\includes sub folder of your PRTG program directory.

Please change the code to suit your needs.

<style>
.map-marker a{
background: none!important;
}
 
.map-marker{
border: 1px solid #666!important;
border-radius: 10!important;
margin:0!important;
padding:0!important; 
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
width:5px!important; /* width of the symbol */
height: 5px!important; /* height of the symbol */
}
</style>

Created on Nov 5, 2012 8:41:04 AM by  Daniel Zobel [Paessler Support]

Last change on Mar 22, 2018 12:22:49 PM by  Brandy Mauff [Paessler Support]



Votes:

0

Your Vote:

Up

Down

is there anyway to change the markers that when zoomed out they dont overlap each other? Not by making them smaller

Created on Dec 11, 2014 4:07:01 PM by  allygray (0) 1



Votes:

0

Your Vote:

Up

Down

Sorry but there is no way to avoid the overlapping without changing maker size.

Created on Dec 15, 2014 12:12:41 PM by  Stefan Messner [Paessler Support]

Last change on Dec 15, 2014 12:14:19 PM by  Stefan Messner [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Is there a possibility to define a marker like a distance between two points, i.e. a vpn-tunnel between two firewalls ?

Created on Apr 5, 2016 9:58:57 AM by  Simon Panknin (0)



Votes:

0

Your Vote:

Up

Down

Hello Simon,

I am afraid that it is not possible, sorry.

Best regards

Created on Apr 8, 2016 7:35:36 AM by  Isidora Jeremic [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hello, I have custom my global map for have only statut points and my objects are offbeat on map, do you have an idea ? When I zoom many on the map, the points are correct when I'm very close. Here my css code :

<style>
.map-marker a{
	background: none!important;
} 
	
	.map-marker.downack
{
  z-index:8;
	background-color:<#colorcode color="statusdownack">;
	
	border-radius: 10px!important;
	border:0px!important;
	width: 12px!important;
	height: 12px!important;
	margin: 15px 0px 0px 0px!important;
}

.map-marker.down
{
  z-index:9;
	background-color:<#colorcode color="statusdown">;
	
	border-radius: 10px!important;
	border:0px!important;
	width: 10px!important;
	height: 10px!important;
	margin: 15px 0px 0px 0px!important;
}
.map-marker.warn
{
  z-index:5;
  background-color:<#colorcode color="statuswarning">;

	border-radius: 10px!important;
	border:0px!important;
	width: 12px!important;
	height: 12px!important;
	margin: 15px 0px 0px 0px!important;
}
.map-marker.unusual
{
  z-index:4;
  background-color:<#colorcode color="statusunusual">;
  
	border-radius: 10px!important;
	border:0px!important;
	width: 12px!important;
	height: 12px!important;
	margin: 15px 0px 0px 0px!important;
}
.map-marker.up
{
  z-index:3;
  background-color: <#colorcode color="statusup">;
  
	border-radius: 10px!important;
	border:0px!important;
	width: 12px!important;
	height: 12px!important;
	margin: 15px 0px 0px 0px!important;
}
.map-marker.unknown
{
  z-index:2;
  border-color: #707172;
  background-color: <#colorcode color="statusunknown">;
  border: 1px solid #fff;
/*  padding: 0px;
*/
	border-radius: 10px!important;
	border:0px!important;
	width: 12px!important;
	height: 12px!important;
	margin: 15px 0px 0px 0px!important;
}
.map-marker.paused
{
  z-index:1;
  border-color: #6294C8;
  background-color: <#colorcode color="statuspaused">;
  border: 1px solid #fff;
/*  padding: 0px;
*/
	border-radius: 10px!important;
	border:0px!important;
	width: 12px!important;
	height: 12px!important;
	margin: 15px 0px 0px 0px!important;
}

</style>

Update : 02/02/2018 , add : margin: 15px 0px 0px 0px!important;

Created on Jan 31, 2018 5:29:17 PM by  Arnaud (20) 2

Last change on Feb 2, 2018 1:35:46 PM by  Arne Seifert [Paessler Support]



Votes:

0

Your Vote:

Up

Down

I found. Just add this code :

margin: 15px 0px 0px 0px!important; 

Created on Feb 1, 2018 10:24:51 AM by  Arnaud (20) 2



Votes:

0

Your Vote:

Up

Down

Hi Arnaud,

Thanks for the update :)


Kind regards,
Stephan Linke, Tech Support Team

Created on Feb 1, 2018 11:26:09 AM by  Stephan Linke [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi, I've tried following all of the above customization options and I cannot get any changes to actually show. Nothing I do affect the already created Geomap I've made...I've even tried rebooting the PRTG app...

Is there something I'm missing?

thanks

Created on Mar 12, 2018 8:17:33 PM by  nate_c (0)



Votes:

0

Your Vote:

Up

Down

Hi, is it possible to make the entire square the green or red as that it shows on the small vertical rectangle currently? We have thousands of sites on the GEO map on a large 16 foot video display wall and you can barely see the status color changes since its only a small portion of the box changing.

Created on Mar 12, 2018 8:57:03 PM by  nate_c (0)



Votes:

0

Your Vote:

Up

Down

Hi Nate,

Unfortunately, we can't offer any support from our side as we are not able to maintain the solution on your side. Additionally, any changes could cause side-effects in the webinterface of PRTG.

Maybe another user has a good solution for you?

Please note that all changes for CSS-Code have to be written in the "styles_custom_v2.css" on the Core Server under "C:\Program Files (x86)\PRTG Network Monitor\webroot\css\".

Best regards.

Created on Mar 13, 2018 9:05:58 AM by  Dariusz Gorka [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Ok thanks, I was actually able to make it work last night.

I do have one more question though...how do I decrease the size of the status icons overall? I tried putting the above

_Prtg.Core.objects.geomapIconSize = 16; customized

statement into the scripts_custom_v2.js and nothing happened...

thanks

Created on Mar 13, 2018 1:17:36 PM by  nate_c (0)



Votes:

0

Your Vote:

Up

Down

Hi nate,

Do you mean the icon size of the icons within the Geo Map?

Best regards.

Created on Mar 14, 2018 10:01:28 AM by  Dariusz Gorka [Paessler Support]



Votes:

0

Your Vote:

Up

Down

I too would like to be able to change the size and clarity of the geo-map markers. Best would be to use custom icons (transparent png).

We are using a 4K display on the wall here and we have a geographically dispersed organization with about 50 locations. As it is, the markers are too small and unnoticable to quickly tell at what location we have a problem.

Created on Feb 13, 2019 7:47:57 AM by  Mickael Reijke (0)



Please log in or register to enter your reply.


Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.