CARTO User Manual

CARTO User Manual

Go back

Build an interactive map and embed it

Context

In this section, we provide a tutorial that showcases how easy it is to create an interactive map using CARTO Builder and share it, embed it on your web page, or using a low code tool to create a story map.

Steps To Reproduce

  1. Go to the CARTO signup page.

    • Click on Log in.
    • Enter your email address and password. You can also log in with your existing Google account by clicking Continue with Google.
    • Once you have entered your credentials: click Continue.

    Log in Email and password

  2. From the Navigation Menu in the left panel, select Data Explorer.

    Menu features data explorer

  3. Select the CARTO Data Warehouse connection and click on demo data > demo_tables from the collapsible tree.

    Data Explorer content carto data warehouse

  4. Select “paris_cycling_network” and explore the preview of the map and the details of the table.

    Data Explorer map prewiew

    Data Explorer data prewiew

  5. Create a map by clicking the Create map button on the top. This will open the table as a layer on a CARTO Builder map. Check Creating a map from your data to get started.

    Data Explorer create map from table

  6. Change layer name to “Paris cycling network”.

    Map layers rename

  7. Click Layer style to start styling the layer.

    Map layers options

  8. Click the “three dots” icon in the Stroke Color section and select “Stroke color Based on” feature longeur. Pick a palette for a sequential variable (gradient). Now the cycling network on the map will display a ramp color based on the length of the traces.

    Map stroke style based on field

  9. Go to the Widget tab. If you haven’t created a widget yet, you will see the following page:

    Map widgets new widget

  10. Click the New widget button and select “paris_cycling_network”.

    Map widgets select source

    When you add a widget, it´s always the Formula widget by default, based on a Count operation on the number of features displayed on the map viewport:

    Map widgets formula by default

  11. Click the “three dots” icon and select the Rename option.

    Map widgets formula rename option

    Rename the widget to “Nº of cycling traces”.

    Map widgets formula rename

    Click the Back arrow to go back to the widget’s list:

    Map widgets formula back

  12. Now we are going to add a few more interactive widgets (CATEGORY). Click the Add widget button and select “paris_cycling_network”.

    Map widgets select source category

    Select the CATEGORY widget, choose SUM operation from the list, select the column highway for the categorization, and the aggregation column longeur. Now the widget shows the length of the cycling network in meters for each highway category. Rename the widget to “Cycling network by type and length (m)”, as explained in step 11.

    Map category widget select field

    Now using the category widget, we can filter the data based on the highway type. For example, we can select the “cycleway” category from the list to highlight this particular category and temporally remove the others from your visualization, getting those traces from the network that are only destinated to cycling paths:

    Map category widget selected element

    Click the “Clear” button to remove the selection.

    Map category widget clear element Map category widget cleared element

  13. We are going to add the last widget. For that, go back to the widget’s list, click the Add widget button and select “paris_cycling_network”. Choose the HISTOGRAM widget and select longeur for the aggregation column. In the Display options, change the number of buckets to 10. Rename the widget to “Cycling network by length (m)”, as explained in step 11.

    Map histogram widget selected field

    You will get a histogram widget where you can filter the cycling network traces based on their length.

    Map histogram widget

  14. Now let’s configure the tooltip (or info window). Go to Interactions tab, activate the tooltip and select the fields longeur, Highway and revetement.

    Map tooltips new tooltip

  15. We can change our base map. Go to the Base maps tab and select “Voyager” from CARTO.

    Map basemap carto

  16. Finally, we can change the name of the map to “Paris cycling network”.

    Map rename

  17. Once the map is ready, we can share it online with your teammates or make it public. For more details, see Publishing and sharing maps. We are going to select the option “Public map”.

    Map public map

  18. In the Shared Link tab, there are different sharing options, by clicking the “Copy public share link” button, the public map link will be copied in your clipboard and you can share it. Anyone with this link will be able to access the map in a “view mode”, without the possibility to make any change in the source map. Users with the link will be able to zoom in and out, visualize map features, explore using the tooltip, and filter the map using the widgets.

    Map published map

  19. You can also control how it is displayed using URL parameters. This is especially helpful for integration with no/low-code tools, and story-telling with maps. We can control the center, zoom level, pitch, bearing, and visible layers of a public map by adding lat and lng, center, pitch, bearing and layers parameters. Check the complete reference here. Some examples:

  20. We can also embed this map in a website by Copy and Paste the HTML code into documents to show map on web pages. As we have done with the embedded maps shown on Step 19.

    Map embed map

    This is especially useful if you want to use your CARTO maps on your website, or to build a story map using a no/low-code tools (like Webflow, SquareSpace, etc.) or presentations tools (like Slides.com). Slides.com is a tool for creating, presenting and sharing modern presentations. It enables anyone with a web browser to easily create beautiful presentations with interactivity (click, hover, etc.) that can simulate buttons, images, animations, iframes, and much more.

    Slides.com features

    In the iframes you can include the link to published CARTO Builder maps, as explained in step 18, like you can see in the following image: Slides.com features

    Check the story map that we created in Slides.com, using the “Paris cycling network” dataset of this tutorial, along with additional data from CARTO Data Observatory.

    Ebedded Map Application