Borja Muñoz • Sep 28, 2021

How to Build Scalable Spatial Apps with Vue.js & CARTO

Use Cases
5 mins read
Share
Facebook Twitter Linkedin

Vue.js is one of the fastest growing frameworks for building web applications. It is really versatile and is a reactive framework that provides core libraries and a wealth of reusable components.

Using CARTO + Vue.js is a great combination for building spatial applications. The reactive nature of Vue.js makes it especially suitable for developing apps with spatial information because it simplifies the interoperability between the app components such as maps, layers, or widgets.

Our CARTO platform provides the essential features you need for the backend of your spatial app so you can focus on implementing the frontend user experience for your application.

Some of our customers and partners are advanced Vue.js developers and they are building really impactful apps using our platform in combination with this framework, so we have made sure our platform integrates seamlessly with apps built using Vue.js.

CARTO is compatible with several different visualization libraries but we recommend using deck.gl, because it is easy to use, powerful, and provides the most advanced visualization capabilities. We have developed the CARTO module for deck.gl that makes it really straightforward to use this visualization library with our platform.

When talking about application development, we believe an example is worth a thousand words. We have developed an example application that demonstrates our recommended practices for building spatial applications with Vue.js and CARTO. We have also created an integration guide describing the step by step process we have followed to build this example.

Designing maintainable and scalable spatial applications that can easily grow to support more features, bigger datasets and more users is not an easy task. When designing our platform and specific products for app development like CARTO for React we always follow these key principles:

Use of well supported open source libraries with a huge community behind them
Reduced coupling among components taking advantage of the reactive paradigm and global state management
An approach that feels natural to Vue.js developers

We have followed these same principles when implementing this example application. The main libraries used (in addition to deck.gl for visualization) are:

Vue Material for the user interface components
Vuex for managing application state
Vue Router for page navigation
Apache ECharts for charting
Turf.js for client side spatial analysis

We have also employed Vue CLI to create the default project structure. On top of this structure we have added the required libraries and code to implement the different features. You can check some code examples extracted from the code repository below.

We have implemented a layerManager module that includes the typical functions for working with layers like adding, removing or hiding a layer. These functions simply update the corresponding layer in the layers array and we later update the layers property in the Deck object using the setProps method:

updateDeckInstance () {
  if (!this.deckInstance) {
    return
  }
  const layers = [...Object.values(this.layers)];
  if (this.deckInstance) {
    this.deckInstance.setProps({ layers })
  }
}

The layers are added to the map when the view is mounted using the addLayer function from the layerManager module. We can use any of the deck.gl layers to specify the visualization for the dataset; for instance, here we are using the CartoLayer from the CARTO module with the colorContinuous style helper from the same module to create a choropleth:

layerManager.addLayer(
  new CartoLayer({
    id: 'railroads',
    type: MAP_TYPES.QUERY,
    data: 'SELECT cartodb_id, the_geom_webmercator, scalerank FROM ne_10m_railroads_public',
    pickable: true,
    lineWidthScale: 20,
    lineWidthMinPixels: 2,
    autoHighlight: true,
    highlightColor: [0, 255, 0],
    getLineColor: colorContinuous({
      attr: 'scalerank',
      domain: [4, 5, 6, 7, 8, 9, 10],
      colors: 'BluYl'
    })
  })
)

State management is done using Vuex. We update state variables using mutations, and components react to changes in state variables by watching for changes in computed properties. For instance, we need to update the chart every time the viewport changes. The BarChart component retrieves the features in the current viewport using the mapState helper and then watches for changes in the viewportFeatures state variable to update the chart:

computed: {
  ...mapState(MODULE_NAME, ['viewportFeatures'])
},
watch: {
  viewportFeatures(data) {
    const groupedValues = groupValuesByColumn(data, 'revenue', 'storetype')
    const { xAxis, series } = this.bar
    xAxis.data = groupedValues.map((d) => d.category)
    series.data = groupedValues.map((d) => d.value)
    this.isLoading = false
  }
}

How to get started

To start developing spatial apps with CARTO and Vue.js we recommend you start by reading the guide. If you need additional information, don’t hesitate to contact us.