cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post

Adding Live Weather to the "Worldwide Map" Resource

Adding Live Weather to the "Worldwide Map" Resource

Summary: This will allow you to add live weather to the worldwide map based on the OpenWeatherMap project (free).

Limitations: The map must be on a page where your can insert HTML/JavaScript. This will probably break during future releases.

Notes: If you want to change the height of your map you must do it within the HTML resource.

Preview:

Capture.PNG

Step 1: Get the id of your map element, to do this go to a page where you've inserted the map (don't go to the map page itself). Once there view the source of the page (Ctrl + U in most browsers) and search for the map element (Ctrl + F), search for 'id="worldmap' (without the single quotes but with the double quote). Make note of your map ID, in this case 753.

mapID.PNG

Step 2: Add a HTML resource to the page with the map on it that you would like to modify. To do this go to "Customize Page" >>> "Add Resource To Column X" >>> "Custom HTML".

Step 3: Paste the contents of the attached file into the Custom HTML resource you just added to the page. Make sure you update the file with your map ID you found in step 1 and change others settings you would like to.

Labels (1)
Attachments
Comments

Thank you, yeah I got that much. What I'm talking about are the actual edits in the script. Simply putting his script in a Custom HTML resource won't work. There is a different api key, what about map size and map ID, etc?

Can you post your Custom HTML Snippet (minus the API key of course).  I cannot seem to get any of these working regardless of all the tweaks documented here.

bsmith, can you post your custom HTML code?

First, you need to know what the mad ID of the map you want to apply the weather layer to, which you can find by using the developer tools (F12 for Chrome and Firefox), and looking for a div with an ID starting with "worldmap" (In the red box, which is id="worldmap1423" on the attached screenshot) or for a tag called "resourceid" (don't suggest using this as it might not be the only place the tag is used, but it's in the green box, which is resourceid="1423" on the attached screenshot).  You want the number portion of the ID (1423 in this case) to use as the mapid variable.  The ID is unique for each map, even if it's a copy of an existing map, so you'll need to check each one if you have multiple.

pastedImage_4.png

Why don't you post yours and I'll take a look at it if you'd like?

Thanks much for the info and the reply.  I nuked all the resources in SolarWinds, used an code editor to tweak the code, re-created world map resource and custom HTML Resource overlay and was able to get the Aeris map overlays to work this time.

unfortunately I don't know what I did wrong the first go-round....probably some fat finders that I could not catch with black text and white background.
Thanks MuchWorldMapOverlay1.JPG

I cant seem to get this to work, any help would be much appreciated.

<meta http-equiv="refresh" content="900" >

<script type="text/javascript">

//Heavily modified version of "ADDING LIVE WEATHER TO THE "WORLDWIDE MAP" RESOURCE" post on Thwack

//Original author is user "s-k" https://thwack.solarwinds.com/people/s-k

$(document).ready(function(){

var body = document.getElementsByTagName('body')[0];

function customizeMap(id, h) {

//URL template for 1 layer type = 'https://maps.aerisapi.com/[client_id]_[client_key]/[code]/{z}/{x}/{y}/current.png'

//URL template for multiple layer types = 'https://maps.aerisapi.com/[client_id]_[client_key]/[code1],[code2],[code#]/{z}/{x}/{y}/current.png'

//[client_id] and [client_key] are required, and can be acquired for free by signing up at https://aerisweather.com

//Use is limited in the free version to 2,500 hits to the tiles, and 250 hits to the API.

//The tiles are served FAST!!

var leaflet_mapobj = SW.Core.Volatile.WorldMaps[id].leaflet();

var radar = new L.tileLayer('https://maps.aerisapi.com/MyID_MyID/flat-dk,water-depth,admin-cities-dk,radar,fradar,satellite-infra...{z}/{x}/{y}/current.png', {

isBaseLayer: false,

opacity: 0.8,

maxZoom: 18

});

//There are tons of layers offered, check "https://www.aerisweather.com/support/docs/aeris-maps/reference/map-layers/" and us

leaflet_mapobj.addLayer(radar);

var css = document.createElement('style');

css.type = 'text/css';

css.text = '#worldmap' + id + ' { height: ' + h + '; }';

body.appendChild(css);

}

//I have multiple maps on the same page, so multiple calls.  Unneccesary calls can be removed or commented out.

//MapID# retrieved the same way as OP's method.  Map#Height is the height of the map, again retrieved the same way as the OP's method.

setTimeout(function(){customizeMap("worldmap1340","400");}, 250);

});

</script>

So here is a snippet of what worked for me.

to answer your question @Trilobite ...you must enter the API key for each of your overlays in this section:  var leaflet_mapobj = SW.Core.Volatile.WorldMaps[id].leaflet();

See below for example of how to do "Radar" only:


<meta http-equiv="refresh" content="900" >

<script type="text/javascript">

