Borja Muñoz • Jun 9, 2021

How to use Angular & CARTO to Build Scalable Spatial Apps

Angular is one of the most popular frameworks for building web applications with a huge community of developers. It includes powerful features for building scalable applications, a great collection of libraries, and tools for making developer’s lives easier.

If you want to build spatial applications, CARTO + Angular is a really powerful combination. The CARTO platform provides many of the features you need for the backend of your spatial app so, most of the time, you just need to implement the frontend for your application.

Several CARTO customers and partners are building highly successful geospatial applications using Angular with our platform, so we want to make sure we provide the best support to the community of Angular developers.

Our recommendation for building spatial web applications with CARTO is to use deck.gl as the visualization library. The CARTO for deck.gl module provides functionality for working with the CARTO platform and it is tightly integrated with our platform APIs.

We have created an example and an integration guide to show just how easy it is to integrate Angular applications with CARTO for deck.gl.

The example follows best practices for designing scalable and maintainable geospatial apps. These practices are the same we follow to build our own platform and our solutions like CARTO for React:

• Use of well supported open source libraries with a huge community behind them
• Reduced coupling among components with global state management
• Natural approach for experienced Angular developers

These are the main libraries used in this integration example:

• Angular Material for the user interface components
• Angular RxJS for managing communication/updates to components
• Angular Routing for page navigation
• Apache ECharts for charting
• Turf.js for client side spatial analysis

Our guide follows a step-by-step approach to building the example application from scratch with all the different modules, services, and components created using the Angular CLI.

Below you can see some code snippets to demonstrate how we have implemented this example. The common operations for working with layers (adding, updating, removing…) are centralized in a MapService. For example, this is the implementation of the method for adding layer:

async addLayer(layer: Layer) {
  this.layersIdx[layer.id] = this.layers.length;
  this.layers.push(await layer.getLayer());
  if (this.deck) this.updateDeck();
}

All the layers extend from the Layer class and need to implement the getLayer method that will return a deck.gl layer instance:

async getLayer() {
  return new CartoSQLLayer({
    id: this.id,
    data: 'SELECT cartodb_id, the_geom_webmercator, category, scalerank FROM ne_10m_railroads_public',
    visible: this.visible,
    pickable: true,
    lineWidthScale: 20,
    lineWidthMinPixels: 2,
    getLineColor: colorContinuous({
      attr: 'scalerank',
      domain: [1, 2, 3, 4, 5, 10],
      colors: 'BluYl'
    }),
    getLineWidth: (f: any) => f.properties.scalerank,
    autoHighlight: true,
    highlightColor: [0, 255, 0],
  });
}

Communication between components takes advantage of the functionality offered by the RxJS library. For instance, the MapService communicates viewstate updates using a BehaviorSubject and the chart component is subscribed to receive updates in order to recalculate the chart:

this.subscription.add(
  this.mapService.onViewStateChange.subscribe((viewportBbox: any) => {
    if (viewportBbox && this.storesData) {
      const viewportFeatures = getViewportFeatures(this.storesData, viewportBbox);
      this.setChartDataWithViewportFeatures(viewportFeatures);
    }
  })
);

How to get started

If you want to get started building spatial apps with CARTO and Angular, please check the guide. If you need additional information, don’t hesitate to contact us.

About the author

Product Manager at CARTO

More posts from Borja Muñoz