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

Very cool!  I tried to test it but all I get is a button that says "Enable Beta Maps" and no map.  I changed the worldmapidnum to our WorldMap ID.  Am I missing another step?

I noticed I still had our map ID hard-coded in some of the functions so I fixed it an replaced the download, you will need to download the new code I attached above.

Also did you swap out the following with your map ID? Its the fifth line in the file and you just need to replace the 753 with your worldmap ID.

#worldmap753 { height: 400px; } /* To change the high of the map this must be changed (due to fullscreen plugin) */

Very cool, works like a champ now. Thank you!   I replaced your worldmap ID with ours on lines 5 and 25.

I noticed on http://openweathermap.org/Maps that the precipitation layer is "Precipitation forecasts" and not the current weather.  This had me a little confused since it was showing precip in our area when it's sunny right now.  We do, however, have more snow in the forecast tonight. There is a layer called "Current weather" that would be a great addition.  I'm an infrastructure guy and not a web guru but I might give it a stab to try adding that layer.  I think I understand the tiles and selctions in the code but we'll see. 

Thanks!  I had no trouble getting this to work in Firefox but I am having loading issues in IE.  Did you get it to work in IE?

No it doesn't appear to work in Internet Explorer.

I also notice the weather data is stuck in time and isn't refreshing when the map refreshes.

Very good work, thankyou

What version of IE? I just tested it in IE10 and didn't see any issues.

OpenWeatherMap's free plan has the map data update "From 10 min to 2 hours" do you think that's the issue?

IE 8 now, but we are currently upgrading to Windows 7 and I would assume we will be using IE 10 then.  I will see how it works on one of those PCs, thanks. 

Same here, IE8 but also upgrading all clients to Windows 7 so we'll be out of the dark ages soon. 

Concerning the weather map data, the precip forecast is still the same data that is was on 1/23. It's almost like it's permanently cached.  Weird.  I haven't really looked into it since I noticed so I'll report back if I find something.   I just thought, maybe it's a Firefox issue since I'm not able to test in IE right now.

The new version works in IE8.

Yep, confirmed the new version works in IE8.  Thank you!

I still don't quite get the snow and precip layers.  It shows either old data or a forecast, but not current conditions.

Cool! Thanks for sharing this. s-k

Very nice feature. I have this working on my maps now.

Any reason why I cant click & drag the map once I zoom in? I have tested this with chrome and firefox and they both have the same issue.

I love the feature and will be installing it once we finish our upgrade of Solarwinds.  One question though.  Has anyone been able to get a "current weather" layer working?  My c-levels want the current weather as well as the precipitation.  I'm not a very good developer/programmer so I'm kind of lost in figuring out how to do it.

Awesome work, truly impressive!  Quick question, is there an easy way to move the selection box to the bottom left?

I'm having the same issue.  Any ideas?

Ditto, same issue here.

I'm not sure what the cause is but a workaround I've found is to disable the full screen button

Great work

http://openweathermap.org/ There is a lot of good info on here for those of you who want to learn more about it.

Hi,

Cannot get the file Map Modifications.html to open. Will someone please clue me? 😞

Thanks,

Tracy

i've tested this and i really like it. its something our organisation has been wanting to do for a long time. just some feedback,

-it would be nice if the zoom increments weren't so savage. it would would make it easier then to size the map on different monitors.

-dose anyone know if it could show temps/forcastes on different towns like it does on the openweathermaps?

-also if it could include or overlay a cyclone/hurricane tracker/plotter and flood/fire maps. that would then be the icing on the cake. we could then look at our sites that could be potentially affected and then use it to priorities our responses or preparations

-i was looking at the openweathermaps. if possible, if we bought a subscription off there for more up to date data refreshes. could we link that subscription to the worldmap weather?

FYI, I noticed that when I applied this custom HTML resource onto a page that also has a Network Atlas resource that it breaks the Network Atlas tool tips.

just noticing that openweather maps has gone from beta to live or no longer beta. is there something in the script we should update now its changed?

Just implemented this in NPM 10.7 and we are loving it.

Sorry, slightly off topic, but still related. I was looking for a solution to increase font in certain widgets on certain pages. It seems like this HTML code does exactly that - it is able to modify the way widget looks like. Would it be possible to create similar HTML, which will modify size of the font in a given widget (or even entire page). This is for NOC view - so that it is readable from the distance, when screen is on the wall

