You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -7,38 +7,194 @@ In this activity you'll be using CartoCSS and TileMill to make a choropleth map
7
7
###What you will need
8
8
-[TileMill](https://www.mapbox.com/tilemill/)
9
9
-[Mapbox account](https://www.mapbox.com/signup/) (the free plan will be sufficient)
10
-
- Census tract level data for Lucas County, OH on Hungarian ancestry. (If you cloned the os-webmap-workshop repo you can find i your local copy at **/data/prepared/lucasCo_hungarian_tracts.geojson**. Otherwise, you get it [here](https://raw.githubusercontent.com/maptastik/os-webmap-workshop/gh-pages/data/prepared/lucasCo_hungarian_tracts.geojson))
10
+
- Census tract level data for Lucas County, OH on Hungarian ancestry. (If you cloned the os-webmap-workshop repo you can find i your local copy at `/data/prepared/lucasCo_hungarian_tracts.geojson`. Otherwise, you get it [here](https://raw.githubusercontent.com/maptastik/os-webmap-workshop/gh-pages/data/prepared/lucasCo_hungarian_tracts.geojson))
11
11
12
12
###Let's make a map!
13
-
1. Open TileMill
14
-
2. You'll see the *Projects* window. Click **+ New Project**<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-projects1.png"width=50% />
15
-
3. You should see the *New project* window. Fill out the **Filename** field. Also uncheck **Default data**. We don't need the world layers that TileMill provides. Still, it's good to know they're there! If you want to fill in **Name** or **Description** fields you may, but it's not necessary. When you're finished, click **Add**.<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-projects2.png"width=50% />
16
-
4. In the *Projects* window, select the project you just made.
17
-
5. TileMill will open up your project. It has by default added a light blue background to your project. That's not a layer of data! It's just a style for the space you'll be putting your data into!<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map1.png"width=50% />
18
-
6. Go ahead and just delete the default CartoCSS:<br/>`Map {
13
+
14
+
####Getting started
15
+
16
+
Open TileMill
17
+
18
+
You'll see the *Projects* window. Click **+ New Project**<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-projects1.png"width=50% />
19
+
20
+
You should see the *New project* window. Fill out the `Filename` field. Also uncheck `Default data`. We don't need the world layers that TileMill provides.
In the *Projects* window, select the project you just made.
27
+
28
+
####Setting up your workspace
29
+
30
+
TileMill will open up your project. It has, by default, added a light blue background to your project. That's no layer of data! It's just a style for the space you'll be putting your data into.
In the right hand pane is a text area. There's a little tab denoting that this is `style.mss`. This is where we'll be adding CartoCSS to style our map.
35
+
36
+
Go ahead and just delete the default CartoCSS:
37
+
38
+
````
39
+
Map {
19
40
background-color: #b8dee6;
20
-
}`
21
-
7. You should see a gridded background. That means you have no actual background anymore. That's good! It will allow us to eventually add our map on top of other maps.
22
-
8. Let's add our data. In the bottom-left corner of your window you should see a vertical stack of four buttons. Each one opens up a lot of TileMill's functionality, but we're most concerned with getting our data into TileMill. As such, click the bottom-most button.<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map2.PNG"width=10%/>
23
-
9. This will open up a little *Layers* window. Since we haven't added anything to our project, there aren't any layers shown. Let's change that! Click **+ Add Layer** <br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map3.PNG"width=100% />
24
-
10. You should see the *Add Layer* window. Fill in the **ID** field with a short name for the layer. You can name it whatever you want, but it's helpful to name your layer something that describes what it is. (I opted for *tracts*). Select lucasCo_hungarian_tracts.geojson dataset wherever you have it saved. Leave everything else as it is and click **Save & Style**<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map4.PNG"width=100% />
25
-
11. Alright! You've loaded in your data. You'll see some default cartoCSS for our tracts layers has been loaded into the style.mss pane on the right. Also note that in the bottom-left in the *Layers* window, we now have our tracts layer listed. You may initially not be able to the actual map of our tracts. In the *Layers* window, to the right of #tracts is a magnifying glass icon. Click that and the view will zoom to our tracts<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map5.png"width=100% />
26
-
12. Let's take a look at the data? What are we going to map? In the *Layers* window, to the right of #tracts is a table icon. Click it and you should see the attribute table of the tracts data. We've got too attribute fields that were joined from ACS Census data. **t_hung** is total population in the tract claiming Hungarian ancestry. **p_hung** is the percentage of the population in the tract that claims Hungarian ancestry. Because we're making a choropleth map, it's best to use normalized data. We'll be working with the **p_hung** field for this map<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map6.png"width=100% />
27
-
13. In the stylesheet pane, we have our default styling for our tracts layer:<br /><br />`#tracts {
28
-
line-color:#594;
29
-
line-width:0.5;
30
-
polygon-opacity:1;
31
-
polygon-fill:#ae8;
32
-
}`<br /><br />These style description give the map it's current look, but there are many properties of the polygon's fill and outline that can be edited. You can access the built-in CartoCSS reference by click the curly-brace button on that vertical stack of buttons mentioned earlier. Additionally, Mapbox includes the [reference](https://github.com/mapbox/carto/blob/master/docs/latest.md) on their GitHub page along with [several examples](https://www.mapbox.com/tilemill/docs/crashcourse/styling/) in the TileMill documentation on their website.<imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-ref1.png"width=100% />
33
-
14. Let's change some properties. Change:<br /><br />`line-color:#594;` to `line-color:#000000;`<br />and<br />`polygon-fill:#ae8;` to `polygon-fill:#2980b9;`.<br /><br />Click **Save**. If all is correct, you should have a map of census tracts in Lucas County, OH with a blue fill and black borders.<br /><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map7.png"width=100% />
34
-
15. Not too shabby! Way better than clicking through tons of dialog boxes. But this is a pretty boring map. Let's map those Hungarians! With CartoCSS we can assign styles to features that meet certain criteria. This is called conditional formatting. In this case we're going to apply conditional formatting to the fill of the tracts based on our **p_hung** field values.<br /><br />We're going to need to classify our **p_hung** field to create our choropleth map. TileMill is not a GIS and will not automatically create classification schemes based on your data. You'll have to do that in QGIS, ArcGIS, or by some other means. For the sake of this activity, I've created a classification scheme you can use. You may, of course, create your own. My scheme:<br>Class 1: <1<br>Class 2: 1-3.9<br>Class 3: 4-6.9<br>Class 4: 7-9.9<br>Class 5: >=10
35
-
16. We're almost ready to apply this classification scheme to the map. But first, it would be good to get a color scheme. Rather than make one up, let's use [ColorBrewer2](http://colorbrewer2.org/). You have a lot of freedom here to pick your colors, but make sure that under the *Nature of your data* you select **sequential**. This will help ensure that you select a color scheme appropriate for the data. Also, make sure to switch from HEX to and RGB colorspace. TileMill can handle both, but it handles transparency better with RGB. My scheme:<br>Class 1: 255,255,204<br>Class 2: 194,230,153<br>Class 3: 120,198,121<br>Class 4: 49,163,84<br>Class 5: 0,104,55<br><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-cb1.png"width=100% />
36
-
17. Let's make this choropleth happen! Go ahead and just delete<br><br>`polygon-opacity:1;
37
-
polygon-fill:#2980b9;`<br><br>We don't need them as they are.
38
-
18. We can now apply our conditional formatting. Let's try it by just applying fill to those tracts with less than 1% of the population claiming Hungarian ancestry. Underneath `line-width: 0.5` add:<br><br>`[p_hung<1] {polygon-fill: rgb(255,255,204);}`<br><br>Click **Save**. If there are no syntax errors, you should see that only a few census tracts have been filled in. The rest are transparent because they have no polygon-fill value at the moment. We'll change that next.<br><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map8.png"width=100% />
39
-
19. Let's add the rest of our classes with the appropriate colors following the model from the last step:<br><br>`[p_hung>=1] {polygon-fill: rgb(194,230,153);}`<br>`[p_hung>=4] {polygon-fill: rgb(120,198,121);}`<br>`[p_hung>=7] {polygon-fill: rgb(49,163,84);}`<br>`[p_hung>=10] {polygon-fill: rgb(0,104,55);}`<br><br>Click **Save**. If all went as planned and there are no errors, you should see a choropleth map based on the classification scheme defined earlier.<br><imgsrc="https://maptastik.github.com/os-webmap-workshop/images/tm-map9.png"width=100% />
40
-
20. This is a pretty nice looking choropleth map, but there's no figure to ground relationship, no geographic context surrounding Lucas County. We could add additional state and county layers to create that context, but we can also place this choropleth map on top of a basemap. Although adding transparency to choropleth maps is a big no-no, in our enxt activity we'll be placing this map over a basemap well-suited for such a cartographic deviance.<br><br>To get that transparency in our polygon fill, we need to make a slight adjustment to our polygon-fill specifications. We can adjust transparency in RGB colors through the alpha channel, but at the moment our style doesn't address transparency. Our fill is fully opaque. To adjust that alpha channel is quite simple. Instead of `polygon-fill: rgb(...)` we need to use `polygon-fill: rgba(...)`. The **a** in rgba is our alpha channel and it allows us to add a fourth value in our color specification. We can select a number, 0 (totally transparent) - 1 (totally opaque), to adjust the opacity of the fill. Let's use 0.5. Your polygon fill formatting should look something like this:<br><br>`[p_hung<1] {polygon-fill: rgba(255,255,204,0.5);}
You should see a gridded background. That means you have no actual background anymore. That's good! It will allow us to eventually add our map on top of other maps.
46
+
47
+
####Adding data
48
+
49
+
In the bottom-left corner of your window you should see a vertical stack of four buttons. Each one opens up a lot of TileMill's functionality, but we're most concerned with getting some data into TileMill. As such, click the bottom-most button.
This will open up a little *Layers* window. Since we haven't added anything to our project, there aren't any layers shown. Let's change that! Click **+ Add Layer**
You should see the *Add Layer* window. Fill in the `ID` field with a short name for the layer. It can be whatever you want, but it's helpful to name your layer something that describes what it is. (I opted for `tracts`).
58
+
59
+
Select the `lucasCo_hungarian_tracts.geojson` dataset wherever you have it saved. Leave everything else as it is and click **Save & Style**
Alright! You've loaded in your data. You'll see some default cartoCSS for our tracts layers has been loaded into the style.mss pane on the right. Also note that in the bottom-left in the *Layers* window, we now have our tracts layer listed. You may initially not be able to the actual map of our tracts. In the *Layers* window, to the right of #tracts is a magnifying glass icon. Click that and the view will zoom to our tracts.
Let's take a look at the data. What are we going to map? In the *Layers* window, to the right of `#tracts` is a table icon. Click it and you should see the attribute table of the tracts data. We've got two attribute fields that were joined from ACS Census data.
70
+
71
+
-`t_hung` is total population in the tract claiming Hungarian ancestry.
72
+
73
+
-`p_hung` is the percentage of the population in the tract that claims Hungarian ancestry.
74
+
75
+
####Some simple styling
76
+
77
+
Because we're making a choropleth map, it's best to use normalized data. We'll be working with the `p_hung` field for this map.
In the stylesheet pane, we have our default styling for our tracts layer:
82
+
83
+
`#tracts {`
84
+
<br> `line-color:#594;`
85
+
<br> `line-width:0.5;`
86
+
<br> `polygon-opacity:1;`
87
+
<br> `polygon-fill:#ae8;`
88
+
<br>`}`
89
+
90
+
These style description give the map it's current look, but there are many properties of the polygon's fill and outline that can be edited. You can access the built-in CartoCSS reference by click the curly-brace (`{}`) button on that vertical stack of buttons mentioned earlier. Additionally, Mapbox includes the [reference](https://github.com/mapbox/carto/blob/master/docs/latest.md) on their GitHub page and [several examples](https://www.mapbox.com/tilemill/docs/crashcourse/styling/) in the TileMill documentation on their website.
Not too shabby! Way better than clicking through tons of dialog boxes. But this is a pretty boring map. Let's map those Hungarians!
107
+
108
+
####Styling based on data
109
+
With CartoCSS we can assign styles to features that meet certain criteria. This is called *conditional formatting*. In this case we're going to apply conditional formatting to the fill of the tracts based on the `p_hung` field values.
110
+
111
+
We're going to need to classify our `p_hung` field to create our choropleth map. TileMill is not a GIS and thus does not generate classification schemes based on your data. You'll have to do that in QGIS, ArcGIS, or by some other means. For the sake of this activity, I've created a classification scheme you can use.
112
+
#######Classification Scheme
113
+
114
+
`Class 1: <1`
115
+
<br>
116
+
`Class 2: 1-3.9`
117
+
<br>
118
+
`Class 3: 4-6.9`
119
+
<br>
120
+
`Class 4: 7-9.9`
121
+
<br>
122
+
`Class 5: >=10`
123
+
124
+
You may, of course, create your own.
125
+
126
+
We're almost ready to apply this classification scheme to the map. But first, it would be good to get a color scheme. Rather than make one up, let's use [ColorBrewer2](http://colorbrewer2.org/). You have a lot of freedom here to pick your colors, but make sure that under the **Nature of your data** you select `sequential`. This will help ensure that you select a color scheme appropriate for the data.
127
+
128
+
Also, make sure to switch from HEX to and RGB colorspace. TileMill can handle both, but it handles transparency better with RGB.
Let's make this choropleth happen! Go ahead and just delete:
145
+
146
+
`polygon-opacity:1;`
147
+
<br>
148
+
`polygon-fill:#2980b9;`
149
+
150
+
We don't need them as they are.
151
+
152
+
We can now apply our conditional formatting. Let's try it by just applying fill to those tracts with less than 1% of the population claiming Hungarian ancestry. Underneath `line-width: 0.5` add:
153
+
154
+
`[p_hung<1] {polygon-fill: rgb(255,255,204);}`
155
+
156
+
Click **Save**.
157
+
158
+
If there are no syntax errors, you should see that only a few census tracts have been filled in. The rest are hollow because they have no polygon-fill value at the moment. We'll change that next.
This is a pretty nice looking choropleth map, but there's no figure to ground relationship or geographic context surrounding Lucas County. We could add additional state and county layers to create that context, but we can also place this choropleth map on top of a basemap. Although adding transparency to choropleth maps is a big no-no, in our next activity we'll be placing this map over a basemap well-suited for such a cartographic deviance.
181
+
182
+
To get that transparency in our polygon fill, we need to make a slight adjustment to our polygon-fill specifications. We can adjust transparency in RGB colors through the alpha channel, but at the moment our style doesn't address transparency. Our fill is totally opaque. To adjust that alpha channel is quite simple. Instead of `polygon-fill: rgb(...)` we need to use `polygon-fill: rgba(...)`.
183
+
184
+
The **a** in rgba is our alpha channel and it allows us to add a fourth value in our color specification. We can select a number, 0 (totally transparent) - 1 (totally opaque), to adjust the opacity of the fill. Let's use 0.5.
185
+
186
+
Your polygon fill formatting should look something like this:
0 commit comments