Our new AerisWeather Javascript Weather SDK provides you with tons of features so you can easily add weather data and imagery into your custom applications. From performing simple API data requests to full-featured interactive weather maps, our SDK makes it easy and painless. But what if you wanted to combine all of the many features of the SDK into a single, cohesive and highly flexible weather mapping application?
We’re excited to announce version 1.2.0 of our Javascript SDK includes a complete weather mapping application. And it’s all built into the SDK so you can take advantage of this new component immediately! We released 1.2.0 earlier this month, and some of the key features of this release include:
- Setup a complete interactive weather mapping application
- Searching for and displaying any location on the map
- Configuring the toggleable layers and layer filters
- Viewing additional details related to a specific location or data point
- Scrubbing the map’s timeline to view data for a specific time interval
Read on to learn more about the map application component.
Aeris JS Weather SDK – Interactive Weather Mapping Application
A Complete Weather Mapping Solution
The AerisWeather JavaScript SDK includes a fully-functional, feature-rich interactive weather mapping application, which can serve as your own weather dashboard or be integrated into your custom weather applications. At the core of this new application feature is the SDK’s interactive map component, which we detailed in a recent article. The application is a container layer on top of an interactive map that provides additional functionality through the use of panel views. The following are the panel views available with an interactive map application:
- Layers – Allows you to configure and toggle your desired layers on and off as well as filter a layer’s vector data currently visible on the map.
- Timeline – Displays the map timeline’s current time that data is rendered for as well as allows the user to go to a different time within the timeline’s range.
- Place Search – Displays a search field allowing the user to search for and then pan and zoom the map to a specific location.
- Info – Used to display additional content related to a specific geographical coordinate/location or a map element, such as a selected marker or polygon.
- Legends – Displays and manages a series of data legends based on the map content sources currently active on the interactive map.
By default, an interactive map application already has these panels set up and configured for you. For instance, a user can search for a particular location using the place search panel. When selecting a location, the info panel appears with information relevant to that location. The interactive map application and its panels are also fully stylable and customizable. Refer to our configuration documentation for more information regarding the configuration options.
Get Started
Setting up a weather map application is similar to that of the core interactive map component setup except that you’ll be working with the new apps module of the SDK. So you’ll first need to complete the following steps:
- Include the Aeris Javascript SDK script and stylesheet assets in your HTML
- Add a DOM element to use as the map application container target in which the application will be rendered
- Define the size of your application’s DOM target, which will typically be set up to fill the browser’s viewport
Once you’ve completed the above steps, you should have a result similar to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AerisJS Interactive Map App</title>
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#map-app {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map-app"></div>
<script>
window.onload = () => {
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
};
</script>
</body>
</html>
Now we can add our weather mapping application.
Configuring a Weather Mapping Application
Above, we have assigned our configured instance of the library to a local
aeris
 variable. We now need to use the
apps()
 method on that instance to access the Apps module and its InteractiveMapApp component, which returns a Promise:
aeris.apps().then((apps) => {
// config will go here
});
We’re now ready to create our application. For this basic example, we’re just going to configure our application to render layer toggle controls for the radar, satellite, and alerts AMP layers. The configuration also enables the radar layer initially by default. We’ll also set the initial map zoom to level 4 using the Leaflet map strategy:
aeris.apps().then((apps) => {
const map = new apps.InteractiveMapApp('#map-app', {
map: {
strategy: 'leaflet',
zoom: 4,
layers: 'radar'
},
panels: {
layers: {
buttons: [{
id: 'radar',
value: 'radar:80',
title: 'Radar'
},{
id: 'satellite',
value: 'satellite:75',
title: 'Satellite'
},{
id: 'alerts',
value: 'alerts',
title: 'Alerts'
}]
}
}
});
});
You should now have your basic interactive weather mapping application:
Aeris JS Weather SDK – Basic Weather Mapping Application
Now you can test out the many different features available with your application. You can toggle layers on and off, search for and select locations to view weather details, view map data for different time periods along the timeline and view the map legends:
And here’s the complete HTML code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AerisJS Interactive Map App</title>
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#map-app {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map-app"></div>
<script>
window.onload = () => {
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.apps().then((apps) => {
const map = new apps.InteractiveMapApp('#app', {
map: {
strategy: 'leaflet',
zoom: 4,
layers: 'radar'
},
panels: {
layers: {
buttons: [{
id: 'radar',
value: 'radar:80',
title: 'Radar'
},{
id: 'satellite',
value: 'satellite:75',
title: 'Satellite'
},{
id: 'alerts',
value: 'alerts',
title: 'Alerts'
}]
}
}
});
});
};
</script>
</body>
</html>
Taking Your Weather Mapping Application Further
The above was just a basic example of setting up an interactive map application. However, you can take yours even further by:
- customizing the CSS styling
- configuring different layers and layer filters in your layers panel
- changing the map’s timeline range and range options
- adding a custom dataset and custom info panel content
Be sure to review our extensive online documentation for our AerisWeather Javascript SDK. Our documentation covers many more features are available for your weather-related applications and Aeris subscription not covered here.
We’d love to learn more about what you’re building with our AerisWeather Javascript SDK, so please reach out to our team or hit us up on Twitter!
No comments yet.
Be the first to respond to this article.