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 GetLatLong.net 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.lat 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: https://developer.here.com/ (Freemium)
Thunderforest: In order to use Thunderforest maps, you must register. https://thunderforest.com/pricing/ (Freemium)
ArcGIS: In order to use ArcGIS maps, you must register at https://developers.arcgis.com/en/sign-up/ 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:

1
2
3
4
<center>
<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>
</center>

Leave a Reply

Your email address will not be published. Required fields are marked *

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