Questions  /  Building Maps  /  Builder

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:

Now we’ll add the bounding box part, for example, for coodinates 0,0 NE and 100,100 SW:{"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:


Now let’s add that all together!"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
  2. Place those coordinates instead of the red numbers in the URL, following the previous process.

The way Builder embed saves the state is not a documented feature and it can change anytime so this trick may not work and you need to check from time to time if the JSON object has changed.