Build an Interactive Map with the JavaScript SDK

One of the things that makes the new AerisWeather JavaScript SDK so unique is its versatility. The SDK is your new go-to for weather data, static maps, and even interactive maps. This post will highlight how easy it is to use an interactive map and include layer buttons with our JavaScript SDK.

Initial Setup

Just like the fetching data and static maps posts related to our JavaScript SDK, we will need to get our feet set with a few items before we can begin. Let’s set up the following items:

• Add CSS and JavaScript files
• Define the map size
• Add DOM target elements for our map and layer buttons

You should have something that looks like that after going through the three steps above:

Now we’re ready to move on and start using the library.

Interactive Map Config

In the previous snippet, we instantiated the JS library and assigned the instance to a local variable named  aeris. Now we’re going to use the views() method to access the mapping features found within the Views module of the SDK. The JavaScript SDK has Promises built in so we can instantly start using view-related components within the callback passed to the Promise’s  then() function:

The initial config for our interactive map will customize the center, zoom level, and strategy. Center and zoom are self-explanatory, but strategy is another example of the JavaScript SDK’s versatility. Here you have the option to choose between 4 popular interactive map library: Google Maps, Mapbox, Leaflet, and OpenLayers. For this exercise, we’ll be using Leaflet which is also the default strategy. Here’s what the interactive map setup would look like using our custom configuration options:

Toggling Weather Layers

The interactive map is set up, but I still need to add weather layers. However, I don’t want to just add a bunch of layers; I want the user to be able to turn weather layers on and off. In the last code snippet, we assigned our InteractiveMap instance to a local map  variable to access later. We will need to take that map and add the toggling functionality after the map loads:

Now the question is what do we need to toggle? I’d like to toggle two components at this step:

1. Class for the button so the user knows they’ve enabled a button
2. The weather layer which will be added and removed from the map

First, let’s store the DOM targets for our buttons in an array:

Next, we can take all of those buttons and add the same event handler when the ‘click’ event takes place:

Now we just need to build out the toggleBtn function which received a single argument, which is an Event object associated with the triggered event. Within that function, we use the addLayer() and   removeLayer() methods on our InteractiveMap instance to toggle the visibility of those layers based on the selected state of the button. The presence of my selected button class, .selected, will be used to determine whether or not the layer needs to be added or removed. We also want to be cognizant of the order in which the layers are added as I don’t want my radar layer underneath my satellite layer. Therefore, I will add logic to determine which layer I’m working with so I can set my z-index accordingly. Here’s the entire function:

);
map.removeLayer(btnLayer);
} else {
console.log( add layer ${btnLayer});
map.addLayer(btnLayer, {
style: {
zIndex: zIndex
}
});
}

clickedBtn.classList.toggle(‘selected’);
}

Toggle layers on an interactive map

Be sure to check out the complete code example that you can download and review as well.

Final Thoughts

That should wrap up all the individual pieces to build our your application. At this point, you may want to consider adding some styling to your applications, but I’ll leave that to the design experts. Now your users will be able to decide which layer(s) they want to see on an interactive map as the next big storm rolls in. Start using the JavaScript SDK today; we can’t wait to see what you build!

Share this post: