Integrate AerisWeather Maps Tiles with the HERE Technologies Maps API for JavaScript

HERE Technologies is one of the fastest growing location platforms on the Earth. With advanced routing and navigational features that integrate seamlessly with third party data sources and overlays, HERE is quickly becoming a favorite for enterprise-scale mapping applications. With clients including BMW, Mercedes-Benz, and Amazon, HERE solidifies itself as a preferred platform for top brands around the globe. There are examples on how to integrate AerisWeather Maps layers in an efficient fashion, but today, we’ll take it step by step and walk through how to add informative weather tiles to this popular platform utilizing HERE’s Maps API for JavaScript.

Getting Started

As you begin to create your map, please review the documentation and examples provided by HERE Technologies. This will highlight other features and integrations for your project that can be displayed alongside your AerisWeather tiles including Fleet Telematics Services, Routing, and more. AerisWeather supports route-based API requests as well. Details on how to request route-based weather data can be found in the AerisWeather documentation.

Setting the Stage

First, within the head tags of your HTML document, we will place the styles and other linked scripts required for the HERE Maps API to function.

Finish up your head tags as needed and let’s dive into the rest of your map. As is the case in all of the mapping tutorials we’ve produced thus far, we will paste an empty div into our file to place the map itself:

Now, let’s open some script tags and insert our JavaScript. Let’s declare two quick constants that will place our AerisWeather Client ID and Secret into the global scope, this is where we insert the credentials associated with your AerisWeather account. Don’t have one? Sign up here for a 30-day developer trial or subscribe to a basic or premium plan from our pricing page.

Customizing Your Weather Map

Now comes the fun part. Within the same script as opened above, create a function for our map that brings in the HERE Maps API key, now we can place our basemap. We’ll also establish our initial focal point and zoom level of the map:

Next, we’ll enable behavior like panning and zooming via the mouse wheel alongside map events functionality.

That’s all you have to do to get HERE’s Maps API ready before we start adding our AerisWeather Maps request. For more efficient loading of the AerisWeather imagery, feel free to call 4 tile servers at once as we did in our Google Maps tutorial. To select the layers you wish to display, place the map layers of your choice into the URL in place of “radar-global”. Everything else will be handled based on previously specified variables and user inputs!

At this point, you can finally place our weather layers on top of the default HERE map. That part is as simple as copying and pasting what you see below and wrapping up your script:

And we’re already done! You’re now ready to render this on any HTML document of your choosing by simply publishing to production or executing locally. If you want to copy and paste the complete code, visit the HERE Maps API Integration page in the AerisWeather docs.

Did you know?

AerisWeather also offers full functionality in conjunction with Mapbox, Google Maps, and Leaflet. If you’re new to Maps, don’t forget to visit the product page, documentation, and sign up for a free 30-day trial to gain access to your own platform-agnostic weather mapping tiles.

Ready to get started with AerisWeather and HERE or any of the other mentioned platforms for your business? Our Sales team is standing by to assist you. Contact us today!

Share this post: