A Quick Template for Integrating CartoDB into an Interactive Web Project

Yesterday, I got the chance to join the folks from CartoDB for their CartoCamp Edu, bringing together educators and web-mapping practitioners, including Chris Whong, to discuss how to use CartoDB in the classroom. As an educator who teaches CartoDB to mostly working professionals in the Certificate Program in GIS and Design at Pratt Institute, I’m always interested in new ways of showing students the power and utility of CartoDB for producing interactive online maps.

Once the purview of a select few, online maps have been democratized to the point of being readily available to anyone with a computer and data they want to visualize. There are still some key barriers to entry, such as knowing how to clean data and work with different styling techniques, but CartoDB makes this all incredibly easy, particularly with their new one-click mapping feature.

I use CartoDB in the classroom because it’s an easy to use platform that makes the difficult tasks of hosting data and styling features easy. For my students in Mining the Web, they’re up and running with a map on the first day. In some cases, this is their first map. For others who may be coming from more traditional GIS work, this is their first online map. No matter what their background, once they see how easy it is to create a map, they start teaching themselves, playing with features and styles to get the map they want. I use the CSS panel to teach them how to leverage CartoCSS to improve the style and functionality of their maps.

Hosting a visualization on CartoDB is all well and good, but students often ask how they can create more functionality for users, like changing layers or filtering results. This requires more JavaScript knowledge and leads them to start creating their own interactive web project, often a website built in JavaScript that uses the visualization created in CartoDB as a base and layers functionality on top of it. CartoDB has a great course on getting started with CartoDB.js and Chris led us through a great tutorial on getting started using NYC PLUTO data, but it got me thinking about how to take what he was showing us and make it a little easier to get started. I’ve done several interactive web mapping projects and each time, I have to go back and find the starter template to kick things off. To help others get started, I created a template:

Running this code now will show you a basic map (which you can see here). It’s the countries of the world (using the world borders layer in CartoDB’s data library). When you click on a country, the view is filtered, returning only the countries that have a population equal to or greater than the country you selected. Selecting a country polygon will further filter the view. You can’t click on countries that aren’t shown because they don’t exist in the layer.

The key pieces of code are the variables that control the center-point of the map (“map_centerpoint”), the zoom level (“zoom_level”), the visualization layer (“myVizLayer”), and the table name (“table_name”) for the data you want to work with. The center-point and the zoom level are values you pick (higher the number, the closer the zoom). The visualization layer is found when you visualize your map. When you click “Publish” in the top right-hand corner:


View of map in the visualization screen.

You’ll get a screen that allows you to select how to publish the map. In this case, copy the link under CartoDB.js:


Publish options for CartoDB visualization

Now replace the value in “myVizLayer” with that link (remembering to put it into quotes) and update the table_name with the name of the table for the data you want to change. You can find the table name in the SQL panel on the right hand of the screen where it says “SQL”. The table name is the word after the “FROM”. Replace the value for table_name with your table name.


SQL panel in the visualization screen. The table name is the part of the query after the word “FROM”.

Now you’ve replaced most of the key elements of the code. The next thing is to replace the values in the “setInteractivity()” function. This currently has “cartodb_id”, “name”, and “pop2005”. These are the columns from the world_borders table that we want to use in our visualization. You’ll always want your cartodb_id. That’s how CartoDB recognizes objects to display features. You can get the column names by switching to the “Data View” (center top). Find the column names you want to use:

Finding column names in Data View

Finding column names in Data View

Now where you see “data.name” or “data.pop2005”, you can replace that with your column names using the syntax “data.<column_name>”. Now you can query on the values in those columns or display information as we’re doing here with the population and country name. The next step is to add more custom functionality and styling, which is beyond the scope of this post, but uses the same elements we’ve built with the reset button and the click to filter functionality.

This template is hosted in a Github repository that I hope to fill with other interesting and useful templates. In the meantime, I hope you find this useful. Happy mapping!

EDIT: In the interests of full discloser, I should’ve mentioned in my original post that I’ve been a CartoDB Partner since April of this year. This post isn’t sponsored by CartoDB.


One thought on “A Quick Template for Integrating CartoDB into an Interactive Web Project

  1. Pingback: Map Hacking NYCT Subway Station Conditions, Part I | Datapolitan

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s