March 19

Utilizing the COVID-19 Map Module within the AerisWeather JavaScript SDK

COVID-19 (Novel Coronavirus) is a global pandemic currently affecting millions of people and nearly every economy worldwide. It’s often challenging for people to grasp the severity and full breadth of these types of situations just by giving them a series of numbers from the data. Data visualizations, such as maps and charts, drastically improve the understanding of data and its impacts compared to providing people with just the data. Knowing this, we have created a COVID-19 map module that combines data from John Hopkins with our own JavaScript SDK.

The COVID-19 Map Module

The COVID-19 module is a map module that utilizes our new module support within the AerisWeather JavaScript SDK. With map modules, you can now quickly integrate and visualize new and custom data sources in your own interactive maps and applications with fully customizable styling.

The module accesses the COVID-19 information, maintained daily by John Hopkins CSSE, in CSV format. So that we can use a GeoJSON data source from our SDK, we need to first convert the CSV data to GeoJSON. Then, we configure the styling of the map markers based on data from the dataset and layer controls to enable switching between which dataset gets rendered to the map. Finally, we set up a custom info panel view and marker click handler to show full details for a single record when a marker from the dataset is selected on the map.

COVID-19 Module Usage Example

COVID-19 Module Usage Example

Utilizing the COVID-19 Map Module

The COVID-19 map module can be quickly integrated into an interactive map using the precompiled version. Alternatively, embed the module into a Javascript project using the source from our  GitHub repository.

Precompiled Module

Using the precompiled is the simplest method of integrating our COVID-19 module into your maps as seen in our live demo and our editable CodePen.  Just load our precompiled script into your HTML and add it to your maps:

Integrating the Module Source

If you are developing your JavaScript application using a NodeJS server or using NPM libraries, you can use the source files in this repository and import them as needed within your maps.

NOTE: This module is developed using Typescript and modern ES6 Javascript syntax. If you need the module’s Typescript source compiled to Javascript, run  from the project’s directory and use the compiled source files located within the dist/src/ directory.

The following is an example of importing and using the project source files in your Javascript project:

What’s Next?

Once you integrate the module, contact us if you have questions or suggestions. If you’re not currently taking advantage of the power and rich feature set offered by our Javascript SDK, skim through the online documentation and examples for inspiration.

Not an AerisWeather customer yet? Sign up for a free trial of our Weather Data API and AerisWeather Mapping Platform (AMP).

 

Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.