Angular Carto: Introduction

If you work with geospatial data and haven't had a chance to work with Carto, you are missing out. Carto is a platform for creating interactive geospatial visualizations on the web. The canned maps that you can build from the web-based designer are surprisingly powerful, especially if you are already familiar with SQL and CSS. If you are a proficient web programmer, you can use their JavaScript API to customize your map in virtually any way you can imagine.

Carto hits a sweet spot of simplicity and flexibility that suits me nicely. I work on a team whose job is to help our clients make sense of data. The efficiency with which we can produce Carto web applications frees up our time to add value in other areas.

As great as Carto is, one problem that is becoming more pressing is that we're making a lot of the same maps on different data sets. Consequently, we're starting to do a lot of copy-and-paste code reuse. Over the next year, we will be refactoring essential map functionality into reusable components to make setting up and customizing a new map even more efficient. Our framework of choice for this project is Angular.

Angular is a JavaScript framework for developing dynamic web pages. It has a variety of features that interest me, including:

• Deep linking
• Model-View-ViewModel user interface architecture. (My favorite general description of the MVVM architecture remains Martin Fowler’s “Presentation Model.”)
• Unit testing

Fundamentally, though, what appeals to me about Angular is that you can use it to encapsulate up a bunch of low-level DOM manipulations into higher level routines that better fit how I think about the behavior of a web page.

As we package the our Carto functionality into Angular components, I will be blogging through the techniques that we used at each step. This introduction will also server as the index for the series as it progresses. Thanks for reading.

Index

• Introduction
• Map Factory
• Custom zoom buttons
• Switching basemaps