CartoDB

Summary

This tutorial will walk you through many basics of publishing data with CartoDB. It is meant for beginners looking to get started using the platform but are uncertain where to begin. It is also a good tutorial to read through if you just want to know some basic functionality when you are getting started.

After you have finished creating your map it is time to share it. This is one of the best things about CartoDB, we make it very easy. Here we are going to show you how you can rename your maps, add descriptions, customize infowindows, and share your maps with the world.

Example data

For this tutorial, we are going to use a dataset of populated places.

To load the data into your account, go to your CartoDB dashboard and select Common data in the top menu. In the dataset list, scroll down to the entry Populated places and click the plus symbol to the right of this element. The table will load and you should be redirected to the newly loaded data in your account. Click Map view to check the look of the dataset in the map.

Changing the name of your map

The name of your table in CartoDB is also the name of your map. It is an important thing to remember as it is the name that will be displayed in your public links and embedded maps. Right now, for example, your table should be named something similar to ne_10m_populated_pla.

To change it, make sure you are in the Table View and click the table name. You should be given an input field where you can modify the name. Change it to Populated places, click 'Save' and read and accept the dialog that pops-up. Your table should now be updated.

You'll notice though that it has changed from what you entered, it will now be called populated_places. This is because CartoDB table names must be in lowercase and spaces will be replaced by underscores (as will many non-alphanumeric characters). This is fine but worth remembering. The new name will change the way your SQL statements, URLs, and Maps API calls will be made, so try to settle on a name for new tables early in your development process.

Adding a description

It can be very helpful to add a description to your tables, both for your own use and for displaying to others. You can add a description to any table by clicking Add a description for this table... link found besides the table name. Try it on your new populated_places table by clicking the link and entering Populated places of the world for CartoDB tutorial.

Great, you should now have a description for your table, we'll see this again when we start working with embedded maps.

Adding tags

Tags are really useful ways for organizing and searching data on your CartoDB account. As the number of tables in your account grows, you can use tags to find all the tables in a project you are working on, or in some cases you can tag tables in a way so you know not to modify them (e.g. published) or where they are live (e.g. blog.cartodb.com)

To add tags to this table click Add tags directly below your table description. You can add any number of tags here by placing a comma between each tag. Try adding tutorial, adding tags, cupcakes, and hit 'Save'. You'll see that each time you hit comma the new tag will be made into a unit that you can delete at any time.

In your CartoDB dashboard, tags will be listed to the right of your table names, and by clicking any one of these tags you can filter tables to show only the ones that have been tagged in the same way.

Customizing your infowindow pop-ups

In your populated_places table, click Map view. This is where you can customize the look and feel of your data. If you click any of the points on your map, you should see a basic infowindow. We can now tell CartoDB which fields from the table we want displayed.

On the right side of the map you will see three icons. From top down they are the SQL option, the Style option, and the Infowindow option. Click the third one. CartoDB gives you several options for the general look of your infowindows. You can explore these by clicking the Theme dropdown. Go ahead and select 'Header orange'. At the bottom of the list of fields, click the toggle to turn all fields off. Next, click the toggle beside name and pop_max to turn them on. You can check or uncheck title. If it is checked, a label is given for the field. If not, just the value is given.

Changing the baselayer

The baselayer is an important component of all of your maps. We offer several default layers for you to choose from or if you host your own elsewhere you can add it to your account. Here we will use one of the default baselayers. Let's use a darker background. Click the baselayer selector above the map to see previews of the available baselayers. Select the one named GMaps Dark. Your map will be updated to use this layer as the basemap. It will be included in all shared and embedded versions of your map.

Sharing your map

Finally we are ready to share our maps! You can share any map you create by opening it in CartoDB and going to the Map view. It is important to remember that the view you have loaded in your map is exactly what you will share. This includes zoom and extents of your map. You should position the map in your CartoDB account in the same way you want people to first see your data when they load your map.

You need to make sure your table is public. This just means that you are making it viewable to people externally. Private tables are only available on paid accounts, so likely you won't be dealing with them at this point. If you are, you can change the status of a table at any point by clicking the Private link beside the table name and selecting the 'Make this table public' option. The inverse is available if you want to make a public table private again. Private tables are not available on free accounts.

To share your map, click Share found in the upper right, above your map. In the menu that comes up, at the bottom, you can find a URL to share the map. Click the clipboard to the right of the URL string in the menu. It copies the public URL to your computer clipboard, so you can paste it elsewhere. For example: open a tab in your browser, paste in the URL bar, hit enter and view your public map.

One thing you'll notice is that the name and description you entered earlier are now displayed above the map. This is great because it means the people you share the link with can read about the map they are viewing. If you want to change these options, you can toggle them on/off in the Embed dialog. Play with the different options to check the effect in your public map: show or hide elements, add search and sharing features, customize scrollwheel zooming, etc.

Embedding your map in a webpage

If you want to embed the map in a blog post or web page, you can also use the embed option CartoDB provides. In the same Share window, click Embed.

Now click the clipboard icon at the right. The string is now copied to your clipboard. You only have to paste it in your blog or website HTML code, inside the BODY tag. That's all!