# Visualize administrative regions by defined zoom levels

<div align="left"><figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2F8iAlvj1s2Th85m6IvcG5%2Fbeginner%20banner.png?alt=media&#x26;token=10e8f40a-3632-4920-87c3-6b0dca2a6775" alt="Beginner difficulty banner" width="175"><figcaption></figcaption></figure></div>

## **Context**

In this tutorial, we're going to build a dynamic map dashboard that reveals the administrative layers of the United States, ranging from state-level down to zip codes. Ever curious about how to display different administrative regions at specific zoom levels? We're about to delve into that. Our journey will start by setting up a map in Builder that responds to zoom, transitioning smoothly from states to counties, and finally to zip codes, allowing users to access detailed statistics pertinent to each administrative area.

Using CARTO Builder, we'll craft a dashboard that not only informs but also engages users in exploring their regions of interest. Whether it's understanding demographic trends or pinpointing service locations, this guide will equip you with the knowledge to create an interactive map dashboard tailored to varying levels of administrative detail. Ready to unlock new levels of geographical insights? Let's dive in!

## **Steps To Reproduce**

1. Access the *Maps* section from your CARTO Workspace using the Navigation menu and create a new Map using the button at the top right of the page. This will open the Builder in a new tab.

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FD3exH4k0arzS5IU55u0t%2Fimage.png?alt=media&#x26;token=6f7cd04a-7800-4517-9a63-bd0516205b31" alt=""><figcaption></figcaption></figure>

2. Now let's add USA States source to our Builder map. To add a source as a SQL query, follow the steps below:
   * Select the A*dd source from* button at the bottom left on the page.&#x20;
   * Select *Custom Query (SQL)* and then Type your own query under the CARTO Data Warehouse connection.
   * Click on the *Add Source button*.

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FjPaB83ZGDXdsAYUjPMM7%2Fimage.png?alt=media&#x26;token=8ead0bbb-257d-41f6-aa88-ef95db08a216" alt=""><figcaption></figcaption></figure>

The SQL Editor panel will be opened.&#x20;

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FwqMLrSPeYdpyPkB79dQi%2Fimage.png?alt=media&#x26;token=c4d480b2-0064-47a1-99b8-c04663be5a4e" alt=""><figcaption></figcaption></figure>

To add USA States, run the query below:&#x20;

```sql
SELECT * FROM carto-demo-data.demo_tables.usa_states_boundaries
```

3. A map layer is automatically added from your SQL Query source. Rename it to 'USA States'.

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2F5hC4YBksNew76QrDFOsB%2Fimage.png?alt=media&#x26;token=2aee286e-0937-4331-8293-328020a6416e" alt=""><figcaption></figcaption></figure>

Now let's add the remaining sources following *Step 2* to add USA Counties, USA Zip Codes and USA Census Tracks.&#x20;

4. Add USA Counties as a SQL query source using the below query. Once the layer is added, rename it to 'USA Counties'.

```sql
SELECT * FROM carto-demo-data.demo_tables.usa_counties
```

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FrFbtOeMWCigB1zwmrFgQ%2Fimage.png?alt=media&#x26;token=5aed6958-684b-4003-8148-8e6f1cd98d2d" alt=""><figcaption></figcaption></figure>

5. Add USA Zip Codes as a SQL query source using the below query. Once the layer is added, rename it to 'USA Zip Codes'.

```sql
SELECT * FROM carto-demo-data.demo_tables.usa_zip_codes
```

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2F8xhYSWUOpyPCkrZPQEX7%2Fimage.png?alt=media&#x26;token=dd61769f-7ad3-4aac-8cfa-f73d2232fd1c" alt=""><figcaption></figcaption></figure>

6. Finally, let's add USA Census Tracks as a SQL query source using the below query. Once the layer is added, rename it to 'USA Census Tracts'.

```sql
SELECT * FROM carto-demo-data.demo_tables.usa_census_tracts
```

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FAJV0ouFSk3jmACWC74tI%2Fimage.png?alt=media&#x26;token=3c254519-dec6-4a49-9fea-aca756de6cfd" alt=""><figcaption></figcaption></figure>

7. Next in our tutorial, after adding the administrative layers of the USA to our map, we'll **set specific zoom level ranges for each layer**. This step will optimize our map's clarity and usability, allowing users to see States, Counties, Zip Codes, and Census Tracts at the most appropriate zoom levels. Set the zoom level visibility in the Layer panel as follows:&#x20;
   * **USA States**: `0 - 3`
   * **USA Counties**: `4 - 8`
   * **USA Zip Codes**: `9 - 11`
   * **USA Census Tracts**: `12 - 21`

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2F4gBaFHo439Lf0G9L3dwT%2Ftutorial2_1.gif?alt=media&#x26;token=7faf682b-9ac1-439f-8a91-cf7ed8947898" alt=""><figcaption></figcaption></figure>

With the zoom level visualization configured for each layer, our next step is to customize the dashboard for enhanced user insights. Our focus will be on understanding the population distribution across each administrative region of the USA.

8. To achieve this, we will style our layers – USA States, Counties, Zip Codes, and Census Tracts – based on the 'Total\_Pop' variable. This approach ensures users can easily grasp the spatial population distribution as they navigate and zoom in on the map. Let's set up the **Fill Color** for all four layers to effectively represent population data as follows:
   * Color based on: `Total_Pop`
   * Palette Steps: `4`
   * Palette Name: `ColorBrewer BuGn 4`
   * Data Classification Method: `Quantile`

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FwAp50RIrrTc07wUGM3wg%2FTutorial2_2.gif?alt=media&#x26;token=833e2fcf-4a39-4ac9-91a3-ba66336368b7" alt=""><figcaption></figcaption></figure>

