US Interactive Map

Perfect for businesses, directories, real estate platforms, and service-based websites that need to direct users to state-specific content with a single click. Whether you're building a state-by-state directory, showcasing regional services, or creating a location finder — this component delivers a polished, professional experience with zero coding required.

Key Features

Flexible Link Modes

• CMS Mode — Connect to your Framer CMS collection and auto-generate URLs from state slugs (e.g., `/states/california`)

• Manual Mode — Set individual URLs for each state directly in the property panel — perfect for linking to external sites or custom pages

Mobile-Ready Dropdown

Automatically switches to a clean dropdown selector on mobile devices Fully customizable breakpoint (default: 768px) Three dropdown styles: *Outlined**, Filled, or Minimal Custom placeholder text, colors, fonts, and border radius

Fully Customizable Styling

Default, hover, active, and disabled state colors Adjustable stroke color and width Smooth hover animations with customizable duration and easing Disabled states appear grayed out when no link is set (Manual Mode)

Smart State Labels

Toggle labels on/off Customize font, size, weight, and colors Per-state label position overrides via JSON for perfect placement Leader lines for small states (DE, CT, RI, etc.)

Accessibility

Built-In Keyboard navigation support ARIA labels and roles Focus states for screen readers Semantic SVG structure

Lightweight & Fast

• Pure SVG — no external dependencies

• Optimized rendering for smooth interactions

• Works seamlessly in Framer's visual editor

Perfect For

Service area directories— "Find a location near you"

Real estate platforms— Browse properties by state

Business directories— State-by-state listings

Compliance & legal sites— State-specific regulations

Healthcare networks— Find providers by region

Education portals — Campus or program locators

Data visualization — Regional statistics display

E-commerce — Shipping zones or store locators --- ##

Property Controls

Link Mode: CMS Collection or Manual LinksCMS Settings: Base Path, URL TemplateManual Links: Individual URL input for all 50 states + DCStyling: Fill, Hover, Active, Disabled colors; StrokeAnimation: Hover duration and easingLabels: Show/hide, font, colors, position overridesMobile: Enable dropdown, breakpoint, style, colorsActive State: Set via slug (great for CMS page binding)