Customizing, sharing, and embedding your maps
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, create visualizations, customize infowindows, and share your maps with the world.
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
Right now, your table should be named something similar to
ne_10m_populated_pla To change the name of your table in CartoDB, 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.
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.
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
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
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. You can add your own basemaps, too.
Visualize your map
When you want to visualize different datasets or just share the map, you must create a visualization. Visualizations are where you will set and store all the filters and styles that you want to use in your published maps. Visualizations also let you add layers from multiple maps, mixing the data without having to write any complex code or queries. They also let you reuse data from the same tables in multiple visualizations without any difficulty. To get started with visualizations, click the orange Visualize button on the top right of the page. You will be prompted to add a name for your visualization, don’t worry, you will be able to change it later.
Visualizations are similar to tables, you can quickly tell them apart by looking at the icon beside the table name and the visualization name in the Table View. Now that you have created your visualization, it will be available on your dashboard.
Publish your map
Now that you have a Visualization just the way you want it, let’s share it with some friends. Click the green Publish button in the top right of the page. From here you can customize how your published map is presented, including zoom and center, which interface elements to display, toggling layers, social media links, etc. At the bottom you will find a URL to share your Visualization via Twitter, email, or anywhere else. When you share that link, viewers will only be able to explore it on the map, they will not be able to edit any of your data. For more details, take a look at next tutorial.
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 Publish 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!