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

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.

Want to get started?

Sign up for a free account