How to center a CARTO Builder map embed

Overview

Centering a Builder map involves modifying the URL with encoded bounding box coordinates. When you move the view in an embed, the URL updates to reflect a bounding box with Northeast (NE) and Southwest (SW) coordinates. The structure follows this pattern:

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

Steps to Center a Map

1. Determine Your Bounding Box Coordinates

Start with a base Builder embed URL:

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

Use a tool like bboxfinder.com to find the latitude/longitude coordinates for your desired viewing area.

2. Create the State Parameter

Insert your coordinates into the JSON structure. For example, using coordinates 0,0 and 100,100:

{"map":{"ne":[0, 0],"sw":[100, 100]}}

3. URL Encode the State Parameter

Use an online encoder to convert the JSON (the portion after “state=”). Reference tools like meyerweb.com’s encoder for this step.

Encoded result:

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

4. Replace Quote Encoding

Replace %22 characters with standard quotation marks ":

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

5. Assemble the Final URL

Combine everything:

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

Important Note

This method is not a documented feature and it can change anytime – regular verification of compatibility is recommended.