TileMill

Mapping Atlas: An Introduction to Digital Cartography’s Application for Data and Literary Analysis

Arian Katsimbras
14 min readApr 8, 2014

I fear (I fear much and this list could be long, and would likely end with maiming by fire or too-small hands) that the ever-widening gap between the humanities and the sciences will represent a hollow in the conversation for how we —scholars, journalists, academics, writers, archivists, carnies, muckpieces, electric Kool-Aid acid testers — approach the burgeoning digital humanities software and requisite research platforms that allow us to revision and renegotiate our place within the humanities and the humanities’ place in the world. TileMill, a digital cartographic software platform, is designed to afford users the opportunity to create attractive, malleable, data-driven maps and to render new perspectives for how we envision and engage with the actual and imaginative (read: literary fiction) landscapes. It is with digital cartography platforms such as TileMill, Mapbox, Python (amongst others), and with open-source content management systems such as Drupal (which is the mahine behind the ever-growing Digital Yoknapatawpha Project)and earlier, HTML driven platforms (Sound and the Fury: A HyperText Edition), that digital humanists can create maps that effectively challenge our engagement with spatial, temporal, and conceptual knowledge in texts as well as in factual history.

As introduced above, I am interested in TileMill as it affords users varied opportunities to create engaging landscapes that can at once represent real geography, data, statistics, etc., as well as reinterprets literary and fictional landscapes in an innovative fashion. As a writer and a student of literature, I am fascinated by the burgeoning ability to render both literary and actual cartography in a mode that operates spatially and imgainatively. This new rendering of data and location, as well as the inclusion of imaginative landscapes, imbues digital cartography with the possibility of marrying together historical geography with literary analysis in ways that produces new knowledge and understanding of fictional texts. This new knowledge inspires reinterpretation of the literary corpora of character relationships within texts, intertextuality, the relationship between fictional landscapes and events with factual history, the construction of new fictional spaces that provide architecture to imagination, and a new narrative that challenges how we understand cartographic analysis, literary analysis, and the new interdependent relationship of the two.

With traditional geohistorical maps we find that the text itself often annihilates the subject and renders the space devoid of life (whether actual or fictional). Often, traditional cartographic methods, when used in conjunction with literature, can only offer a one-dimensional, and therefore inherently handicapped method of analysis. Outside of the subject being made invisible, traditional cartography can provide only scaled information geographically, as well as historically, and its platform necessitates secondary source material to be used in conjunction with the map information in order to produce quantitative analysis about the literature, history, or data it is meant to be in conversation with.

At its most basic utility (that which this tutorial demonstrates below this introduction), a novice TileMill cartographer could theoretically research and record population expansion in major American cities between the years 1950 and 2000 using data derived from the US Census Bureau, and with this data, create a map that tracks and represents the data visually. This new representation of archival data, and the ability to move through a map challenges the new functionality of cartographic representation and how we receive information. If one were to push beyond the basic functions briefly outlined here, a more developed map could be created using the US Census Bureau information, and by including information of inflation rates, real estate fluctuations, drought records, public school expansion, crime rates, etc., to produce interpretation, correlation, and analysis as to how or why population increased or decreased in a given area.

At its more complex, and perhaps more animated utility, TileMill can be used to explore the intersecting relationships between fictional/imagined landscapes, fictional characters and their proximity to one another, the temporality of fiction (the progression or change in time), and intertextuality. For example: American poet, Campbell McGrath’s book of poems, American Noise (Ecco, 1994), is an erratic dreadnought that blazes across the American landscape and ostensibly explores the speaker’s relationship with the shifting cultural and physical landscape. If a digital cartographer wanted to attempt to map the speaker’s physical movement across America, they could gather geospatial shapefiles , the location information where the speaker travels (population data, historical data, latitude and longitude, etc.), and combine that movement with text/poems that directly reference the speaker’s relationships with that geography.

This combination of textual cues with new visual representation affords both the users and audience with the ability to apply a new analysis to data and literature that has traditionally eluded the humanities at large and literary scholarship in particular. This is to say that this form of animation creates new intersections between imagined and actual landscapes that previously could not be rendered specifically in print maps. We aren’t in Kansas anymore, Toto. (There could even be a landscape marker for Kansas with requisite textual evaluation in a Wizard of Oz digital map! How Dorothy’s life would’ve been made easier with TileMill will be the focus of my next tutorial).

Conversely, TileMill affords its user the opportunity to construct spaces where the subject can live multi-dimensionally (not like an Einstein-Rosen bridge, but more like when Nintendo shook up the world by going 64-bit) and provide readers to engage with material in a way that is spatially and temporarily alterable and therefore alive. This visual representation of imaginary and geohistorical landscapes creates new perspectives that simply cannot be represented via traditional cartographic methods, and while the tutorial that follows can only offer a rudimentary construction of a map using TileMill, it should present a wealth of opportunity for those who read through this tutorial to render data, imagined spaces, and analysis of virtually any subject or history you find engaging. This digital interface quickens us to move the conceptual and statistical into the actual in order to enhance our understanding of both geohistorical and imagined spaces (Who Framed Roger Rabbit?).

