Now when you go to your site, you should have the weather under the site logo (Figure 4). As previously stated, you can pass more or different data points. Show the weather in just about any area on the page and style it anyway you want.
In just a few simple steps, you can insert weather information under the site icon in the master page. I recommend using the custom master page location because it is easy to find the site logo on the master page. You can place the code just about anywhere on the page such as the Content Editor Web Part or Code Snippet Web Part. In this example, we will be placing the code in the master page. Start by using the simpleWeather jQuery plugin. There are lots of features and configurations to this plugin. You can check out all the parameters and demos at the simpleWeather site here. In this example, we are going to put in a zip code and get two data points: current temperature and current conditions. These are just two of several data points that the service can receive. Two simple steps:
The first thing that needs to be done is to create a copy of the current master page. We don’t want to add code or alter the default master page(s). For
this example, we used the seattle.master, but it can be applied to either seattle.master or oslo.master. (Figure 1) The current look of our site before the weather is added.
Create a JavaScript file that has your zip code and data you want to display. In this example, we put the zip code (Macomb, MI in the example, but any zip code will do) in the location (line 4). Line 8 (Figure 2) is where the data we want to get is gathered. In this example, we are adding the current temperature and current conditions.
(Figure 2) – JavaScript File Code Screenshot Now we need to save this file and upload it to the SharePoint Site Assets library located at <siteURL>/SiteAssets. For this example, we saved the file and named it index.js, but you can name it anything you want as long as it is referenced in the master page. We also created a folder “JS” in our Site Assets Library to easily access our page, but this is not necessary.
Open your custom master page in SharePoint Designer and search for the word “siteIcon”. In this example, it is found on line # 296 of the master page (Figure 3). Under the closing </div> tag, we must add 4 lines. On the first (line 303) line, add a new div tag with the id that is named in your JavaScript file that you uploaded to the Site Assets Library. In our example, it is “weather”, but it could be any name as long as they both match. Next, add a line to get the jQuery library file and then a line to get the simpleWeather library file. In this example, we are using the Content Delivery Network (CDN) for both, but you could also download each file and put it in the Site Assets Library and reference them at that location. Both were tested and they work the same. The final line is to reference our JavaScript file that we made in Step #1 (line #306). That’s it. Save the master page and make sure to check it back in.
