NPM Weather Map Overlay

I would like to create a live weather map overlay of North America, I have searched the forum and I have found solutions but they are all over 5 years old.

Can I please receive updated steps on how to do so?

Thanks,

Find more posts tagged with

weather_map

weather_radar

weather

weathermap

Accepted answers

All comments

Tordormore

I'm in the same boat, tried several "solutions" listed in the forums. None of them worked. I'm a simple person and really need straight forward simple instructions.

truegodfather

I did some more research it other posts on Thwack and thanks to @jdchaiken he provided modifications to the script in "Adding Live Weather to the "Worldwide Map" Resource" post.

I first went to the Openweather website and created a free account and a API key.

I applied the API key to the new script and added my worldmap ID

YOUR_WORLDMAPID - Replace with the ID of your Map

YOUR_API_KEY - Replace with your apikey


$(document).ready(function(){
/* ------------------------------------------------------------------------------------------------- */
/*                                             Settings                                              */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
var worldmapidnum = "YOUR_WORLDMAPID"; // [string] - replace with your worldmap id
var worldmapHeight = "400px"; // [string] - this height will be used instead of the height defined in the map edit (required because of fullscreen button)

var addFullscreenButton = true; // [true, false] - adds the full screen button in hte top left corner of the map

var urlActivateOnly = false; // [false, true] - if false the map customizations will always run - if true the map customizations will only be applied when matching the url code below
var urlCode = "beta"; // [string] - when urlActivateOnly is true the map customizations will only be shown when this string is a param in the url, example page.aspx?resource=123123&beta=1
var activateButtonText = "Enable Weather For Map"; // [string] - The text to display on the button that enables the map modifications

var waitForMapToLoad = 2500; // [int] - time in ms spent waiting for the map to load before customizing
var apiKey = "YOUR_API_KEY"

/* ------------------- Change the following for which layers you want displayed -------------------- */
/*  [selectable, displayedOnLoad]                                                                    */
/*      selectable      - set to true and the layer will have a checkbox to toggle its state         */
/*      displayedOnLoad - set to true and the layer will be selected by default                      */
/* ------------------------------------------------------------------------------------------------- */
var showTempLayer = [true, false];
var showCloudsLayer = [true, false];
var showSnowLayer = [true, false];
var showPrecipitationLayer = [true, true];
var showPressureLayer = [true, false];
var showWindLayer = [true, false];
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */


/* ---------------- Don't modify below this line unless you know what you are doing --------------- */
var worldmapidfull = $(("#worldmap" + worldmapidnum));

// checks for [urlCode] as a get param in the url,    EX: page.aspx?resource=123123&beta=1 will return true (if [urlCode] is set to "beta")
var mapDebugModeEnabled = true;
if (urlActivateOnly) {
  var $betaMaps = $("#betaMaps");
  $betaMaps.attr("href", window.location + "&" + urlCode + "=true");
  mapDebugModeEnabled = getQueryVariable(urlCode);
} else {
  $("#betaMaps").remove(); // remove the beta maps enabled button
}
 
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;iMap Beta Mode Enabled');
  }
 
  var body = document.getElementsByTagName('body')[0];
 
  var css = document.createElement('style');
   css.type = 'text/css';
   css.text = '#worldmap' + worldmapidnum + ' { height: ' + worldmapHeight + '; }';
   body.appendChild(css);
 
  if (addFullscreenButton) {
   var js = document.createElement('script');
    js.type = 'text/javascript';
    js.text = "/* L.Control.ZoomFS - default Leaflet.Zoom control with an added fullscreen button - built to work with Leaflet version 0.5 - https://github.com/elidupuis/leaflet.zoomfs */L.Control.ZoomFS = L.Control.Zoom.extend({includes: L.Mixin.Events,onAdd: function (map) {var zoomName = 'leaflet-control-zoom',barName = 'leaflet-bar',partName = barName + '-part',container = L.DomUtil.create('div', zoomName + ' ' + barName);this._map = map;this._isFullscreen = false;this._zoomFullScreenButton = this._createButton('','Full Screen','leaflet-control-fullscreen leaflet-bar-part leaflet-bar',container, this.fullscreen, this);map.on('zoomend zoomlevelschange', this._updateDisabled, this);return container;},fullscreen: function() {if (!this._isFullscreen) {this._enterFullScreen();} else {this._exitFullScreen();}this._map.invalidateSize();},_enterFullScreen: function() {var container = this._map._container;container.style.position = 'fixed';container.style.left = 0;container.style.top = 0;container.style.width = '100%';container.style.height = '100%';L.DomUtil.addClass(container, 'leaflet-fullscreen');this._isFullscreen = true;L.DomEvent.addListener(document, 'keyup', this._onKeyUp, this);this._map.fire('enterFullscreen');},_exitFullScreen: function() {var container = this._map._container;L.DomUtil.removeClass(container, 'leaflet-fullscreen');this._isFullscreen = false;container.removeAttribute('style');var position = L.DomUtil.getStyle(container, 'position');if (position !== 'absolute' && position !== 'relative') {container.style.position = 'relative';}L.DomEvent.removeListener(document, 'keyup', this._onKeyUp);this._map.fire('exitFullscreen');},_onKeyUp: function(e) {if (!e) e = window.event;if (e.keyCode === 27 && this._isFullscreen === true) {this._exitFullScreen();}}});";
    body.appendChild(js);
  }
  
  var script = document.createElement('script');
   script.type = 'text/javascript';
   script.text = '$(document).ready(function(){worldmapidfull.attr("style", "position:relative");var leaflet_mapobj = SW.Core.Volatile.WorldMaps[worldmapidnum].leaflet();L.marker([51.5, -0.09]).addTo(leaflet_mapobj).bindPopup("A pretty CSS3 popup. 
 Easily customizable.").openPopup();});';
   body.appendChild(script); 
  
  function customizeMap(worldmapidfullParam, addFullscreenButtonParam) {
   var leaflet_mapobj = SW.Core.Volatile.WorldMaps[worldmapidnum].leaflet();
  
   // set up the snow tiles
   var snow = new L.TileLayer('http://{s}.tile.openweathermap.org/map/snow/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: 'Weather Data by OpenWeatherMap',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the temperature tiles
   var temp = new L.TileLayer('http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: 'Weather Data by OpenWeatherMap',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the wind speed tiles
   var wind = new L.TileLayer('http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: '',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the pressure tiles
   var pressure = new L.TileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: '',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the precipitation tiles
   var precipitation = new L.TileLayer('http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: 'Weather Data by OpenWeatherMap',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the cloud tiles
   var clouds = new L.TileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: '',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // adds the default layers to the map
   if (showTempLayer[1]) {
    leaflet_mapobj.addLayer(temp);
   }
   if (showCloudsLayer[1]) {
    leaflet_mapobj.addLayer(clouds);
   }
   if (showSnowLayer[1]) {
    leaflet_mapobj.addLayer(snow);
   }
   if (showPrecipitationLayer[1]) {
    leaflet_mapobj.addLayer(precipitation);
   }
   if (showPressureLayer[1]) {
    leaflet_mapobj.addLayer(pressure);
   }
   if (showWindLayer[1]) {
    leaflet_mapobj.addLayer(wind);
   }
  
  
   // only add the controler if one of the layers is selectable
   if (showTempLayer[0] || showCloudsLayer[0] || showSnowLayer[0] || showPrecipitationLayer[0] || showPressureLayer[0] || showWindLayer[0])
   {
    // this creates a selector that allows you to show/hide the tiles
    WeatherControl = function() {
     var control = new (L.Control.extend({
     options: { position: 'topright' },
     onAdd: function (map) {
      controlDiv = L.DomUtil.create('div', 'leaflet-control leaflet-bar');
      var innerHTMLOfControlDiv = '';
      
       /* Adds controls for the layers -- TODO: Make this a function */
       if (showTempLayer[0]) {
        if (showTempLayer[1]) {
         innerHTMLOfControlDiv += ' Temperature
';
        }
        else {
         innerHTMLOfControlDiv += ' Temperature
';
        }
       }
      
       if (showCloudsLayer[0]) {
        if (showCloudsLayer[1]) {
         innerHTMLOfControlDiv += ' Clouds
';
        }
        else {
         innerHTMLOfControlDiv += ' Clouds
';
        }
       }
      
       if (showSnowLayer[0]) {
        if (showSnowLayer[1]) {
         innerHTMLOfControlDiv += ' Snow
';
        }
        else {
         innerHTMLOfControlDiv += ' Snow
';
        }
       }
      
       if (showPressureLayer[0]) {
        if (showPressureLayer[1]) {
         innerHTMLOfControlDiv += ' Pressure
';
        }
        else {
         innerHTMLOfControlDiv += ' Pressure
';
        }
       }
      
       if (showPrecipitationLayer[0]) {
        if (showPrecipitationLayer[1]) {
         innerHTMLOfControlDiv += ' Precipitation
';
        }
        else {
         innerHTMLOfControlDiv += ' Precipitation
';
        }
       }
      
       if (showWindLayer[0]) {
        if (showWindLayer[1]) {
         innerHTMLOfControlDiv += ' Wind
';
        }
        else {
         innerHTMLOfControlDiv += ' Wind
';
        }
       }
      
      innerHTMLOfControlDiv += '';
     
      controlDiv.innerHTML = innerHTMLOfControlDiv;
     
      return controlDiv;
     }
     }));
    
     return control;
    };

    // shows/hides the tile layers for weather
    worldmapidfullParam.on("click", "label", function() {
     if (this.id == "precipitation") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(precipitation);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(precipitation);
      }
     } else if (this.id == "clouds") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(clouds);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(clouds);
      }
     } else if (this.id == "temp") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(temp);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(temp);
      }
     } else if (this.id == "snow") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(snow);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(snow);
      }
     } else if (this.id == "pressure") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(pressure);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(pressure);
      }
     } else if (this.id == "wind") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(wind);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(wind);
      }
     }
    });
   
    // adds the show/hide controls for the weather tiles
    leaflet_mapobj.addControl(WeatherControl());
   }
  
   if (addFullscreenButtonParam) {
    // create custom zoom control with fullscreen button
    var zoomFS = new L.Control.ZoomFS();
   
    // add custom zoom control
    leaflet_mapobj.addControl(zoomFS);
   
    // you can bind to 2 events: enterFullscreen and exitFullscreen
    // note that these events are on the map object, not the zoomfs object...
    leaflet_mapobj.on('exitFullscreen', function(){
     worldmapidfull.css("height", worldmapHeight);
    });
   }
  }
 
  setTimeout(function(){
   customizeMap(worldmapidfull, addFullscreenButton);
  }, waitForMapToLoad);
}
});