Enough of being talkie. For this tutorial, I will explore the fundamental elements of TileMill in a way that will allow you to get a rudimentary map developed and presentable. The tutorial will explore where you can find downloadable data files (we will only be using shapefiles to create our map), how to start a new project, how to upload shapefiles, how to layer shapefiles in a way that is congruous with the information you are rendering conceptually and visually, and how to style the shapefiles in a way that is visually meaningful.

To be more specific, I will be creating a visual representation of the various fires that occurred in Nevada between 1910 and 2013, and demonstrate where these fires occurred both within Bureau of Land Management lands and private land (specifically recently held private and public land). This will require me to shape the state boundaries, the county boundaries within Nevada, the geospatial rendering of the fires and designate the differences between BLM districts (mostly public land) and privately held land. If I had the time to render a more detailed map in order to apply analysis and negotiate correlatives, I would be able to use the Nevada BLM geospatial data in conjunction with US Census Bureau information to explore the relationships between the fires and statewide drought, urbanization, population expansion, wildlife grazing areas or migration patterns, protected wilderness areas, wildlife refuges, cattle grazing allotments, and how the fires have effected habitats, changed migratory pattern, or how wildlife populations have been adversely effected by ecological disaster. If I wished to push this analysis further, I would attempt to render how state legislation regarding the sale of BLM held land to contractors and developers in previously rural areas may have impacted the aforementioned events (all of this, I am afraid, would take a much longer tutorial). This list is certainly not exhaustive, but I hope that it can demonstrate how a digital humanist could draw on the exchanges and relationships of seemingly disparate events ways that promotes new knowledge visually, conceptually, and analytically.

Here. We. Go.

Preliminary stuffs: it will be important for you to locate and download your pertinent shapefiles. For this tutorial I culled all of my files from the U.S. Department of the Interior: Nevada Bureau of Land Management geospatial data site and downloaded the pertinent files. A shapefile will contain multiple compressed files that will render the geospatial coding into animate form. I have also downloaded a generic state boundary file, but you can simply download the state boarder with the BLM site if need be.

Firstly, and most obviously, go to the TileMill website and download the software version that is compatible with your computer. I have a Macbook, so I will be using the version compatible with Mac OS X.

This should be the page you see when you open up the TileMill page. Choose your poison. Ubuntu sounds exotic.

After you have downloaded and installed TileMill to your computer, open up the application and you will see a shiny new TileMill project front page that should look something like this:

It’s everything you imagined it to be. Remember in Inception where dreamscape architects build interactive landscapes? This is nothing like that.

The project page will offer four default model maps (all more sophisticated than anything I can build without the argot of coders): “Control Room,” “Geography Class,” “Open Streets,” and “Road Trip.” These default projects helped me familiarize myself with the capabilities of the interface before embarking on my own project. After you’ve moved through the projects and have become overwhelmed with the possibilities of TileMill, click on the “New Project” tab in the top left-hand corner.

Opening the new project tab will open another window that will ask you to name the project file. It will also ask you to name the project (not the file), and provide a description. Offering a description of the project can help you recall the project’s parameters and aims if you happen to be working in similar, multiple projects, and if you export the map to Mapbox, this can provide a detailed context for the readers of your project’s aims.

After you open your newly dubbed project, a wintery page with country and continent borders will open up. This is the default map structure that you have to work from and layer within.

Climate change is assuredly not a farce. It looks like a cold world out there.

As you can see, the page is segregated into two distinct sections: the visual component (this half will become animated once imbued with language), and the CSS coding half. The right-hand portion will be where you will see your uploaded Shapefile codes in the “Layer” section. Now, click and drag the map and zoom in until you have a decent perspective of the west coast. Done it? Here comes the magic. In the bottom left-hand corner of the above screenshot, you’ll see what appear to be tiny levitating tissues and click on the icon. Your window will open up the layering tool. You will see that there is a “#countries” preset.

Make sure that you ID your files appropriately to make for easier identification later. We all want unique names.

Click on “Add a layer” and upload the generic state boundaries shapefile (tip: it’s much, MUCH easier to locate these files if you have saved them as favorited files. So, you should do that). In the ID section, make sure that you label the Carto CSS file name, as it is the identifying label that will be designated in the Carto CSS language style.mss window. After you label the requisite information, click “Save & Style” and watch the green magic happen!

It is possibly for a user to click and drag the ID names in layer window. Playing musical chairs with these layers and saving them after altering them will change the way that they are layered both in the map window as well as with the Carto CSS language. It’s a simple way to manipulate the layers.

As you can see, the geospatial data has been rendered both in Carto CSS and in the animation window. In the screenshot above, there is some new information: in the layer tool panel, you will see that our “#state_boundaries” file is viewable: in the CartoCSS language window you will see that the file has been rendered with its attendant line-color, line-width, polygon-opacity, and polygon-fill (lines 13-19), and at the bottom of the page, you will see new green squares. These colors represent the line-color, and polygon-fill. The line-colors and the fill-colors can be altered either by clicking on those tiny squares or by altering the CartoCSS language in-line.