9. Now let's set the **Stroke Color** to Hex Code `#344c3a` for all four layers.

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2Ff20JrnxQS4RtX3Zv9Y4P%2Ftutorial2_3.gif?alt=media&#x26;token=011e2269-05c4-4e4e-8b29-044dff70b93c" alt=""><figcaption></figcaption></figure>

10. Set the map title to 'USA Population Distribution'.

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FwnMENKOm74iOUYk1BCgc%2Fimage.png?alt=media&#x26;token=3e038acc-900d-4072-b336-d3b0e0817582" alt=""><figcaption></figcaption></figure>

11. Now, let's add some Widgets to provide users with insights form the data. First, let's add a **Formula Widget** linked to *USA Census Tracts* source with the following configuration:
    * Operation method: `SUM`&#x20;
    * Variable: `Total_Pop`&#x20;
    * Formatting: `12.3k`&#x20;
    * Markdown note: *`Total population (2014) by Viewport for Census Tracts layer`*

You can check how the widget is updated as you move to the map. You can also make use of our Feature Selection Tool to select a custom area to gather the population that intersects with that specific area.&#x20;

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2F85k3L61Eo215sbqfenyA%2Ftutorial2_4.gif?alt=media&#x26;token=81cbf9cd-3aa4-4a26-9424-070df51a9883" alt=""><figcaption></figcaption></figure>

12. We will add a second **Formula Widget** linked to *USA Census Tracts* source with the following configuration, to display the unemployment rate:
    * Operation method: `AVG`&#x20;
    * Variable: `Unemp_rate`&#x20;
    * Formatting: `12.35%`&#x20;
    * Markdown note: *`Unemployment rate (2014) by Viewport for Census Tracts layer`*

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FRmJtjWbhUkJfZCKBdy7H%2Fimage.png?alt=media&#x26;token=d36d2d81-4de4-4d68-8c44-db7f7d559ba6" alt=""><figcaption></figcaption></figure>

13. The last widget we will add to our dashboard will be a **Category widget** linked to *USA States* layer. It will be a **global widget**, displaying the total population by state to provide users with stats but it won't interact with the viewport extent and the cross-filtering capability will be disabled. To configure this widget, follow the below steps:
    * Operation method: `SUM`&#x20;
    * Source variable: `name`&#x20;
    * Aggregation column: `Total_Pop`&#x20;
    * Markdown note: *`Total population by state (2014) for States layer. Please note this widget does not interact with the viewport extent and cannot be filtered.`*
    * Behaviour mode: `Global`
    * Cross-filtering: `Disabled`

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FCO4YaKUWy4xpuN8TQ47p%2Ftutorial2_5.gif?alt=media&#x26;token=159c7411-4939-41af-b78a-6f347c94a247" alt=""><figcaption></figcaption></figure>

14. Enable **Interactions** for the relevant layers. To do so, activate Interaction feature for each layer and add the desired attributions. On this occasion, we will select interaction **Click** mode using **Light** type and add just the relevant information with the renamed label. Repeat this process for the rest of the layers.

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FqxEWV5F5zfzEAOp94H5j%2Fimage.png?alt=media&#x26;token=4c22218b-dc44-4aff-996c-4e02e9e57cb6" alt=""><figcaption></figcaption></figure>

15. In the **Legend** tab, under 'More legend options', set the legend to `open when loading the map`.&#x20;

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FJ81mHLrB8f36dupaefcz%2Fimage.png?alt=media&#x26;token=0a435c50-a5d5-4c9f-87b6-63f3be7dba6f" alt=""><figcaption></figcaption></figure>

16. Before publishing our map, let's add a **map description** so users can have more information about it while reviewing the map for the first time.&#x20;

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FzH8gTIOJqPOd612LmtBc%2Ftutorial2_7.gif?alt=media&#x26;token=1b10b31a-aa63-4929-baac-d1587144b0ec" alt=""><figcaption></figcaption></figure>

```markdown
### Exploring USA's Administrative Layers

![Image: Global Populated Places](https://app-gallery.cartocdn.com/builder/usa_adminregions.jpg)

This interactive dashboard in Builder offers a journey through the administrative divisions of the United States, from states to census tracts. The map dynamically adjusts its focus as you zoom in, revealing finer details such as employment, population, etc. at each level.

___

#### Key Features of the Dashboard

- **Zoom-Dependent Visibility**: Each administrative layer is configured to appear within specific zoom ranges, ensuring a clear and informative view at every scale.

- **Insightful Widgets**: The dashboard includes formula widgets for total population and unemployment rates, linked to census tracts. A category widget, linked to the state layer, offers a broader overview of population by state, independent of the map's viewport.

- **Interactions**: Engage with the map through interactive layers, allowing you to click on regions for detailed information.
```

17. We can **make the map public** and share it online with our colleagues. For more details, see [Publishing and sharing maps](https://docs.carto.com/carto-user-manual/maps/publishing-and-sharing-maps).

<figure><img src="https://3015558743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFEElAdsRIl9DzfMhbRlB%2Fuploads%2FPpRiKTimI5rtRHgy5rIF%2Fimage.png?alt=media&#x26;token=527b77e2-32ed-42c5-b99c-bf7017c9085e" alt=""><figcaption></figcaption></figure>

18. The final map should look something similar to the below:

{% embed url="<https://clausa.app.carto.com/map/a3978aff-0da4-4f14-ac11-a2e74692300f>" %}
