CMS Interactive SVG Map

A map of the United States built with SVG paths within a CMS collection list, and referenced to a "State Types" collection where the background and border colors are defined. Each state shape is define by a path within a consistent outer SVG and the tooltips can be populated with any fields from either CMS list. Watch this Loom for a walk through of how its all setup.

Type 1
Puerto Rico

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Puerto Rico

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Wyoming

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Wyoming

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 4
Wisconsin

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Wisconsin

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 1
Vermont

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Vermont

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 3
West Virginia

Facere quia error c

Type 3
West Virginia

Facere quia error c

Type 2
Washington

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Washington

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Virginia

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Virginia

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 4
Utah

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Utah

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 3
Texas

Facere quia error c

Type 3
Texas

Facere quia error c

Type 2
Tennessee

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Tennessee

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 1
South Dakota

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
South Dakota

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 4
South Carolina

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
South Carolina

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 1
Rhode Island

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Rhode Island

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Pennsylvania

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Pennsylvania

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 4
Oregon

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Oregon

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 3
Oklahoma

Facere quia error c

Type 3
Oklahoma

Facere quia error c

Type 1
Ohio

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Ohio

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 3
North Dakota

Facere quia error c

Type 3
North Dakota

Facere quia error c

Type 1
New Jersey

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
New Jersey

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 2
North Carolina

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
North Carolina

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 4
New York

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
New York

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 2
New Mexico

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
New Mexico

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Massachusetts

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Massachusetts

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 3
Nevada

Facere quia error c

Type 3
Nevada

Facere quia error c

Type 4
New Hampshire

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
New Hampshire

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 2
Nebraska

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Nebraska

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 1
Montana

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Montana

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 4
Missouri

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Missouri

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 1
Mississippi

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Mississippi

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 3
Michigan

Facere quia error c

Type 3
Michigan

Facere quia error c

Type 2
Minnesota

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Minnesota

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 1
Maryland

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Maryland

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 3
Maine

Facere quia error c

Type 3
Maine

Facere quia error c

Type 4
Louisiana

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Louisiana

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 1
Kentucky

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Kentucky

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 2
Kansas

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Kansas

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 1
Iowa

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Iowa

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 3
Indiana

Facere quia error c

Type 3
Indiana

Facere quia error c

Type 1
California

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
California

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Illinois

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Illinois

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Hawaii

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
Hawaii

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 4
Idaho

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Idaho

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 3
Georgia

Facere quia error c

Type 3
Georgia

Facere quia error c

Type 2
Florida

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Florida

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 1
District of Columbia

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 1
District of Columbia

Et officia nobis animi dicta. Itaque et enim. Aliquam harum quod laborum eos

Type 3
Delaware

Facere quia error c

Type 3
Delaware

Facere quia error c

Type 4
Connecticut

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Connecticut

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 3
Colorado

Facere quia error c

Type 3
Colorado

Facere quia error c

Type 2
Alabama

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Alabama

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 3
Alaska

Facere quia error c

Type 3
Alaska

Facere quia error c

Type 4
Arizona

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 4
Arizona

Asperiores ut soluta deserunt dolor iure vel aliquid fuga. Autem amet voluptatibus dolore

Type 2
Arkansas

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni

Type 2
Arkansas

Ducimus ipsam eum sit ut praesentium fugit pariatur odit. Rerum nihil qui ni