Easy geospatial data visualization with LightningChart JS and Google

This article showcases and describes a particular use case of LightningChart JS, a JavaScript charting tool designed for performance intensive and real-time charting solutions.

The Google Static Maps API is a software service that makes it easy to embed pictures of maps into web sites. We're going to briefly show how to use the Maps API and combine it with LightningChart JS, allowing the use of any XY data visualization feature above the maps.

Getting started with Google Static Maps is quite easy. The only real obstacle is setting up a Google billing account. Thankfully, Google Maps allow $200 monthly credit for everyone, so you can try the service without having to worry about costs. You can read more about the service at Google's developers site.

When it comes to actual usage, the Maps API is extremely simple. Below is a minimal HTML code snippet, which already produces a nice looking map.

Google Static Maps API basic usage HTML

The basic idea is easy to understand - you provide coordinates (latitude/longitude or location name) and in turn receive a picture.

How does Google Static Maps work?

Combination with LightningChart JS

The next step in this use case is to overlay LightningChart XY data visualization features above the map picture. This makes it possible to add any of the 75 available XY data visualization applications and render geospatial data sets, using features such as scatter series, line series, heat maps and more.

Embed Google Maps roadmap in LightningChart JS

The way to connect LightningCharts and Google Maps is simple. You simply load the Maps picture in JavaScript and assign it to the series background style of a chart. Now we can see the map inside LightningChart JS.

The final step in enabling geospatial data visualization is to configure the chart axis intervals to match the latitude/longitude view of the map picture. With a bit of math, we are able to calculate the coordinates that match any pixel on the map picture from Google.

Calculate latitude longitude from Google Static Maps picture

Afterwards, we can visualize any location in the world by simply using the latitude/longitude coordinates as XY axis values!

JavaScript map data visualization LightningChart JS

So what is this technology good for?

The world is full of solutions for interacting and drawing on maps. In fact, there are so many that it can get you confused if you are a developer who is looking for a simple way to show a map and possibly some data on it.

We believe that the combination of LightningChart JS and Google Static Maps is suited for technically simple projects that should be implementable by senior as well as junior level experienced developers. 

The code referenced in this article is published as an open source code repository, which anyone can freely experiment with. You can find it in GitHub.

If you are new to LightningChart JS and its XY data visualization features, you can learn more at our product page.

For more alternative geospatial data visualization solutions, please checkout our map examples gallery. In February 2022 we will be posting a rather large scale update which will add several new and different items to these map examples, so stay tuned!

Leave a Comment