#betaMaps { padding: 8px 6px; border: 1px solid gray; background: #e7e7e7; }
.leaflet-top.leaflet-right .leaflet-control.leaflet-bar { background: white; }
.leaflet-top.leaflet-right .leaflet-control-layers-overlays { padding: 5px; }
.leaflet-control-fullscreen { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASdJREFUeNqE0r9LgkEYwPF7XxVRxN5s0iGDJKhVAqHJwSXQzUGHhnB1cesfaGi0zTWCmgMHl4Ymh/ZIgv6ADJQkyNfqe/C8ccb744HPy73v3XP33L1n7RZ3BkqpDH7Qx1gFRw2nMvbDItmlEcMIx1iFJCfxgEO4No853lCVmcOigTLe8RnLOc6Mxhk2cSuTJaQa0zcsbKCFmS7bnLmCC+R9Vn1BFxPvQ9zozMjK2wEll3CFI+9cbKNTr1aI2PMest6L/a9zFZG81m8mWyIs1saYyV8+lfiF65f8iruIxGv5lX+nvYUp9tHGiZy4uQV9HZ9wI4f2rMfE5fc8ooc6BiErd3CJcz1WX5IFjTTu0ZQqgqKIIQ6wsOWglJTvROxZX82UtJe/AgwAp501bVVIRc4AAAAASUVORK5CYII=); }

