How to Build Scalable Spatial Apps with Vue.js & CARTO
Developing spatial apps with Vue.js? Check out our guide to how easy it is to integrate Vue.js applications with CARTO for deck.gl
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:
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:
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:
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.