Geospatial Visualisation with React, Mapbox-GL, and Amazon Location Service

March 30, 2021
By combining open-source front end packages in React with the new Amazon Location Service, geospatial data visualisations including 3D maps can easily be added to data solutions.


Opsmorph has been developing geospatial visualisation components that seamlessly integrate with cloud data lakes on Amazon Web Services to enable more efficient explorative geospatial analysis. In this blog we discuss how these components are put together using the new Amazon Location Service.


Geographic and spatial data insights are utilised in a variety of use cases including, among others, planning, logistics, management and engineering. The geospatial dimension provides a way to link together structured but often disconnected data sets to study the statistical connections between demographics, socioeconomics, and other localised factors. To provide insights, data analytics teams require geospatial information systems (GIS) to enable them to query, store, edit, and analyse geospatial data at scale. Often there is a requirement for the solution to be web facing and easily integrated with an organisations website so that the insights can be shared with many users remotely, but this is difficult to achieve with commercial off-the-shelf visualisation systems. Furthermore, the configuration of geospatial information systems needs to be efficient and easy as the less time setting up new maps and recoding software, the more time there is for analysing results. Organisations wish to deliver such systems in a cost efficient and secure way. Software developers tasked with building geospatial information systems wish to use open-source tools where possible combined with map layers from a third-party provider where necessary. Often the use of such map layers involves an enterprise agreement with a third-party API provider which can complicate the monitoring of system costs and client billing if this is distinct from the billing of the cloud provider used to host the other components of the software solution.


An open-source geospatial data visualisation package for web application development can offer a cost-effective way to incorporate geospatial visualisations in data solutions. One such example is Mapbox-GL, or if working in React, a wrapper of Mapbox-GL such as react-map-gl made by Uber. Mapbox-GL uses vector maps for speed and enables simple customization of map visualisations to include such styles as choropleths, cluster markers, and even 3D maps, together with customizable controls to adjust zoom, compass bearing and the elevation pitch of the map viewpoint. Recently, Amazon Web Services has introduced a new geospatial service, the Amazon Location Service. Where previously an independent API key and license were required with Mapbox directly, AWS has partnered with map providers including ESRI and HERE to provide an AWS hosted API to third-party tile layers which can mean billing becomes more centralised if using AWS for other components of the application. The Amazon Location Service also offers additional functionality for search, tracking and notifications. Web facing geospatial visualisations built with open-source JavaScript packages can also be combined with a browser-based user interface to customize the configuration of map visualisations, providing an efficient way for a data team to explore different geospatial visualisations without rewriting code. Connecting geospatial visualisations to a cloud data lake in the backend can provide scalable cost-effective storage with an API for standardised query support to load geospatial data on the map in the front end.

Getting Started

Opsmorph have been developing browser-based geospatial visualisation components written in React. These components can be installed, customized, and integrated with customers in-house cloud software or embedded in the Software-as-a-Service solutions customers are developing for commercialisation. Opsmorph has integrated these components with additional data visualisation dashboards and can help customers build data lakes and APIs to store and query geospatial data at scale.


A choropleth style map indicating the change in COVID 19 cases by a given date in the London borough of Newham.

Adding layers to plots

Simple configuration UI components enable data lake queries to be connected to customizable map layers.

Adding colours to layers

A cluster marker style map showing dummy data with custom HTML markers that break up on zoom.

Draggable dashboards

A 3D style map using the HERE tiles with custom controls for zoom, pitch and bearing.


What license are the data visualisation components available under?

When working on a project with Opsmorph to develop a geospatial information system or geospatial visualisation, the geospatial visualisation components, and all underlying JavaScript packages, are provided under an MIT license meaning you are free to customize and commercialise as you choose. The map tiles require integration with a third-party provider and are currently integrated with the new Amazon Location Service which is in preview now and currently free. For more information about future pricing of the Amazon Location Service see here.

What cloud providers are the data visualisation components available on?

The geospatial visualisation components operate in any web browser. The dashboard configuration is currently built to be saved in Amazon Web Services and data queries currently integrate with cloud data lakes on Amazon Web Services.

What support is available for understanding how to use the data visualisation components?

During a development project, Opsmorph can embed our developers within your team and work with you to help you install, understand, and customize the components. Alternatively, the solution can be installed as is with instructions for use. Further reading and suggested online learning resources can be provided.

Is the data visualisation component provided only as is, or can it be customized?

The geospatial visualisation components are highly customizable and can be expanded further. Our team of developers can work with you to plan a project to build a bespoke geospatial visualisation solution that best meets your needs, whilst fast tracking the process by incorporating reusable components where applicable.

Contact Opsmorph

Whether you're a startup looking to accelerate development of your cloud platform, a research project looking to introduce machine learning, or an organisation of any size looking to make better use of your data, contact Opsmorph for a free consultation to see how we can help.