Enable Weather For Map

Tordormore

So you pasted this entire piece of code inside a Custom HTML Widget and that was it? did you have to start off with actual HTML code identifying headers, body, or divisions? I understand signing up for OpenWeather account and API keys, Map ID's, etc. I'm just not able to get this working in my environment and I feel like I'm missing some key piece of data that is obvious to everyone else, but not to me (new to SolarWinds).

truegodfather

Correct, you add a Custom HTML widget and copy the entire script inside the widget you add your worldmap ID and your OpenWeather API key into the script

nicholas.t.carey

Tordormore-

On the page you are displaying your map, Add the Custom HTML Resource under it. Edit the script below (Thank you @truegodfather) with your info, and just paste it into the HTML resource. I have highlighted all the areas you need to edit. No further edits are required.


$(document).ready(function(){
/* ------------------------------------------------------------------------------------------------- */
/*                                             Settings                                              */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
var worldmapidnum = "YOUR_WORLDMAPID"; // [string] - replace with your worldmap id
var worldmapHeight = "400px"; // [string] - this height will be used instead of the height defined in the map edit (required because of fullscreen button)

var addFullscreenButton = true; // [true, false] - adds the full screen button in hte top left corner of the map

var urlActivateOnly = false; // [false, true] - if false the map customizations will always run - if true the map customizations will only be applied when matching the url code below
var urlCode = "beta"; // [string] - when urlActivateOnly is true the map customizations will only be shown when this string is a param in the url, example page.aspx?resource=123123&beta=1
var activateButtonText = "Enable Weather For Map"; // [string] - The text to display on the button that enables the map modifications

var waitForMapToLoad = 2500; // [int] - time in ms spent waiting for the map to load before customizing
var apiKey = "YOUR_API_KEY"

/* ------------------- Change the following for which layers you want displayed -------------------- */
/*  [selectable, displayedOnLoad]                                                                    */
/*      selectable      - set to true and the layer will have a checkbox to toggle its state         */
/*      displayedOnLoad - set to true and the layer will be selected by default                      */
/* ------------------------------------------------------------------------------------------------- */
var showTempLayer = [true, false];
var showCloudsLayer = [true, false];
var showSnowLayer = [true, false];
var showPrecipitationLayer = [true, true];
var showPressureLayer = [true, false];
var showWindLayer = [true, false];
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */


/* ---------------- Don't modify below this line unless you know what you are doing --------------- */
var worldmapidfull = $(("#worldmap" + worldmapidnum));

// checks for [urlCode] as a get param in the url,    EX: page.aspx?resource=123123&beta=1 will return true (if [urlCode] is set to "beta")
var mapDebugModeEnabled = true;
if (urlActivateOnly) {
  var $betaMaps = $("#betaMaps");
  $betaMaps.attr("href", window.location + "&" + urlCode + "=true");
  mapDebugModeEnabled = getQueryVariable(urlCode);
} else {
  $("#betaMaps").remove(); // remove the beta maps enabled button
}
 
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;iMap Beta Mode Enabled');
  }
 
  var body = document.getElementsByTagName('body')[0];
 
  var css = document.createElement('style');
   css.type = 'text/css';
   css.text = '#worldmap' + worldmapidnum + ' { height: ' + worldmapHeight + '; }';
   body.appendChild(css);
 
  if (addFullscreenButton) {
   var js = document.createElement('script');
    js.type = 'text/javascript';
    js.text = "/* L.Control.ZoomFS - default Leaflet.Zoom control with an added fullscreen button - built to work with Leaflet version 0.5 - https://github.com/elidupuis/leaflet.zoomfs */L.Control.ZoomFS = L.Control.Zoom.extend({includes: L.Mixin.Events,onAdd: function (map) {var zoomName = 'leaflet-control-zoom',barName = 'leaflet-bar',partName = barName + '-part',container = L.DomUtil.create('div', zoomName + ' ' + barName);this._map = map;this._isFullscreen = false;this._zoomFullScreenButton = this._createButton('','Full Screen','leaflet-control-fullscreen leaflet-bar-part leaflet-bar',container, this.fullscreen, this);map.on('zoomend zoomlevelschange', this._updateDisabled, this);return container;},fullscreen: function() {if (!this._isFullscreen) {this._enterFullScreen();} else {this._exitFullScreen();}this._map.invalidateSize();},_enterFullScreen: function() {var container = this._map._container;container.style.position = 'fixed';container.style.left = 0;container.style.top = 0;container.style.width = '100%';container.style.height = '100%';L.DomUtil.addClass(container, 'leaflet-fullscreen');this._isFullscreen = true;L.DomEvent.addListener(document, 'keyup', this._onKeyUp, this);this._map.fire('enterFullscreen');},_exitFullScreen: function() {var container = this._map._container;L.DomUtil.removeClass(container, 'leaflet-fullscreen');this._isFullscreen = false;container.removeAttribute('style');var position = L.DomUtil.getStyle(container, 'position');if (position !== 'absolute' && position !== 'relative') {container.style.position = 'relative';}L.DomEvent.removeListener(document, 'keyup', this._onKeyUp);this._map.fire('exitFullscreen');},_onKeyUp: function(e) {if (!e) e = window.event;if (e.keyCode === 27 && this._isFullscreen === true) {this._exitFullScreen();}}});";
    body.appendChild(js);
  }
  
  var script = document.createElement('script');
   script.type = 'text/javascript';
   script.text = '$(document).ready(function(){worldmapidfull.attr("style", "position:relative");var leaflet_mapobj = SW.Core.Volatile.WorldMaps[worldmapidnum].leaflet();L.marker([51.5, -0.09]).addTo(leaflet_mapobj).bindPopup("A pretty CSS3 popup. 
 Easily customizable.").openPopup();});';
   body.appendChild(script); 
  
  function customizeMap(worldmapidfullParam, addFullscreenButtonParam) {
   var leaflet_mapobj = SW.Core.Volatile.WorldMaps[worldmapidnum].leaflet();
  
   // set up the snow tiles
   var snow = new L.TileLayer('http://{s}.tile.openweathermap.org/map/snow/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: 'Weather Data by OpenWeatherMap',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the temperature tiles
   var temp = new L.TileLayer('http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: 'Weather Data by OpenWeatherMap',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the wind speed tiles
   var wind = new L.TileLayer('http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: '',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the pressure tiles
   var pressure = new L.TileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: '',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the precipitation tiles
   var precipitation = new L.TileLayer('http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: 'Weather Data by OpenWeatherMap',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // set up the cloud tiles
   var clouds = new L.TileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png?appid=YOUR_API_KEY', {
    attribution: '',
    isBaseLayer: false,
    opacity: 0.4,
    maxZoom: 18
   });
  
   // adds the default layers to the map
   if (showTempLayer[1]) {
    leaflet_mapobj.addLayer(temp);
   }
   if (showCloudsLayer[1]) {
    leaflet_mapobj.addLayer(clouds);
   }
   if (showSnowLayer[1]) {
    leaflet_mapobj.addLayer(snow);
   }
   if (showPrecipitationLayer[1]) {
    leaflet_mapobj.addLayer(precipitation);
   }
   if (showPressureLayer[1]) {
    leaflet_mapobj.addLayer(pressure);
   }
   if (showWindLayer[1]) {
    leaflet_mapobj.addLayer(wind);
   }
  
  
   // only add the controler if one of the layers is selectable
   if (showTempLayer[0] || showCloudsLayer[0] || showSnowLayer[0] || showPrecipitationLayer[0] || showPressureLayer[0] || showWindLayer[0])
   {
    // this creates a selector that allows you to show/hide the tiles
    WeatherControl = function() {
     var control = new (L.Control.extend({
     options: { position: 'topright' },
     onAdd: function (map) {
      controlDiv = L.DomUtil.create('div', 'leaflet-control leaflet-bar');
      var innerHTMLOfControlDiv = '';
      
       /* Adds controls for the layers -- TODO: Make this a function */
       if (showTempLayer[0]) {
        if (showTempLayer[1]) {
         innerHTMLOfControlDiv += ' Temperature
';
        }
        else {
         innerHTMLOfControlDiv += ' Temperature
';
        }
       }
      
       if (showCloudsLayer[0]) {
        if (showCloudsLayer[1]) {
         innerHTMLOfControlDiv += ' Clouds
';
        }
        else {
         innerHTMLOfControlDiv += ' Clouds
';
        }
       }
      
       if (showSnowLayer[0]) {
        if (showSnowLayer[1]) {
         innerHTMLOfControlDiv += ' Snow
';
        }
        else {
         innerHTMLOfControlDiv += ' Snow
';
        }
       }
      
       if (showPressureLayer[0]) {
        if (showPressureLayer[1]) {
         innerHTMLOfControlDiv += ' Pressure
';
        }
        else {
         innerHTMLOfControlDiv += ' Pressure
';
        }
       }
      
       if (showPrecipitationLayer[0]) {
        if (showPrecipitationLayer[1]) {
         innerHTMLOfControlDiv += ' Precipitation
';
        }
        else {
         innerHTMLOfControlDiv += ' Precipitation
';
        }
       }
      
       if (showWindLayer[0]) {
        if (showWindLayer[1]) {
         innerHTMLOfControlDiv += ' Wind
';
        }
        else {
         innerHTMLOfControlDiv += ' Wind
';
        }
       }
      
      innerHTMLOfControlDiv += '';
     
      controlDiv.innerHTML = innerHTMLOfControlDiv;
     
      return controlDiv;
     }
     }));
    
     return control;
    };

    // shows/hides the tile layers for weather
    worldmapidfullParam.on("click", "label", function() {
     if (this.id == "precipitation") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(precipitation);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(precipitation);
      }
     } else if (this.id == "clouds") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(clouds);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(clouds);
      }
     } else if (this.id == "temp") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(temp);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(temp);
      }
     } else if (this.id == "snow") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(snow);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(snow);
      }
     } else if (this.id == "pressure") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(pressure);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(pressure);
      }
     } else if (this.id == "wind") {
      if ($(this).find("input").attr('checked')) { // is now checked, add the layer
       leaflet_mapobj.addLayer(wind);
      } else { // is now unchecked, remove the layer
       leaflet_mapobj.removeLayer(wind);
      }
     }
    });
   
    // adds the show/hide controls for the weather tiles
    leaflet_mapobj.addControl(WeatherControl());
   }
  
   if (addFullscreenButtonParam) {
    // create custom zoom control with fullscreen button
    var zoomFS = new L.Control.ZoomFS();
   
    // add custom zoom control
    leaflet_mapobj.addControl(zoomFS);
   
    // you can bind to 2 events: enterFullscreen and exitFullscreen
    // note that these events are on the map object, not the zoomfs object...
    leaflet_mapobj.on('exitFullscreen', function(){
     worldmapidfull.css("height", worldmapHeight);
    });
   }
  }
 
  setTimeout(function(){
   customizeMap(worldmapidfull, addFullscreenButton);
  }, waitForMapToLoad);
}
});


