Building 2D and 3D Applications with ArcGIS API for JavaScript and AerisWeather Map Tiles

For developers creating enterprise-grade applications that sit on the cutting edge of geospatial technology, the ArcGIS API for JavaScript offers enhanced functionality over many other mapping solutions. With support for 3D visualization alongside standard 2D mapping features, the ArcGIS API is a versatile and capable tool for advanced mapping techniques.

Now you can add the power of AerisWeather map tiles to the ArcGIS API-based application of your choice! In this blog, we’ll walk through how to create a 2D map as well as an interactive globe.

Setting Up

Establishing basic styles and setting up your document is consistent between each implementation of the ArcGIS API. Use the following HTML template to get started:

Alternatively, if you already have an application, just make sure you have a target DOM element where you want your map to be inserted into like the div#map in our template above.

2D Applications with ArcGIS MapView

We’ll first need to include the necessary ArcGIS modules and classes.

A MapView instance must be created to render a map. Incorporating the MapView  module alongside other basic ESRI dependencies will enable you to place and render your 2D map application. This also requires the WebTileLayer  module. This handy module allows you to place and render tiles on top of the application from a network source similar to “XYZ” tile function in the native ArcGIS app.

Within the script tags of your HTML file, create a function to place basic information like a basemap, and initialize a ground layer with the included World Elevation Service data:

Now, after your Map instance, create a new MapView using the container  property to set the DOM element containing the view. This is also where you’ll set your default map parameters like zoom and initial latitude and longitude coordinates:

Finally, wrap things up by constructing and linking our AerisWeather tile layer with the map. You’ll want to preserve the subDomains  array as this will allow multiple concurrent connections for faster map tile loading, but you can otherwise curate your URL and weather layers as desired. Be sure to fill in your [CLIENT_ID]  and [CLIENT_SECRET]  values for your AerisWeather account!

Here’s what a standard global radar layer might look like in the code:

Interested in other layers? Just swap radar-global with anything else, like the following example which shows alerts at 80% opacity:

Following the above process, your final code should look similar to the following:

The final map you produce should appear similar to the following:

To see a working version of this code in action, visit the 2D ArcGIS Weather Map Interactive Example.

3D Applications with ArcGIS SceneView

Similar to MapView, SceneView provides an easy pathway to render AerisWeather tiles in an ArcGIS-based environment. This set up process is almost identical to that of the 2D MapView process above.

Simply update your imports to use esri/views/SceneView  instead of esri/views/MapView  and then swap your MapView  instance to SceneView , changing its configuration to use scale instead of zoom. Now you have the weather data you need in a stunning globe format with no other substantial changes to your application’s logic or functionality:

This easy, versatile integration for generating weather data visualizations makes it clear why ArcGIS and AerisWeather are top choices for enterprise weather mapping services. Here’s an example of what your 3D weather globe should look like:

To see a working version of this code in action, visit the 3D ArcGIS Weather Globe Interactive Example.

Build Your Own

To view the original code for each of these applications, check out the 2D ArcGIS API Integration and 3D ArcGIS API Integration example pages. Looking to get started with AerisWeather layers in your own 2D or 3D application? Contact our team today to discuss your personalized needs or begin your 30-day developer trial immediately!

Share this post: