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:
We have followed these same principles when implementing this example application. The main libraries used (in addition to deck.gl for visualization) are:
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
}
}
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 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.