#betaMaps { padding: 8px 6px; border: 1px solid gray; background: #e7e7e7; }
.leaflet-top.leaflet-right .leaflet-control.leaflet-bar { background: white; }
.leaflet-top.leaflet-right .leaflet-control-layers-overlays { padding: 5px; }
.leaflet-control-fullscreen { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASdJREFUeNqE0r9LgkEYwPF7XxVRxN5s0iGDJKhVAqHJwSXQzUGHhnB1cesfaGi0zTWCmgMHl4Ymh/ZIgv6ADJQkyNfqe/C8ccb744HPy73v3XP33L1n7RZ3BkqpDH7Qx1gFRw2nMvbDItmlEcMIx1iFJCfxgEO4No853lCVmcOigTLe8RnLOc6Mxhk2cSuTJaQa0zcsbKCFmS7bnLmCC+R9Vn1BFxPvQ9zozMjK2wEll3CFI+9cbKNTr1aI2PMest6L/a9zFZG81m8mWyIs1saYyV8+lfiF65f8iruIxGv5lX+nvYUp9tHGiZy4uQV9HZ9wI4f2rMfE5fc8ooc6BiErd3CJcz1WX5IFjTTu0ZQqgqKIIQ6wsOWglJTvROxZX82UtJe/AgwAp501bVVIRc4AAAAASUVORK5CYII=); }

