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:
These are the main libraries used in this integration example:
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);
}
})
);
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.
Want to get started?
Sign up for a free accountWhat is the first thing that you do when you open a web map? For most of us, we scroll and scroll until we’re zoomed right in to exactly where we live to find out what’s ha...
Use CasesOne of the most important decisions retailers can make revolves around the site selection component within their network expansion plans. Afterall, at the end of the day, t...
Use CasesWhile travel and commuting pick up speed once again across the world, investment in out-of-home advertising (OOH) is growing in tandem. With OOH ad spend projected to grow ...
Use CasesPlease fill out the below form and we'll be in touch real soon.