What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

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

Votes:

0

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 [Product Manager]

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



15 Replies

Accepted Answer

Votes:

0

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 [Product Manager]

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



Votes:

0

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



Votes:

0

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

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



Votes:

0

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

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

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



Votes:

0

I found. Just add this code :

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

Created on Feb 1, 2018 10:24:51 AM



Votes:

0

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

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



Votes:

0

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



Votes:

0

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

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



Votes:

0

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

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



Votes:

0

I try to change the markers to circle using the above method, add this ".map-marker{border-radius:20px;}" line to C:\Program Files (x86)\PRTG Network Monitor\webroot\css\styles_custom_v2.css file but nothing happened. Should I restart the Core server or Probe ?

Created on Aug 23, 2019 3:55:44 AM




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.