Enable Weather For Map

Tordormore

Thanks for the responses, I truly appreciate it. For some reason this isn't working in my environment. I'll have to do some investigation to determine the root cause.

I do have one question for both of you. The URL you are using to access your SolarWinds environment, is it http or https? This might be my problem, because we use https and the links in the script to openweather are http. I've heard issues with custom html widgets having issues when mixing http and https.

joshyaf

Is the world map ID just the name of your Orion world map or something I am missing? Can't seem to get this to output a display.

joshyaf

New issue. openweathermap blocked my API because the free version limits the amount of calls to 60 per minute. Any way to set that limit? I am not seeing anything obvious.

brianj

Thanks for finding those instructions! I have used custom HTML to add a national weather radar map, but it wasn't overlayed on one of my worldwide maps. I'm going to try this in a little while.

jameslindsay

I found a lot of different things feed into how they measure the number of calls you make. Layers, zoom level, etc. I can't say for sure if this helps but I added this at the top to refresh the page every 5 minutes.

ddrobins

I had to disable HTML Resource Sanitation to get this to work
https://www.solarwinds.com/documentation/en/flarehelp/npm/content/core-custom-html-resource.htm?cshid=OrionPHResourceCustomHTMLText
https://support.solarwinds.com/SuccessCenter/s/article/Advanced-Configuration-access-in-Orion-Platform?language=en_US

Tordormore

This was the answer for me. Now if I can figure out how to use this along with still being able to use the mouse to move the map around.