//Heavily modified version of "ADDING LIVE WEATHER TO THE "WORLDWIDE MAP" RESOURCE" post on Thwack

//Original author is user "s-k" https://thwack.solarwinds.com/people/s-k

$(document).ready(function(){

var body = document.getElementsByTagName('body')[0];

function customizeMap(id, h) {

  //URL template for 1 layer type = 'https://maps.aerisapi.com/[client_id]_[client_key]/[code]/{z}/{x}/{y}/current.png'

  //URL template for multiple layer types = 'https://maps.aerisapi.com/[client_id]_[client_key]/[code1],[code2],[code#]/{z}/{x}/{y}/current.png'

  //[client_id] and [client_key] are required, and can be acquired for free by signing up at https://aerisweather.com

  //Use is limited in the free version to 2,500 hits to the tiles, and 250 hits to the API.

  //The tiles are served FAST!!

  var leaflet_mapobj = SW.Core.Volatile.WorldMaps[id].leaflet();

  var radar = new L.tileLayer('https://maps.aerisapi.com/CLIENT-ID-AND-KEY-STRING-GOES-HERE/radar/{z}/{x}/{y}/current.png', {

   isBaseLayer: false,

   opacity: 0.8,

   maxZoom: 18

  });

  //There are tons of layers offered, check "https://www.aerisweather.com/support/docs/aeris-maps/reference/map-layers/" and us

  leaflet_mapobj.addLayer(radar);

  var css = document.createElement('style');

  css.type = 'text/css';

  css.text = '#worldmap' + id + ' { height: ' + h + '; }';

  body.appendChild(css);

}

//I have multiple maps on the same page, so multiple calls.  Unneccesary calls can be removed or commented out.

//MapID# retrieved the same way as OP's method.  Map#Height is the height of the map, again retrieved the same way as the OP's method.

setTimeout(function(){customizeMap("ActualMapID#-goes-here","Map1Height");}, 800);

});

</script>

2019-02-12 10_40_37-Mgmt - Local Map.png

So after a lot of tinkering this am.  I believe I have it working.  I only put the api call in for precipitation and snow.  I don't know if anyone has precipitation and does theirs look like this.

Yes, I believe mine did....easiest way to tell is to set your zoom way out, and you will be able to see the cells of precipitation across the country.  zoomed in you often lose that perspective with this overlay.

Anyone have this working with a free API?

I picked up some code from the OP that with some minor tweaking I got to work for me. I got an API key from OpenWeathermap.org. It allows like 60 hits per minute for free. In my NOC view I only refresh it once every 5 minutes or so. If you need more then that, and I can't imagine why, you have to buy a key. Buying one probably give better timely data with more granularity though and you can avoid these nasty grams.

Dear Customer,
Your OpenWeatherMap API key xxxx is temporary blocked
due to the continual sufficient exceeding of the calls per minute limit by
performing 1059 requests within a minute but the limit for the Free
account is 60 rpm.

I still can't understand how or why this happens

