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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>AerisWeather ArcGIS</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.17/"></script> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="map"></div> <script></script> </body> </html> |
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> require([ 'esri/layers/WebTileLayer', 'esri/Map', 'esri/views/MapView' ], (WebTileLayer, Map, MapView) => { // create our base map instance const map = new Map({ basemap: 'streets', ground: 'world-elevation' }); }); </script> |
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:
1 2 3 4 5 6 |
const view = new MapView({ container: 'map', map: map, zoom: 4, center: [-72.47, 11.05] // longitude, latitude }); |
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:
1 2 3 4 5 6 7 |
// set up and add our weather layer const weatherLayer = new WebTileLayer({ urlTemplate: 'http://maps{subDomain}.aerisapi.com/[CLIENT_ID]_[CLIENT_SECRET]/radar-global/{level}/{col}/{row}/current.png', subDomains: ['1', '2', '3', '4'], copyright: 'Weather Layers by <a href="https://aerisweather.com/">AerisWeather.com</a>, ' }); map.add(weatherLayer); |
Interested in other layers? Just swap radar-global with anything else, like the following example which shows alerts at 80% opacity:
1 2 3 4 5 6 7 |
// set up and add our weather layer const weatherLayer = new WebTileLayer({ urlTemplate: ‘http://maps{subDomain}.aerisapi.com/[CLIENT_ID]_[CLIENT_SECRET]/alerts:80/{level}/{col}/{row}/current.png', subDomains: ['1', '2', '3', '4'], copyright: 'Weather Layers by <a href="https://aerisweather.com/">AerisWeather.com</a>, ' }); map.add(weatherLayer); |
Following the above process, your final code should look similar to the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>AerisWeather ArcGIS</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.17/"></script> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="map"></div> <script> require([ 'esri/layers/WebTileLayer', 'esri/Map', 'esri/views/SceneView' ], (WebTileLayer, Map, SceneView) => { // create our base map instance const map = new Map({ basemap: 'streets', ground: 'world-elevation' }); // const view = new MapView({ // container: 'map', // map: map, // zoom: 4, // center: [-72.47, 11.05] // longitude, latitude // }); const view = new SceneView({ container: 'map', map: map, scale: 40345678, center: [-72.47,11.05] // longitude, latitude }); // set up and add our weather layer const weatherLayer = new WebTileLayer({ urlTemplate: 'http://maps{subDomain}.aerisapi.com/wgE96YE3scTQLKjnqiMsv_6E9YI5H9qCO9m44qoEUccvL7UZVSrGVG3gbO7rGW/radar-global/{level}/{col}/{row}/current.png', subDomains: ['1', '2', '3', '4'], copyright: 'Weather Layers by <a href="https://aerisweather.com/">AerisWeather.com</a>, ' }); map.add(weatherLayer); }); </script> </body> </html> |
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script> require([ 'esri/layers/WebTileLayer', 'esri/Map', 'esri/views/SceneView' ], (WebTileLayer, Map, SceneView) => { // create our base map instance const map = new Map({ basemap: 'streets', ground: 'world-elevation' }); const view = new SceneView({ container: 'map', map: map, scale: 40345678, center: [-72.47,11.05] // longitude, latitude }); // set up and add our weather layer const weatherLayer = new WebTileLayer({ urlTemplate: 'http://maps{subDomain}.aerisapi.com/wgE96YE3scTQLKjnqiMsv_6E9YI5H9qCO9m44qoEUccvL7UZVSrGVG3gbO7rGW/radar-global/{level}/{col}/{row}/current.png', subDomains: ['1', '2', '3', '4'], copyright: 'Weather Layers by <a href="https://aerisweather.com/">AerisWeather.com</a>, ' }); map.add(weatherLayer); }); </script> |
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.
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!
No comments yet.
Be the first to respond to this article.