Forum Discussion

Kevin_Ford's avatar
Kevin_Ford
Icon for Employee rankEmployee
4 years ago

Adding Weather to Map Widgets

LogicMonitor's Map widgets are a great and easy way to plot resources/groups geographically, including their status. A question that comes up occasionally is if it's possible to show weather information on top of these maps. While there's currently not a native option to show weather on a Map widget, it is possible to inject a weather layer onto an existing map with a bit of JavaScript.

Below is a link to a sample dashboard that can insert various types of weather info onto Map widgets. Simply save the linked JSON file to your local workstation, then in your LogicMonitor portal go to Dashboards and click Add > From File. 

Dynamic_Weather_Overlay.json

The magic happens in JavaScript embedded in the source of the Text widget. Feel free to explore the source code by entering the Text widget's Configure dialog and clicking the 'Source' button.

In typical overkill fashion, I included the option for several different types of weather information. The script looks for the following text (regardless of case) in the Map widget's title and adds the appropriate weather/info layer:

  • "Radar" or "Precip"
  • "NEXRAD Base"
  • "NEXRAD Echo Tops"
  • "MRMS"
  • "Temperature" (OpenWeatherMap.org API key required)
  • "Wind Speed" (OpenWeatherMap.org API key required)
  • "Cloud Cover" or "Satellite" (OpenWeatherMap.org API key required)
  • "fire" (for including perimeters of active wildfires)

Prerequisites

If you want to use one of the map types noted above as needing an API key (the other types use free APIs that don't require a key), you'll need to register for a free account on OpenWeatherMap.org. Once you've obtained an API key, just add a new dashboard token named 'OpenWeatherAPIKey' and paste your key into its value field. Alternatively, you can also hard-code the key directly in the 'openWeatherMapsAPIKey' variable near the top of the script.

The weather overlays should auto-update when the widgets perform their regular timed refresh. For instance, new radar imagery is made available every 10 minutes and will update automatically.

Weather sources currently defined within this script:

  • RainViewer.com - Excellent source of global weather imaging data. Updates approx. every 10 minutes. Used by the script for radar/precipitation maps.
  • Open Geospatial Consortium - Hosted by Iowa State University, an excellent free source of weather data. Since it sources data from the US National Weather Service, its data is local just US and Canada. Used by the script for NEXRAD and MRMS data.
  • OpenWeatherMap.org - Good source for some weather data such as wind speed, temperature, and cloud cover. Requires use of an API key, which is available for free.
  • National Interagency Fire Center - For data about active US wildfires.
     

Known Issues:

When switching to a different dashboard containing a Map widget, it's possible weather may still be visible on the new dashboard. If that happens just refresh the page.

dashboard
widgets
  • Kevin_Ford's avatar
    Kevin_Ford
    Icon for Employee rankEmployee
    3 months ago

    I've updated the example dashboard with another useful source: US power outages. The free API source I'm using provides the outage information by county, which also carries the benefit of  being able to display county boundaries & names.

    To enable it, just include "power outage" anywhere in the Map widget's title (case doesn't matter). Example: "Radar and US Power Outages". The more power customers currently reported as impacted by an outage, the darker I'm shading that county. To see details, just click the county. Like the other sources, the outage information will automatically refresh every few minutes.

    Some things to note:

    • Because both the power outage information and the wildfire overlays use clicks, only one can be enabled on a specific Map widget at a time. If you want to see both just add a separate Map widget for each on your dashboard.
    • By default, UIv4 doesn't process rendering of off-screen dashboard widgets until you scroll to them. Because of this, any Map widgets toward the bottom of your dashboard might not display weather. To fix that, go into your dashboard's edit screen & add a token named `isMapWidgetVirtualizationDisabled` with a value of "true". A similar flag is being developed for Text widgets as well, so in the meantime you might need to keep the widget containing the weather script toward the top of your dashboard.

     

  • Kevin_Ford's avatar
    Kevin_Ford
    Icon for Employee rankEmployee
    3 years ago

    I've updated the example dashboard linked above to a newer version that includes the ability to overlay information about large active wildfires in the US by including "fire" anywhere in the label of the map widget (example: "Precipitation and Wildfires"). These will appear on the map with the latest outline of the wildfire highlighted in red. Clicking a fire will pop-up information provided by the National Interagency Fire Center.