How to center a CARTO Builder map embed

Learn how to add different zoom and center parameters to a Builder map embed.

Centering a Builder map can be done in the URL, but it’s a little bit tricky. When you move the view in an embed, you’ll see the URL changes. The thing is, that URL is encoded, but is actually showing a bounding box (NE and SW coordinates). This is the structure:

https:///embed?state={"map":{"ne":[x, y],"sw":[x, y]}}

Let’s take your URL:

https://public.carto.com/builder/d1d752cb-a9c4-432d-b624-75891551f27e/embed?

Now we’ll add the bounding box part, for example, for coodinates 0,0 NE and 100,100 SW:

https://public.carto.com/builder/d1d752cb-a9c4-432d-b624-75891551f27e/embed?state={"map":{"ne":[0, 0],"sw":[100, 100]}}

And now we’ll have to encode that, but only the bit after “state=”. We can use this simple online encoder/decoder:

Decoded: {"map":{"ne":[0, 0],"sw":[100, 100]}}
Encoded: %7B%22map%22%3A%7B%22ne%22%3A%5B0%2C%200%5D%2C%22sw%22%3A%5B100%2C%20100%5D%7D%7D

Finally, we’ll have to change those %22 for the proper symbol, " which the URL is able to parse:

%7B"map"%3A%7B"ne"%3A%5B0%2C%200%5D%2C"sw"%3A%5B100%2C%20100%5D%7D%7D

Now let’s add that all together!

https://public.carto.com/builder/d1d752cb-a9c4-432d-b624-75891551f27e/embed?state=%7B"map"%3A%7B"ne"%3A%5B0%2C%200%5D%2C"sw"%3A%5B100%2C%20100%5D%7D%7D

So, taking this into account, what you have to do is:

1. Figure out the bounding box coordinates (in lat/long) of the area you want the user to visualize when the map is opened. You can use this handy tool http://bboxfinder.com
2. Place those coordinates instead of the red numbers in the URL, following the previous process.