Lab 4-Styling the map in TileMill
TileMill relies on the CartoCSS explored in an earlier module as a means for styling map
elements. In this module we’ll explore some of the key elements that can be edited in TileMill to
make visually appealing maps.
We’ll be using the USGS’s API for real-time earthquake data:
http://earthquake.usgs.gov/earthquakes/feed/v1.0
Create a free account on https://www.mapbox.com/
By clicking “sign up”
You’ll need this account for the part of the lab at the end. Try to use your name for the account
name.
1. Review the Crash Course on how to use MapBox (go through this tutorial):
http://mapbox.com/tilemill/docs/crashcourse/introduction/
Be aware that plugins can add extra functionality. The Tilemill manual is available at
http://mapbox.com/tilemill/docs/manual
familiarize yourself with the project view window
layers menu
In this exercise we’ll walk through an expanded version of TileMill’s “Advanced map design”
tutorial. This will explore the some of the following elements of map design in TileMill:
● shape color
● line color
● line thickness
● line glow
● opacity
● marker color
● marker size
● marker size (graduated symbols)
● labels
● zoom settings (labels inside circles)
● texturing
● coastal effects
● zoom level labeling
● Creating a legend (HTML style)
● Creating a teaser
Open TileMill, start a new project by clicking on the “new project” button. Call it something like
“CartoCSS_Styling” and accept the default options.
When you open up the new project, you’re presented with a pretty basic map. Check out the
MSS. It should look something like this:
Map{...} is simply your background. It’s not a technically a layer, but you can use CartoCSS to
change some elements of Map{...}. The default layer that is included in each new TileMill project
is #countries. Depending on your project, you might not need to use this layer, but it can be
helpful for getting started.
Let’s take a look at the CartoCSS that we have here
You can copy the code in the box below and paste it into your MSS pane.
Map {
background-color: #b8dee6; /* Sets the map background to a light blue color */
}
#countries {
::outline { /* Creates a pseudo-element that tells TileMill to draw the outline of the
countries before filling them. Note that “outline” is simply a placeholder, not a method.
It could be called “purplemonkeydishwater” and still work the same */
line-color: #85c5d3; /* colors the outlines of the countries */
line-width: 2; /* sets the width of the country outlines */
line-join: round; /* sets appearance where line segments join together */
}
polygon-fill: #fff; /* Sets the map background to white*/
}
1. That CartoCSS as rendered gives you the map before you:
2. Let’s start by working with fill of the background and countries. There are lots of
possibilities, but we’re going to use a black-on-black scheme.
a. Currently the background color for the map is #b8dee6. We want something
more along the lines of gray. Replace the current hex-code for the background
color with #222222
b. We want something darker for the land area on #countries. Currently, the
polygon-fill element for #countries is white, #fff. Replace that with #131313.
c. Save your changes by clicking on the save button.
d.
Your map should look something like this:
3. The map looks OK, but the country outlines are a bit distracting. If we change line width
and fill, it might look better
a. Inside “::outline”, change “line-color” from #85c5d3 to #494949
b. Inside “::outline”, change “line-width” from 2 to 1
c. Your map should look like this:
4. The figure-ground relationship here is a little odd. Lets add a glow effect to the outline of
#countries to highlight the current country borders and create a bit more distinction
between land and water. The glow will rely on the line-opacity element to add some
transparency to the glow. We want the glow to follow the same path as the country
outline, but really only those places that are along coast lines. To do this, we need to use
a pseudo-element so that the glow effect is drawn first and the fill for the country
polygons are drawn after that. Further, we don’t really need the country outline that
we’ve used so far to be in a pseudo-element. It’s OK if it gets drawn last so we’ll get rid
of that ::outline pseudo-element.
a. In your ::outline pseudo-element, copy and paste the ALL line elements (linecolor, line-width, and line-join) and their properties and paste that block
underneath the polygon-fill element.
b. Rename the ::outline pseudo-element “::outlineglow”. We’ll be putting the
properties in for our glow feature. It’s not necessary to change the name of the
pseudo-element, but it might be a helpful reminder as to what is going on in that
section of code.
c. Now to add the glow feature. Give ::outlineglow the following elements and
properties:
line-color: #494949;
line-width: 8; /* thicker line so that regular outline is surrounded by glow*/
line-opacity: 0.20; /*closer to 0 means more transparent, key to creating a glow
effect*/
line-join: round;
5. The result should look like this. Very nice!:
6. Our basemap is looking pretty good, but all we really have is a basemap. Let’s add some
point features so we can learn about changing element properties for markers. Add a
layer (by clicking on the layers icon “add layer” button )
7.
called “#earthquake” using the source
“http://earthquake.usgs.gov/earthquakes/feed/csv/2.5/week “. Make sure to click “Save &
Style” once you’re ready to move on. By default you’ll get something like this:
Please note: yours will look different as this is using the USGS API for the most recent
2.5 weeks of earthquake data (my 2.5 weeks were in summer 2013)
8. The default marker styling is OK, but perhaps we could improve them. Perhaps we could
make the markers look a bit like an earthquake emanating out from its center.
Something like a ring with a hollow center. We’ve already got the circular shape, but
need to change some element properties to get the desired effect. Let’s try to get the
hollow ring first. The key here is to hollow out the center of the marker. How might we do
that? Changing the marker opacity might be a good way to hollow out that center. We’ll
change a few other element properties like marker-line-color and marker-line-width while
we’re at it:
a.
#earthquake {
marker-fill-opacity:0;
marker-line-width:4;
marker-line-color:#f32f0d;
marker-allow-overlap:true;
}
b. Your map should look like this. Not great, but on its way!:
9. This could use some more styling in terms of opacity and color, but before we address
that, perhaps we should consider that earthquakes occur at different magnitudes. TileMill
allows you to size markers based on an attribute in its data table. As such, we need to
decide what attribute we’ll be using. Open up the data table for #earthquake:
a.
b.
10. “Magnitude” seems like a good attribute to use to size our markers. Before we try to
apply this sizing scheme to our #earthquake layer, it’s important to discuss how this
would work in CartoCSS. What we want to do can be thought of as conditional styling.
You’ll be telling TileMill that given a certain condition within your data, style the elements
as indicated. What does this look like?
a. [attribute RELATIONAL OPERATOR condition] {element:property;...element:property}
use relational operators such as: >, <, >=, <=, =
Example: [Magnitude >= 5] {marker-fill: #e52d00;}
1. How would [Magnitude >= 5] {marker-fill: #e52d00;} translate into plain
English?
2. What is the largest and smallest magnitude earthquake in your dataset?
11. 2.5 is my minimum magnitude and 6.1 is my max. Create classes of symbol sizes based
on the variation in magnitude in your dataset. If we increment by 0.5, that will give us 8
classes. We’ll use the >= operator to tell TileMill to give each symbol the appropriate
style. Finally, we’ll change the marker-width element to vary the symbol size across
classes. Make sure your data is divided evenly into 8 data classes.
a.
#earthquake {
marker-fill-opacity:0;
marker-line-width:4;
marker-line-color:#f32f0d;
marker-allow-overlap:true;
[Magnitude >= 2.5] { marker-width:3; }
[Magnitude >= 3] { marker-width:5; }
[Magnitude >= 3.5] { marker-width:8; }
[Magnitude >= 4] { marker-width:12; }
[Magnitude >= 4.5] { marker-width:18; }
[Magnitude >= 5] { marker-width:28; }
[Magnitude >= 5.5] { marker-width:30; }
[Magnitude >= 6] { marker-width:44;}
}
b. Map:
12. Our map is really starting to come together! However, the earthquake symbols could
capture the ephemerality of the event the represent better. Perhaps we should add some
opacity to the marker outline. How might we accomplish this?
a. I’ve set marker-line-opacity to 0.15. This has the effect of highlighting clusters,
but makes individual, spatially isolated events a bit more difficult to see. Play
around with the various marker-line properties to make the earthquake elements
pleasing to you and legible for potential map readers.
b. Example map:
13. We’ve sized our earthquake symbols based on magnitude. TileMill also allows you to
label symbols based on some attribute in the data table. Often times your label will be a
name or numeric value of some sort, but really as long as there is an attribute in your
data table, it could potentially be used for a label. Since we’ve already altered the
symbol size based on earthquake magnitude, perhaps it would be interesting to use a
different attribute for the label. There is an attribute called MagType that could be used
as a label. That way users who know about how earthquake data are collected could see
how the magnitude value was derived. To add the MagType label to our markers, let’s
create a pseudo-element called ::labels. This way we can control where the labels
comes up in the drawing order. We want them drawn last so we’re going to place the
CartoCSS for the labels under our list of proportional symbol properties. We’ll also
specify things like font, font size, font color, and overlap here:
a.
#earthquake {
marker-fill-opacity:0;
marker-line-width:4;
marker-line-color:#f32f0d;
marker-line-opacity:0.15;
marker-allow-overlap:true;
[Magnitude >= 2.5] { marker-width:3; }
[Magnitude >= 3] { marker-width:5; }
[Magnitude >= 3.5] { marker-width:8; }
[Magnitude >= 4] { marker-width:12; }
[Magnitude >= 4.5] { marker-width:18; }
[Magnitude >= 5] { marker-width:28; }
[Magnitude >= 5.5] { marker-width:30; }
[Magnitude >= 6] { marker-width:44;}
::labels {
text-name: "[MagType]";
text-face-name: "Georgia Regular";
text-allow-overlap: true;
text-fill: #d7d4d4;
text-size: 8px;
}
}
b. Result:
14. At a low zoom level having all those labels on the map doesn’t look so great. Luckily
TileMill allows us to specify a zoom level or range of zoom levels at which to display the
labels. This function extends beyond labels and includes layers as whole and properties
of elements within layers. In our map it seems that at about ZOOM 6 the cluttering starts
to clear up a bit. Let’s make our map so that the labels for the earthquakes don’t appear
until ZOOM 6. This process is similar to what we did for sizing the earthquake symbols.
We’ll tell TileMill when zoom is greater than or equal to 6 to start rendering our ::labels
pseudo-element.
a.
#earthquake {
marker-fill-opacity:0;
marker-line-width:4;
marker-line-color:#f32f0d;
marker-line-opacity:0.15;
marker-allow-overlap:true;
[Magnitude >= 2.5] { marker-width:3; }
[Magnitude >= 3] { marker-width:5; }
[Magnitude >= 3.5] { marker-width:8; }
[Magnitude >= 4] { marker-width:12; }
[Magnitude >= 4.5] { marker-width:18; }
[Magnitude >= 5] { marker-width:28; }
[Magnitude >= 5.5] { marker-width:30; }
[Magnitude >= 6] { marker-width:44;}
[zoom>=6]{
::labels {
text-name: "[MagType]";
text-face-name: "Georgia Regular";
text-allow-overlap: true;
text-fill: #d7d4d4;
text-size: 8px;
}
}
}
b. Map at ZOOM 5:
c. Map at ZOOM 6:
15. Our earthquake symbols are really something now, but maybe we could add a little
accent to them so that they both pop and capture the ephemerality of earthquakes.
Perhaps it would look nice to have a thin gray outline of the earthquake marker peaking
from below our semi-transparent donut symbol. How can we write the CartoCSS so that
TileMill draws both our current symbol with its properties and the new thin outline below?
Think about drawing order in CartoCSS...Here we can use a pseudo-element to make
sure that two versions of the marker outline are drawn for each symbol. Let’s call our
pseudo-element ::outlineOL (for outline of the outline!) and specify some element
properties:
a.
#earthquake {
::outlineOL {
marker-line-color: #494948;
marker-line-width: 1;
marker-line-opacity: 0.75;
marker-fill-opacity: 0;
marker-allow-overlap: true;
}...
b. Result:
16. Uh oh! ::outlineOL doesn’t match up with our other symbols for the earthquake. Why
not?...We need ::outlineOL to also have the same sizing scheme that we used earlier.
Luckily all you need to do is copy and paste it from where you used it previously!
a. (here is my previous one… but yours should be different)
#earthquake {
::outlineOL {
marker-line-color: #494948;
marker-line-width: 1;
marker-line-opacity: 0.75;
marker-fill-opacity: 0;
marker-allow-overlap: true;
[Magnitude >= 2.5] { marker-width:3; }
[Magnitude >= 3] { marker-width:5; }
[Magnitude >= 3.5] { marker-width:8; }
[Magnitude >= 4] { marker-width:12; }
[Magnitude >= 4.5] { marker-width:18; }
[Magnitude >= 5] { marker-width:28; }
[Magnitude >= 5.5] { marker-width:30; }
[Magnitude >= 6] { marker-width:44;}
}...
b.
c. Q3: How are pseudo-elements useful for more advanced map styling in TileMill?
17. Subtle, but a nice improvement. We’re done styling #earthquake, but feel free to play
around more with sizing, opacity, and color of the symbols.
18. Let’s add some final details to our map using TileMill’s Templates window. You can
access this by selecting the little pointing hand button on the Editing Tools toolbar.
a.
19. We’re going to add two details to our map. First we’ll add a legend so whoever is viewing
the map has some idea of what they’re looking at. Second, we’ll add a teaser so that the
viewer can get some information about each individual earthquake on the map.
a.
20. The legend can be made using plain text or with HTML. Plain text is fine for a very
simple legend, but HTML opens up a lot more styling possibilities. Additionally, you can
make a legend outside TileMill using something like Photoshop, Adobe Illustrator or
GIMP. We’ll use a little bit of HTML here.
a. Type:
<strong>Magnitude 2.5+ Earthquakes (Past 7 Days)</strong><br/>
<li>Larger circles represent larger magnitude earthquakes</li>
<li>Marker labels indicate how magnitude was determined</li>
b. Save
c.
21. Now let’s add a teaser. A teaser is a little pop-up window that gives the viewer some
information about the feature they’re hovering over. Let’s make one for #earthquake. In
the Templates window click the “Teaser” button along the top. Navigate to the pull-down
menu labeled “-- disabled --” and select “earthquake”.
a.
22. Activate earthquake
(by changing ‘disabled’ to earthquake)
23. You’ll see the gray area at the bottom of the window filled with the names of the
attributes in the data table for #earthquake surrounded on each side by 3 curly brackets
- {{{attribute}}}. You can use these as place holders to construct sentences! You can also
throw some HTML in for adding some style to your teaser.
a. Create a little teaser that tells the viewer the magnitude and date of the
earthquake they’re hovering over.
b. Ex. {{{Magnitude}}} Magnitude Earthquake<br/>{{{DateTime}}}
c.
24. Final Challenge: Give some texture to your oceans by adding the a bathymetry layer
from the NaturalEarth files included with TileMill.
Click “add layer” off of the layer icon
Click “Browse” (to the right of datasource)
Click on “MapBox”
Click on “physical”
Click on 10m-bathymetry.zip
Click “done”
Click “Save & Style”
25. Think about drawing order to determine where the layer should go in your Layers pane
and MSS.
a. It’s good to note here simply adding the bathymetry layer will default to placing it
as the top layer. This will, of course, cover all earthquakes in the ocean and the
outline grow we created for our countries layer.
b. We’ll need to move the bathymetry to the bottom in our layers pane (Drag it to
the bottom). It might also be a good idea to move it to the top of the MSS as well.
Go ahead and style the bathymetry drawing influence from your Map{...} feature.
To get the texture of the bathymetry, make sure to use the line-color element.
#10mbathymetry {
line-color:#0c0c0c;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#222222;
}
c. Result:
Do you have any other changes you’d like to make to make the map prettier? Could you figure
out how to make the markers slightly opaque red circles with smaller grey circles inside?
Now you need to save this and embed it on your website.
To do that click on Export:
Click “upload”
Log into your account if necessary
Reduce the zoom on your map to 1 MB+. If you don’t need to see the entire world at once you
can increase your minimum zoom from 0. Do not have your maximum zoom less than six or the
labels will never be visible. You can not leave the default number of zoom levels as the file size
will be too large to upload.
When you are ready, click upload.
This will take a little while and you’ll see a notification in your window
When this finishes click “view”
Once you have successfully uploaded your tilemill map to your mapbox account, you need
to embed your map on your webpage.
In the map that opened when you clicked view click on the icon that looks like :
(in the lower left corner of your screen)
this window opens:
copy the HTML embed code
In Dreamweaver (or whatever editor you are using to create your webpage for your final
portfolio), create a new HTML5 page for your Lab 4 file (if necessary--if you have one
already created, use that).
Paste this frame in in the appropriate place
Modify the Lab 4 page as you would for your final portfolio. Write a description as to how
you created this map.
As you did when creating your portfolio, save this page (I saved mine as lab4.html)
Double check to make sure it all worked by opening it up in firefox from the local drive:
Notice that your map is dynamically placed in the frame from your HTML file.
Drop this file into your public_html folder.
Make sure it works on the web—By visiting users.humboldt.edu/___alias___/lab4.html (if yours
was called lab4.html. For example, mine is now stored at
http://users.humboldt.edu/mstephens/lab4.html
Submit this as a link to the moodle dropbox. There is no file to upload. This must be a dynamic
link to the lab 4 section of your webpage portfolio.
On moodle, select your text, and click on the link button:
then paste in your url again
Click “Insert”
Then “save changes”