The Kermit green is wildly unappealing, so we are going to play around with our color palette a little. I found it easier to simply get into the tiny squares rather than alter the colors via the CSS window. When you change the palette color, the code will change in the CSS window to reflect the change. For the line-fill and polygon-fill for the state color and state border color, I am simply going to mimic the country color codes above (line-color: #85c5d3; polygon-fill: #fff). This is what this dramatic change will look like:

For our Winter lookbook, we will be modeling cool hues with mute tones contrasted against sharp lines.

Let’s layer some information now. For this next layer, and for all the attendant layers that follow, I will be using shapefiles culled from the Nevada Bureau of Land Management geospatial data site. This second layer will layer in the Nevada county boundaries. Click “Add Layer” and follow the steps outlined above for adding a layer. If you are following these exact instructions, you will see the map change from the froggish green color to the ice-white state color with blue state boundary lines. The change in color is nothing more than an aesthetic choice, though depending on how you layer your geospatial files, altering the default colors in the CSS coding window will distinguish map markers.

Next, follow the layering instructions outlined above, and upload the county boundary lines. When you update the county boundary lines, your Nevada filler will default to green again. Use the instructions above to change the filler color and line color (line-color: #85c5d3; polygon-fill: #fff). You will see the county lines will look like:

Notice the tiny lines in Nevada. And to think that most of the population resides within just two of those county boundaries.

You can of course change the line width in the CSScode window to make the boundaries more distinguishable from the rest of the state boundaries around it.

From here we will define BLM managed land, privately held lands, and the fires between 1910-1999 and 2000-2013. Follow the layering instructions above as I will be uploading the BLM land information and the privately held land as well as I will be altering the line width and altering the opacity to ensure a more visually distinguishable boundary line. This of course is crucial to identifying the layers and the information that is presented therein. Below you will see where I uploaded the BLM managed land and have distinguished between BLM district lines and county lines.

When you upload this new layer, it be situated under the county lines layer. Go ahead and toggle the county lines layer visibility tool to the off position and click “Save” to ensure that your BLM lines are present. When you have done this, change all of the opacity to “0" (“zero”) to expose the lines below the county lines layer. After you have done this, go to the Adobe Kuler site to copy and paste a color palette.

I’ve chosen this color palette to the right to copy and paste and use as my color for the BLM boundary lines.

Copy and paste the HEX code at the bottom right into the color-line section of the CartoCSS code and decrease or increase the boundary lines to be distinguishable from the other lines (dependent on what information you want to present more of). Your newly styled map will appear as this:

Here you can see the blue, bold line which indicate county lines, and the light blue lines behind them which indicate the BLM boundary lines. You can change the color of the lines either in the CartoCSS code, or in the tiny ice boxes below the style window. Make it fancy. Put it in satin and make it dance. Follow these steps in order to upload the privately held land and to style it.

Here, I had to manipulate the file layers a little, as well as the opacity and color. As I said before, the default color will always appear green. So, you can either use HEX code from Kuler, or you can alter the code in the style window. For this step, I again decreased the opacity to zero, and changed the polygon-fill as well as the line-color. As this was the most recent layer applied to the map, it effectively covered the entirety of the visual element of the map. Decrease the opacity and change the color, and after this you will need to click and drag the “Land Ownership” layer below the other layers. You should see above that instead of the new layer being at the top, I dragged it below the other layers. This will render the land ownership section below the county and BLM boundary lines to make the map more readable/interpretable.

For the final two layers of the map, I will be uploading the two different Nevada fire geospatial files downloaded from the NBLM site. Here you will see that I’ve uploaded and layered both fire files, changed the opacity and color of them to compliment the information (and, let’s face it, style) of the rest of the map. If you look in the CartoCSS window, you will see that I also included very basic notes to myself to indicate, if I were to pursue the analysis and causality a little further, where I would effectively construct a tool or legend to reflect the relationships between the geospatial data. These notes serve as crucial reminders of the construction of spaces and how those spaces have been rendered in the map.

Here is a closer look at the detailed rendering of the final (and basic) map that represents the county Nevada county lines, the BLM district land parameters, privately held land, and the fires that occurred between 1910-1999 and 2000-2013.

If you feel you are done rendering data and visual markers, you can now export your map to MapBox.

Hopefully this has effectively demonstrated how new space and new understanding about that space can be rendered through TileMill. I know that this tutorial offers only the most basic demonstration of how to construct a map using this software. My hopes are that with this tutorial you can follow my most basic cues and build upon them in a fashion that is conducive to your own passions or research. In a future project, I will include textual cues in a way that supports the conceptual discussion of how we can apply this rendering of imagined spaces into the framework of actual space. With this burgeoning of digital cartography in the digital humanities, we should view the possibilities of this software as being limitless in that it can be used in conjunction with literature to demonstrate the intersections of the actual and the imagination. These intersections are important to understand how our lives move between the two and how we occupy the space rather than being made invisible by them. We are at once the space, data, and the imagination and it is with TileMill that these relationships can be made into a singularity.

--

--

Arian Katsimbras

Biggie Smalls, Sazerac, Mickey Rourke’s plastic surgeon.