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.
2.From the Navigation Menu in the left panel, select Data Explorer.
3.Select the CARTO Data Warehouse connection and click on demo data > demo_tables from the collapsible tree.
4.Select “paris_cycling_network” and explore the preview of the map and the details of the table.
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.
6.Change layer name to “Paris cycling network”.
7.Click Layer style to start styling the layer.
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.
9.Go to the Widget tab. If you haven’t created a widget yet, you will see the following page:
10.Click the New widget button and select “paris_cycling_network”.
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:
11.Click the “three dots” icon and select the Rename option.
Rename the widget to “Nº of cycling traces”.
Click the Back arrow to go back to the widget’s list:
12.Now we are going to add a few more interactive widgets (CATEGORY). Click the Add widget button and select “paris_cycling_network”.
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.
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:
Click the “Clear” button to remove the selection.
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.
You will get a histogram widget where you can filter the cycling network traces based on their length.
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.
15.We can change our base map. Go to the Base maps tab and select “Voyager” from CARTO.
16.Finally, we can change the name of the map to “Paris cycling network”.
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”.
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.
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:
Control the center and zoom level: https://gcp-us-east1.app.carto.com/map/c869093a-4eea-4239-a3ec-7cce66eb015e?lat=48.856087&lng=2.348647&zoom=15​
Control the pitch and bearing: https://gcp-us-east1.app.carto.com/map/c869093a-4eea-4239-a3ec-7cce66eb015e?lat=48.856087&lng=2.348647&zoom=15&pitch=40&bearing=90​
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.
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.
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:
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.