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.

Article Comments

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>

Nov, 2012 - Permalink

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


Dec, 2014 - Permalink

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


Dec, 2014 - Permalink

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


Apr, 2016 - Permalink

Hello Simon,

I am afraid that it is not possible, sorry.

Best regards


Apr, 2016 - Permalink

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;


Jan, 2018 - Permalink

I found. Just add this code : 

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

Feb, 2018 - Permalink

Hi Arnaud,

Thanks for the update :)

Kind regards,
Stephan Linke, Tech Support Team


Feb, 2018 - Permalink

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


Mar, 2018 - Permalink

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.


Mar, 2018 - Permalink

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.


Mar, 2018 - Permalink

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


Mar, 2018 - Permalink

Hi nate,

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

Best regards.


Mar, 2018 - Permalink

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.


Feb, 2019 - Permalink

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 ?


Aug, 2019 - Permalink