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.
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:
You’ll get a screen that allows you to select how to publish the map. In this case, copy the link under CartoDB.js:
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.
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:
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.