How I made a silly looking
Bootstrap map
of the lower 48 states
by hand

The inspiration for this map came from an example of brilliant email marketing. There was a Disney email that went out with a giant image of Mr. Incredible (or maybe it was Wreck-It Ralph). Rendered in the background was a complicated HTML table that was shaped like the character. This made it so that the email made sense to the recipient even if they had images in their email disabled. I wish I could find the this, but I haven't been able to locate this mysterious message. This exampled evolved in my brain into the idea to make a map out of Bootstrap grids. I thought it would make an interesting constraint that would create an fun looking map.

The breakthrough moment came when I pulled up a simple image of the lower 48 united states and counted how many states across it was at the widest point. This is one of those shamefully simple spatial tidbits that you never really think about. I couldn’t do it mentally, so I had to Google image search “contininenatal USA”

1...2...3...4...5...6...7...8...9...10...11!
Cool! This will mostly work. (Sorry New England)

I started out in Sketch with an SVG from Wikipedia of the lower 48 states in an Albers projection. When I started looking at how I would delineate the states with horizontal rows I found the curved nature of the Albers projection to be too difficult. This was going to be a manual process so I didn’t want to have to create dozens and dozens of rows in HTML by hand.

Albers Equal-Area Conic Projection
My favorite projection, alas, led to too many rows

So I switched gears and grabbed an SVG in a Mercator projection. To create the grid I started placing horizontal lines wherever there was a horizontal or semi-horizontal state border that would need defined. This resulted in just 21 rows which seemed like a much more manageable task.

The Infamous Mercator Projection
*shudder*

The limiting factor in this exercise immediately became clear when I overlaid the 12 columns of a Bootstrap framework over top of the states. Smaller states were immediately ruled out, and many north-south borders were either going to be cut short or extended. For example the northern panhandle of Idaho is completely eliminated in favor of making Washington and Oregon two Bootstrap columns wide. Only New York and Maine make it onto the grid in New England.

Some areas are eliminated due to the column limitation
Sorry Idaho panhandle

I placed a row for every East-West border
21 in total

After delineating all of the rows, I started defining the states by coloring in the resulting grid. Surprisingly there weren’t a lot of tough calls on where the resulting states would end up.

Childish cartography
If only editing real GIS data was this simple

After the shapes were drawn in Sketch I started planning the HTML and CSS development. I knew that I had to have classes for each row with a min-height so the map would scale vertically. A future version might have a fixed row height based on @media query breakpoints.

Defining the CSS rows
Apparently the FL panhandle is nearly 16% of the USA's height

I measured the total height of my drawing and the heights of each row to calculate what the percent of the total height each row was and wrote that into the CSS classes.

I also had to define colors for each resulting pseudo-shape. I used the 4-color rule of cartography to pick numbers for each state shape. I defined four color classes in CSS and picked a set of colors from color.adobe.com.

Defining the CSS colors
Putting the 4-color theorem to the test

This completed the planning work and now it was time to write the HTML. Following along across each row in the Sketch file I defined the states by setting the number of Bootstrap columns for each state and it’s corresponding color class.

Defining the HTML rows
This was farily tedious