Geolocation in WUG using Leaflet.js


By now you’ve probably seen the Google Maps integration that was setup quite some time ago for WhatsUp® Gold. I decided since Google began requiring credit card information in order to obtain an API key, it was time to look into possible alternatives. What I found is that there are many alternatives ranging from free to ‘freemium’, none of which require a credit card being on file. This integration uses a few open source solutions

jsDelivr – fast, free, reliable open-source CDN
LeafletJS – an open-source JavaScript library for mobile-friendly interactive maps
Leaflet-providers – An extension to Leaflet that contains configurations for various free tile providers

The integration works very similar to the Google Maps integration — you provide latitude,longitude on either a device as a device attribute or on a group as the description. So, if you’ve already put this information into your WhatsUp® Gold you won’t need to re-do anything. There are many different quality of life improvements in this integration.

For those unfamiliar, you can use to easily get latitude and longitude values for any location. Once you have the information you would either:

  • Right-click a group -> Edit Group -> Set description to lat,lng for example 37.077979,-96.991419
  • Device Properties -> Attributes -> New Attribute -> Attribute Name: LatLong -> Set Attribute value to lat,lng for example 37.077979,-96.991419
  1. Zoom and map center are persisted throughout your session. If you move the map around, zoom in/out and the page refreshes the map will stay at the new area. This is done using SessionStorage. You can get the values of these using the browser console and these commands: sessionStorage.lng sessionStorage.zoomLev — using the values from these, you can update the files defaults
  2. As opposed to the whole page refreshing every so often, just the markers on the map update. This is especially useful if you have a ton of markers. This is done using some JSON calls to the other files included in the .zip
  3. Reduced the amount of dependencies on WUG files, although there are still some files this  customization depends on, it has been drastically reduced which means better load times and compatibility. Noting that, there is no guarantee this will work in all previous/future versions of WhatsUp® Gold (it was tested in v2018 SP2)
  4. There is now one file which can display both groups and devices. There are options to toggle either one on/off. This was done using MarkerGroups in Leaflet
  5. When clicking on a device/group, a new tab opens as opposed to using the parent page to open device properties/group properties
  6. You now have the option to switch between map providers, set the default map provider, etc. Some of these providers do require either an API key or agreeing to their terms of service, these are noted in the file specifically and will be disabled if you do not provide an API key and/or agree to their terms of service

HERE: To acquire the appCode and appID sign-up for free here: (Freemium)
Thunderforest: In order to use Thunderforest maps, you must register. (Freemium)
ArcGIS: In order to use ArcGIS maps, you must register at and abide by the terms of service.

I take *NO CREDIT* for any of the map tiles provided! Ensure to abide by the terms of service for each of the map tile providers.

To use this simply Download here and extract to InstallDir\Ipswitch\WhatsUp\HTML\NmConsole

Just like before, you can put this in a Dashboard using Free form text/html and this code:

<iframe style="border: 0px #FFFFFF none;" src="/NmConsole/wug-GEOLOCATION.asp" name="dash_frame" width="100%" height="1000px" frameborder="0" marginwidth="0px" marginheight="0px" scrolling="yes"></iframe>


  1. Using the Here maps devices that are up are being marked as down, any ideas?
    Just trying to use devices on to a global map, but some devices that a UP (no issues) are showing as down.

    1. If you are using any custom states, you need to modify the ASP to accommodate for those custom states. Reference the state IDs in the MonitorState table of the database and then modify the up/down conditions accordingly.

  2. Hi Jason
    Using the Here maps and all works fine until there is a brief outage on an active monitor on one of the map devices.
    The device stays down (red) on the map even though the device recovers and is okay in WUG.
    The only way to get the device green again is to put it in and out of maintenance.

    Any ideas ?

    1. If you are using any custom states, you need to modify the ASP to accommodate for those custom states. Reference the state IDs in the MonitorState table of the database and then modify the up/down conditions accordingly.

  3. I’m trying to create a main location group (That’s empty) with multiple sub dynamic groups, however nothing ever shows green, just the I_StaticGroup.svg icon.

    The only way I can get a green dot on the map (I_StaticGroupUp.svg) is if I use a standard group and manually add devices to it?

    Any way for it to poll sub groups / sub dynamic groups?

    1. Dynamic groups do not have a status associated with them. You could however use Layer 2 dynamic groups, which do show the status.

  4. Have tried everything I can think of to make this work correctly. I’m trying to get it to display status of sub groups, for example I have two groups, US & EU, US has three sub-groups, same with EU. Regardless of group type, static or L2-dynamic, If I change the group name in the ASP to US it continues to show every group and every device, include the EU groups.

    1. Are you referring to the dynamic group selector? That’s specifically for devices. If you want only a specific group to show up, the ASP would need to be customized further from where it is now.

  5. The device attributes already exist for Latitude and Longitude. Is there a way to use these rather than recreate a new LatLong attribute for each device?

  6. Hello Jason
    I have a problem with your Geolocation script.
    I copied the three files in the nmconsole directory.
    I modified the file by inserting the keys I received from the site
    I configured coordinates in the group as description, but i don’t see the map as background.
    could you please give me the information to proceed?

    1. Hi Enrico! Would you please post the browser console log to my GitHub or email it to That will help me to troubleshoot the problem(s). For now, you could try one of the various other map tiles.

  7. Thanks for spending your time and providing this information, I greatly appreciate it. I wonder if it is possible to have a device or a location that has down monitors to pop to the foreground. I have several location that are too close to each other on the map so they are obscuring each other (and I can’t use the zoom in or out since that will prevent view of all locations). The location with the lowest letter is on top so I can’t see other locations below when they change status.

Leave a comment

Your email address will not be published.

Reload Image

This site uses Akismet to reduce spam. Learn how your comment data is processed.