This just free'd up another HD TV for World Cup!

This is true.

Is there a fix?

Thank You

This is very good. Thank you.

This works well except for in NOC view mode. Why would that be? It doesnt show any of the overlay options or weather data

You may be able to modify the default behavior for these options in the script. I was able to remove the default “zoom” icon this way.

Let me know how you make out.

I messed around with the settings as much as I was comfortable with and it still is not loading the weather in noc view mode. It works fine everywhere else, and actually works about 5% of the time in NOC view mode. Not sure why it wont work the other 95%...

I just used iframes and brought in the NOA map for my region (not a world wide weather map).

Really nice modification, works perfectly so far. Thanks!

Works great for me.  Awesome work.

I have just upgraded to NPM 11.0.1 and I am unable to get it to work. Any known issues with the new updates? I just get the button in the HTML resource that says "Enable Weather for Map"

Do you have a map on the page already?

I would be interested to know exactly how you went about doing this.

Hi Guys, works brilliant but it doesn't refresh automatically. I just wonder if anyone had the same?

If you want to schedule it to run automatically, create a new stored procedure, insert the SQL code into the new procedure and then schedule the procedure to run at whatever interval you choose using the SQL Management Studio Job Scheduler.

Regards,

Ryan Matovich

ETS & Information Security

GCIS Design Engineering

Tools Manager

St. Louis, MO

Ryan.Matovich@Emerson.com<mailto:Ryan.Matovich@Emerson.com>

w: +1-314-553-1789

m: +1-314-737-2322

Are you able to assist further with this? Can you help with SQL script?

Here’s what I’ve been using.

USE NetPerfMon

--Tells SQL engine which DB to execute the following commands against

DELETE FROM WorldMapPoints;

--Clears out all existing rows in the WorldMapPoints table

INSERT INTO WorldMapPoints (Instance, InstanceID, Latitude, Longitude)

--Selects the destination table and columns for insert from the source table

SELECT EntityType, NodeID, Latitude, Longitude FROM Nodes

--Selects the source table and columns for the destination insert

WHERE EntityType = 'Orion.Nodes' AND Nodes.Latitude IS NOT NULL AND Nodes.Longitude IS NOT NULL

--Filters the selected rows for insert to where only Orion.Nodes EntityTypes are selected and where Latitude and Longitude columns are not empty

Ryan Matovich

ETS & Information Security

GCIS Design Engineering

Tools Manager

St. Louis, MO

Ryan.Matovich@Emerson.com<mailto:Ryan.Matovich@Emerson.com>

w: +1-314-553-1789

m: +1-314-737-2322

This is not what I am asking for. I need to auto-refresh weather data itself, not nodes. At the moment I am using Chrome plugin to auto-refresh the whole page, but I am noticing that this is not always triggers refresh of the weather data.

P.S. To auto-place nodes on the world map I have much better solution: Automatically Update World Map Points Based On Custom Property Value

Oh…sorry. For that, I just set the NOC mode screens to rotate and the weather updates each time the screen rotates around. There’s probably a quick way to do it with JavaScript in the Custom HTML section for non-NOC mode views.

Regards,

Ryan Matovich

ETS & Information Security

GCIS Design Engineering

Tools Manager

St. Louis, MO

Ryan.Matovich@Emerson.com<mailto:Ryan.Matovich@Emerson.com>

w: +1-314-553-1789

m: +1-314-737-2322

Just add this before the iframe tag on your HTML resource that displays the map. <meta http-equiv="refresh" content="60" >. That will refresh it every minute, and you can change the value to what you like. Hope that helps!

That's cool, thanks for the hint hejman08. I could not find iframe tag, but I have added this line as a first line in the code, before <script> tag and it works a magic

Has anyone found an answer to this.

Very nice s-k although my "Enable weather for Map" button does not appear to work. If I break one of the layer variables it appears but does nothing.

Excellent write up!  Easy to follow, I added in the refresh interval <meta http-equiv="refresh" content="60" > and it works like hejman08 explains (thank you by the way).  The only thing is after every refresh the maps zoom is defaulted.  Is there a way to lock the zoom?

I ended up removing the auto-refresh in favor of a "refresh the map" button so I can refresh it easily but not worry about it refreshing itself when i'm zoomed in, or worse- drilling down to see why all my dots aren't green.

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