<meta http-equiv="refresh" content="300" >
<script type="text/javascript">
$(document).ready(function(){
/* ------------------------------------------------------------------------------------------------- */
/*                                             Settings                                              */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
var worldmapidnum = "1362"; // [string] - replace with your worldmap id
var worldmapHeight = "800px"; // [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 = "Put Your API Key here"

/* ------------------- 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 = [false, false];
var showCloudsLayer = [false, true];
var showSnowLayer = [false, true];
var showPrecipitationLayer = [false, true];
var showPressureLayer = [false, false];
var showWindLayer = [false, 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;i<vars.length;i++) {
  var pair = vars[i].split("=");
   if (pair[0] == variable) {
    return pair[1];
   }
  }
  return false;
}

if (mapDebugModeEnabled) {
  if (urlActivateOnly) {
   $("#container").prepend('<div style="background:#f9b49d;border-bottom:1px solid #f25e2d;display:block;width:100%;height:40px;line-height:40px;text-align:center;color:#4e1705">Map Beta Mode Enabled</div>');
  }
 
  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. <br> 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=523db9f3e591ea3a05054b2b595c4bd9', {
    attribution: 'Weather Data by <a href="http://openweathermap.org">OpenWeatherMap</a>',
    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=523db9f3e591ea3a05054b2b595c4bd9', {
    attribution: 'Weather Data by <a href="http://openweathermap.org">OpenWeatherMap</a>',
    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=523db9f3e591ea3a05054b2b595c4bd9', {
    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=523db9f3e591ea3a05054b2b595c4bd9', {
    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=523db9f3e591ea3a05054b2b595c4bd9', {
    attribution: 'Weather Data by <a href="http://openweathermap.org">OpenWeatherMap</a>',
    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=523db9f3e591ea3a05054b2b595c4bd9', {
    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 controller 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 = '<div class="leaflet-control-layers-overlays">';
      
       /* Adds controls for the layers -- TODO: Make this a function */
       if (showTempLayer[0]) {
        if (showTempLayer[1]) {
         innerHTMLOfControlDiv += '<label id="temp"><input type="checkbox" class="leaflet-control-layers-selector" checked><span> Temperature</span></label><br>';
        }
        else {
         innerHTMLOfControlDiv += '<label id="temp"><input type="checkbox" class="leaflet-control-layers-selector"><span> Temperature</span></label><br>';
        }
       }
      
       if (showCloudsLayer[0]) {
        if (showCloudsLayer[1]) {
         innerHTMLOfControlDiv += '<label id="clouds"><input type="checkbox" class="leaflet-control-layers-selector" checked><span> Clouds</span></label><br>';
        }
        else {
         innerHTMLOfControlDiv += '<label id="clouds"><input type="checkbox" class="leaflet-control-layers-selector"><span> Clouds</span></label><br>';
        }
       }
      
       if (showSnowLayer[0]) {
        if (showSnowLayer[1]) {
         innerHTMLOfControlDiv += '<label id="snow"><input type="checkbox" class="leaflet-control-layers-selector" checked><span> Snow</span></label><br>';
        }
        else {
         innerHTMLOfControlDiv += '<label id="snow"><input type="checkbox" class="leaflet-control-layers-selector"><span> Snow</span></label><br>';
        }
       }
      
       if (showPressureLayer[0]) {
        if (showPressureLayer[1]) {
         innerHTMLOfControlDiv += '<label id="pressure"><input type="checkbox" class="leaflet-control-layers-selector" checked><span> Pressure</span></label><br>';
        }
        else {
         innerHTMLOfControlDiv += '<label id="pressure"><input type="checkbox" class="leaflet-control-layers-selector"><span> Pressure</span></label><br>';
        }
       }
      
       if (showPrecipitationLayer[0]) {
        if (showPrecipitationLayer[1]) {
         innerHTMLOfControlDiv += '<label id="precipitation"><input type="checkbox" class="leaflet-control-layers-selector" checked><span> Precipitation</span></label><br>';
        }
        else {
         innerHTMLOfControlDiv += '<label id="precipitation"><input type="checkbox" class="leaflet-control-layers-selector"><span> Precipitation</span></label><br>';
        }
       }
      
       if (showWindLayer[0]) {
        if (showWindLayer[1]) {
         innerHTMLOfControlDiv += '<label id="wind"><input type="checkbox" class="leaflet-control-layers-selector" checked><span> Wind</span></label><br>';
        }
        else {
         innerHTMLOfControlDiv += '<label id="wind"><input type="checkbox" class="leaflet-control-layers-selector"><span> Wind</span></label><br>';
        }
       }
      
      innerHTMLOfControlDiv += '</div>';
     
      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);
}
});
</script>
<style type="text/css">
#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=); }
</style>
<a id="betaMaps" href="#">Enable Weather For Map</a>

pastedImage_1.png

So I believe from past experience that with these api's the world is sliced into cells and each cell ends up being counted as a separate api call.  So when you have the full global map up it might trigger hundreds or into the thousands of calls, and i believe that happens every time you refresh the page or a different user loads it.  I've found that I often burn through the free tier in under a day even with a relatively small map, and they continue to throttle back the free tier at every website I've seen every few months. Years ago API's like this were new and totally free ones popped up here and there, but these days as soon as you put a decent mapping data resource online there are going to be tens of thousands of users attempting to access it, crushing your systems and requiring money to keep them online.  Ultimately the free tiers are only ever going to be good enough for a barebones proof of concept, if you like what you see then you will end up needing to pony up for a subscription.

All good points. This isn't enough of a need to justify paying for it though

Yeah I hear that.   In most cases you can still get away with just displaying the noaa .gif weather maps on a dashboard somewhere and avoid all the paying and java scripting.  But if these kinds of overlays are imperative then that's kind of where we end up.   I feel like the kinds of orgs who would be willing to pay for this kind of data probably already have a GIS department that provides mapping data internally with lots of cool custom internal data already, I know that has been the case when I work with oil and gas companies and some regional utilities.

So I got this working.  AMAZING, but I am wondering if there is a way to add in the OpenWeather Polygons so I can set boundaries for different areas of the coty or state/province

https://openweathermap.org/triggers-struct

Are we able to use any of the polygon triggers in the link and if so, where, how?

Does anyone have this running in the more recent releases of Orion?  

@the_ben_keen i'm on the latest version of everything and i just got it working.

@the_ben_keen Works for me on 2020.2.1. I had issues up until I edited the code to add the API key from OpenWeather (code found in this thread). Works as expected.

I followed the steps that jameslindsay used and I can see that the script is working because I have the buttons on the side and Weather Data by Open Weather Map at the bottom but I do not see any animation on the map.

I entered in my map ID and the API from Open Weather

Version history
Revision #:
1 of 1
Last update:
‎01-20-2014 02:28 PM
Updated by: