How to Create React Apps with Maps & Location Data
.png)
Organizations use spatial analytics to solve a variety of business problems from deciding where to open a new store or fulfillment center to optimizing delivery routes. To solve such complex use-cases it’s necessary to work with a flexible platform that allows users to create custom solutions to address their specific business needs. CARTO offers a powerful and extensible framework to build these custom applications on top of the latest cloud native technology.
Our goal with the CARTO for React framework is to speed up the development cycle and ensure the quality of these custom solutions.
Depending on the organization custom solutions are built by internal developers leveraging one of our integration partners around the world or directly by CARTO. Let us know if there is a project you are working on where we can help.
Building cloud native spatial solutions with CARTO
The latest version of our Location Intelligence platform is fully cloud-native and provides tight integrations with leading cloud data warehouses including Google BigQuery Snowflake and Amazon Redshift. This new platform provides our users with the possibility to create cloud native spatial applications running on top of these cloud data platforms enabling cost-effective solutions thanks to the computing-storage separation that is characteristic of cloud technologies. These solutions can scale to handle very large datasets using Spatial SQL and benefit from access to the largest spatial data catalog available.
CARTO for React was launched earlier this year and is the framework for extending our platform when it comes to building custom solutions. The main purpose of this framework is to provide a quick way to build solutions that solve complex use-cases requiring a high degree of customisation. We have recently released version 1.1 of CARTO for React supporting all the cloud native functionality offered by the new platform.
Here at CARTO have also used this development framework to build our map-making solution Builder and our use-case specific templates such as the CARTO for Site Selection application:
In this blog post we are going to show you how to create a cloud native spatial application to explore population data that is hosted in your own data warehouse. The CARTO platform provides a public API that abstracts the communication with the data warehouse and makes it very easy to work with different cloud data platforms.
Creating an example application
The first thing you need to do is to create an application within the CARTO Workspace. You can sign up for a free trial account here. Once you have signed in, you can set up a connection to your data warehouse instance. After which you can go to the Data Explorer and browse the available datasets.
In this case we are going to use a tileset as the main data source for our application. The tileset has been created from the UK spatial features dataset available in the CARTO Data Observatory. We have included the variables corresponding to the total population and the urbanity level.
By default, CARTO for React applications are integrated with the CARTO platform credentials using the OAuth protocol. In order to create an application you need to go to the Developers section and specify the name and URL. A public identifier the client ID will be created to identify your application. Now you are ready to start building your app.
CARTO for React comes with templates for the Create React App toolchain. You need to open a terminal and specify the template you want to use to kickstart your application build:
After the application folder is created and the dependencies have been downloaded, you need to include the application client ID in the file that contains the initial configuration as can be seen in the following video.
Now you can use the Hygen code generator to add views, sources, and layers to your application. In this case, we have added a source pointing to the tileset mentioned above and a layer where we have customized the style to apply a color scale to the urbanity level values.
You can also easily add widgets by going to the library reference and copying and adapting the sample code provided. For this example application we have added a formula widget with the total population and a category widget with the different urbanity levels.
For a complete walkthrough, we recommend you follow the step-by-step instructions in our Getting Started guide.
New features in version 1.1
The new CARTO for React version comes with a host of new features and improvements. The most obvious is the integration with the new version of the CARTO platform described above which offers native integration with your cloud data warehouse. In this section we are going to describe some of the most important features we have added.
With CARTO for React v1.1 we ship a new JavaScript template compatible with the new version of the platform but we are also debuting a new TypeScript template that enables modern type-safe JavaScript programming. With this template you can build more complex applications with the added benefit of type checking.
We have also included new widgets for creating legends and scatter plot charts but probably the most awaited feature is the new time-series widget. Using this widget we can explore time-enabled datasets in a very easy and powerful way.
Finally another important addition is the option to use Google Maps vector basemaps. This feature provides additional performance because the basemap and the deck.gl layers are both rendered in the same WebGL canvas. In addition to improved performance, we also get features like correct 3D occlusion between the basemap and the data layers.
Start building custom solutions today!
On Thursday we will be showcasing all the latest features of CARTO for React in a practical webinar. If you are interested in developing cloud native spatial apps then be sure to sign up here.
You can also sign up for a free 14-day trial of CARTO and start building custom spatial solutions using our latest cloud native platform.
Check our extensive documentation or contact us to find out more.
|
This project has received funding from the European Union's Horizon 2020 research and innovation programme under grant agreement No 960401. |
.png)
