Color USA regions from data

Build a state-based data map without needing a marker for every state.

Set up the source

1. Create USA Service Areas from geo-calibrated/usa.svg.
2. Open its Regions Collection in Database.
3. Keep each SVG ID, such as US-CA, unchanged.
4. Add the field that will control appearance. Use a choice field for categories or a numeric field for a measurement.
5. Enter a few known values and make sure the Page’s Regions Query returns the field.

For a categorical example, use a field with values Active and Planned. For a numeric example, use a field such as coverage and record its intended units.

Configure Data rules

Open Region → Settings → Data rules and choose Regions as the source.

For a choice field, select Values, load available choices, and assign colors. Keep the enabled/active color at #1274b7; use a deliberate lighter or neutral color for the alternate state. Leave Disable unchecked unless those regions should stop responding.

For a measurement, select Gradient, choose low/high colors, and verify the range. Automatic bounds differ for choice options versus numeric records. Use explicit bounds when several maps must be visually comparable.

Handle exceptions

Decide how missing values, unmatched values, and filtered-out regions should appear. If using linked Objects instead of Region values, also define No linked objects and Multiple values.

Enable a legend with a meaningful title and units. A color gradient without units can be visually clear but still misleading.

Content and validation

Enable a Region tooltip or popover that shows the title and controlling value. Inspect a minimum, maximum, zero, and missing value. Confirm hover/selection still makes enabled regions distinguishable.

Keep borders white. Check that the Regions Query returns all intended SVG regions rather than only a small paginated subset.

Publish the App after testing. Remember that later edits to shared records can change displayed colors without creating a new App publication.