CARTO for React: A faster way to develop spatial applications

Summary

Today we are very excited to announce CARTO for React, our latest solution for development teams to build better Location Intelligence apps faster

This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
CARTO for React: A faster way to develop spatial applications

Application development is a key requirement for many organizations that need to provide custom experiences for their users. This can range from a simple interface providing access to data in a very specific manner (e.g.  data monetization) to a more complete solution to support complex business decision-making (e.g.  site selection).

Examples of custom made applications


The commonality is that organizations require a fast  productive  and flexible platform to help them build these types of applications. CARTO already offers APIs and libraries  such as deck.gl  to help build these spatial applications. However we often hear feedback from our customers and partners that they still need to invest a lot of their own time to create an end-to-end application. Time spent designing the UI/UX  creating a repository for version control  configuring scripts for different development activities like builds  deployments  or local development servers  and setting up development tools like linters or formatters  and so on.

Today we are announcing a further development resource to help our partners and customers to be more productive building apps  by opening up the same tools we use to create CARTO itself  and announcing CARTO for React. With this announcement our goal is to make development of spatial applications at least twice as fast.

Introducing CARTO for React

React logo

React is currently one of the most popular frameworks for building web applications. We are convinced that the React library along with Redux provides an unmatched environment for building Location Intelligence applications.

We understand that you might want to use other frontend frameworks to develop apps with the CARTO platform like Angular or Vue.js. For that reason  we’ve made sure that our CARTO for deck.gl module works perfectly with these frameworks and have included examples and guides in our documentation site to help you with your app development. We will also be adding full support for other frameworks in the near future.

CARTO for React provides application templates to kickstart the app development process and a well designed library that includes packages for user interface components  state management  or to simplify connections with the CARTO platform through our APIs.In the following diagram you can see the different functionality provided by the library.

CARTO for React components diagram


Templates to Kickstart Development

Most spatial applications are based on a common layout. Therefore we have extended the great work from Create React App  the de facto standard for building React applications  to provide a skeleton for building apps and a template that can be useful for many different geospatial solutions.

Template screenshot

Click on the image to open the sample app

We have created two different templates for Create React App: the blank template for starting your application with the minimum configuration and the sample app template for showing how you can implement the functionality. When creating an application using  our templates  you obtain a preconfigured environment with everything you need to start the development work by just issuing a single command in your console.

The templates are designed to have a clear separation of concerns with a structure optimized for managing those components usually found in an LI application: the map  views  data sources  layers  and widgets. We also provide a code generator based on Hygen that lets you create views  data sources  and layers by just using the console.

Beautiful Themes for Spatial Applications

To provide the best user experience  we know it is fundamental to have an awesome look and feel. So  we have created a theme for the popular Material-UI React UI framework  based on many years of experience and have added custom LI widgets not currently found in this framework (formula  category  histogram  pie  etc.).

All of this is available in a convenient storybook that contains all of the customized UI components.

Storybook screenshot


Demo Showcase

React logo

We know you want to get hands-on experience of using an spatial app built with CARTO for React  so we have worked with an important partner  Thinking Machines  to create a full app that you can test and also download and modify if you wish.


In this telecoms focused application you can learn how to implement a geographic profiling tool to analyze a region around Bangkok (Thailand)  focusing on information about telecommunications (internet speeds  cellular towers etc) and you can also explore how you can build a tool to help you optimize capex that uses suitability analysis by combining different data variables and weightings.  

   {% include icons/icon-quotes.svg %}    We’ve been able to reduce development time by more that 50%
       Ram de Guzman  Geospatial Product Manager at Thinking Machines.    
React logo

To build a great spatial application  you need data that you can trust. For this demo  one of our key data partners  Experian  has provided a data sample containing socio-demographics   spending information and consumer segments. This is a great example of leveraging the Data Observatory to provide an enhanced application user experience.

Screenshot of Telecoms app built by Thinking Machines


You can access the application here and you can browse or download the source code from this Github repository. In the README.md file you will find some technical documentation detailing how the application is built.

Revamping our Developer Resources

In addition to launching CARTO for React  we have also developed a brand new documentation site with a wealth of resources and examples to help developers build powerful spatial applications more quickly.

Screenshot of documentation site


All part of an Open Source Ecosystem

We are huge  fans of open source and we are actively contributing to many open source projects. This product is based on some great open source libraries and frameworks like deck.gl (part of the vis.gl framework)  React  Redux  and Material-UI.

Logos of the open source libraries and frameworks


CARTO for React is open source  both the templates and the library  and we would be really happy if we could create a dynamic developer community around it with our customers and partners. Please reach out to us if you would like to be a part of this growing community.

Start using CARTO for React today

CARTO for React is available today for all CARTO users. You can sign up for a free CARTO account and get started right now.

Check our documentation for more information  and if you have any questions or want a personalized demo  please reach out to us.

This is just the beginning. In the coming months we will continue adding support and examples to other libraries. In the meantime  we can’t wait to see the amazing applications you develop!

Want to get started?

Sign up for a free account