April 29

Interactive Weather Maps Made Easy with AerisWeather’s Wizards

Have you always wanted a powerful interactive weather map for your website but felt overwhelmed by all the coding required? Perhaps you know how to code, but you don’t have the time? Well, luckily, there’s now a wizard for that. Introducing our newest wizard: The Interactive Map App Wizard.

The Interactive Map App, which is part of the AerisWeather JavaScript SDKallows users to build a powerful mapping tool for a personal weather dashboard or integrate it into their own custom weather site.  With the new Interactive Map App Wizardyou can click your way through each step and customize what you want your custom weather map application to look like. In the last step, we’ll even give you a code snippet that you can use to reproduce what you’ve built. Just copy and paste.  

Let’s take a tour of the Interactive Map App Wizard, shall we?

Step 1: Map Strategy

The first step is choosing which map strategy to use. If you select MapBox or Google Maps you will be required to get your associated mapping API key to ensure the final code snippet will work outside of the wizard. 

First, you'll need to select a map strategy.

Step 2: Map Setup

In the second step, you can customize the center and zoom of the map and adjust the animation settings. If you select MapBox or Google Maps, you will be requested to enter your library-specific API key. 

Step 2 includes the ability to animate your map and define the viewport.

Step 3: Data Layers

With this step, you can select what layers you want to display on the map. As you select each layer, the layers panel on the map will update in real-time.  Once a layer has been selected, you can toggle the active switch to enable it by default on the map.

Select your weather data layers of choice.


Step 4: Panel Locations

In this step, you’re given the ability to move the panels and controls’ location and toggle their visibility. If you don’t like the default location of the timeline, layers panel, place search, or legends, you can adjust that here.  

You can enable or hide the timeline panel.

Step 5: Local Weather Info

The Interactive Map App comes with the ability to point and click to see local weather at that location. Upon clicking, an info panel will pop up showing you the current conditions. In this step, you can alter the position of this info panel popup and customize exactly what you would like this info panel to display (default location and content shown).  

The local weather pane allows you to highlight what data matters most.

Step 6: Get Code

In this final step of the wizard will provide the code snippet for your interactive mapYou can log into your account if you have one, and the wizard will include them in the code snippet. Now all you have to do is copy and paste.  

The final step of the wizard allows you to copy and paste your map's code.


If you don’t have an account yet, sign up for a free developer account and start today.  

Find this wizard useful? Please check out our other wizards as well.

Happy coding, or in this case, happy clicking! 

Share this post:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.