Visualize administrative regions by defined zoom levels
Last updated
Was this helpful?
Last updated
Was this helpful?
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!
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.
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 Add source from button at the bottom left on the page.
Select Custom Query (SQL) and then Type your own query under the CARTO Data Warehouse connection.
Click on the Add Source button.
The SQL Editor panel will be opened.
To add USA States, run the query below:
A map layer is automatically added from your SQL Query source. Rename it to 'USA States'.
Now let's add the remaining sources following Step 2 to add USA Counties, USA Zip Codes and USA Census Tracks.
Add USA Counties as a SQL query source using the below query. Once the layer is added, rename it to 'USA Counties'.
Add USA Zip Codes as a SQL query source using the below query. Once the layer is added, rename it to 'USA Zip Codes'.
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'.
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:
USA States: 0 - 3
USA Counties: 4 - 8
USA Zip Codes: 9 - 11
USA Census Tracts: 12 - 21
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.
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
Now let's set the Stroke Color to Hex Code #344c3a for all four layers.
Set the map title to 'USA Population Distribution'.
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
Variable: Total_Pop
Formatting: 12.3k
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.
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
Variable: Unemp_rate
Formatting: 12.35%
Markdown note: Unemployment rate (2014) by Viewport for Census Tracts layer
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
Source variable: name
Aggregation column: Total_Pop
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
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.
In the Legend tab, under 'More legend options', set the legend to open when loading the map.
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.
The final map should look something similar to the below:
We can make the map public and share it online with our colleagues. For more details, see .
