Display the current weather and upcoming 6 day forecast using the Open Weather custom tile!
This uses weather data from Open Weather Map, so you’ll need to register for a free API Key to try things out. Check out the instructions below for more details.
This was built as a proof of concept, but should be relatively feature complete. Feel free to learn from it, copy the code and adjust it as you see fit, or even share your own custom tile!
Create a new API Key and wait for it to become active
It can take up to an hour for new API keys on new accounts to become active.
Use the Import link above to import a copy of the tile to your account a. Be sure to scroll down to the bottom and tap Save after clicking the import link b. DO NOT edit any of the settings directly in the developer tools!
Navigate to the dashboard you want to add the tile to and add the tile to it a. With your dashboard in edit mode, tap the + icon to add an item, expand the Other category and select Custom Tiles. Find the Open Weather entry and tap it to add it to your dashboard. b. Edit the tile that was just added to your dashboard and enter your API Key and Coordinates*
With this initial release, you’ll have to enter your location using latitude/longitude coordinates. There’s sites like latlong.net that can help with this or you can get your coordinates in Google Maps on a desktop browser.
You can also use one of the documented language codes from Open Weather and the tile will display in your language.
API Preference
The latest version of the Open Weather tile introduces an ‘API Preference’ setting which provides better support for both the old and new Open Weather API Keys.
2-5multi - the new default as it’s the most compatible with old and new API keys
2-5onecall - if you have an old OpenWeather API key, this gets you 2 more days of forecast
No. That’s the note from step 3b that you don’t want to edit.
You’ll need to revert that change – probably just easiest to restore the Custom Tile definition using the Update from Source option as noted below.
Once you have the tile definition back to the originally settings, you want to continue on to step 4 where you add the tile to your dashboard and then edit the settings for the tile on the dashboard.
Also note that step 4 calls for the latitude, longitude coordinates for your location. The original post has notes on how to find this.
Are there any way that the forecast can be changed in language, and what about the fact that it shows as the picture. We use celcius degrees in denmark, and as it shows, that really not the temprature in celcius degrees haha
Hi - I’m new to custom tiles but this is so good it made me bite the bullet.
I’m looking to enable the tile Label, but would like to have it aligned-left (so it doesn’t block the top forecast line), is that something that is possible?
I’m working on tweaking the tile to add a ‘Units’ (Imperial/Metric) and Language input.
The ‘Feels Like’ is hard coded, so I’m trying to decide if I put together a series of translation strings or find an icon that would represent that. I’m open to alternative suggestions too!
The day names are all based on your browser language. So if your browser and system are configured for the appropriate language, it should automatically adjust based on those. I’ll see if I can just have those respect the language set in the tile settings though.
That uses the native tile Label feature, so it’s always center aligned. I suspect you could use Custom CSS to adjust it. Would you mind sharing what kind of content you were looking to put in the label? Just wondering if it’s something other people would like to see as an option in the tile.
My intent was the location name … which leads to another question (feature request?) … I’m looking to have multiple instances of the tile, to show info from different locations, since my family is geographically diverse
I suspected it might be the location name… let me think about that one a bit. Ideally, I would love for you to be able to enter a simple location name like “London, UK” instead of coordinates in the tile settings… in that case it could be an option to display the entered location name on the tile.
In the meantime, you might be able to accomplish it using Custom CSS or with a bit of dev skills you could customize the Custom Tile settings/code to add your own field and display it within the tile.
Regarding multiple instances of the tile for different locations, you can add the tile to your dashboard multiple times and adjust the coordinates in each tile’s settings.
Hey Josh - This is working fantastically on my computer (and even phone) on firefox and chrome alike, but, on my fire tablets running Fully Kiosk, the tile shows placeholder text.
Is there a setting in Fully I may be missing to get this to properly load there?
What Fire OS version are the Fire Tablets running? The tile is using a number of latest generation JavaScript features, so it requires a relatively modern browser.
This was built as a proof of concept, but should be relatively feature complete. Feel free to learn from it, copy the code and adjust it as you see fit, or even share your own custom tile!
DO NOT edit any of the settings directly in the developer tools! Be sure to review the limitations of the ‘2.5 Multi’ call in the post linked below.
