This post is a continuation of Creating Map Tiles (Part 1) - Exporting MapInfo TAB Files to ESRI SHP Files Using PowerShell and MapInfo, where I prepared my MapInfo boundary files for use in TileMill. In this post I focus on creating a boundary map in TileMill that can eventually produce tiles which will be overlaid onto a Bing Maps tile layer using the Bing Maps API. To keep it very simple, my map will only consist of state and county boundaries.
The first step in creating a transparent boundary set is to specify "png (24-bit)" as the Image Format and to uncheck the "Default data" checkbox when creating the new project (like MapInfo, in TileMill you have a project, or workspace, which will contain your layers).
When you open the project, you will notice that TileMill automatically created a stylesheet (style.mss) with a default Map style consisting of a solid blue background (unlike MapInfo which use the Layer Control, TileMill uses a CSS type stylesheet to control the appearance of the layers). The second step in creating a transparent boundary set is to remove or comment out (i.e. using comment blocks /* */) the Map selector.
The next step is to open the Layers List using the bottom button in the Editing tools (located at the bottom left of the map). Next, add a layer by clicking the Add Layers button. Add the bottom, or most detailed, layer first (counties, in my example). Browse for the ESRI Shape file and click "Save & Style" when done (entering a Carto ID and Class is optional). The layer will be added to the map with a default style.
The third step in creating a transparent boundary set is to comment out or remove the polygon-opacity and polygon-fill attributes of polygon layers. You can also change the line-color and line-width to your preference. At this point, you can add more polygon layers (I'm adding states) and perform the same edits to the attributes for each selector. My result looks like:
Right now the map is pretty cluttered with all of the county boundary lines. This brings up the other requirement for my transparent boundary set which was to have the more detailed layers only become visible as you zoom in. To accomplish that, we can apply a zoom selector which can specify at what zoom levels the layer is visible. For my simple state and county set, the stylesheet now looks like following:
Because this map will eventually overlay a Bing Maps road or satellite layer, I also want to make the boundaries stand out a little more. This can be done using additional styles and is basically taken straight from the TileMill manual. The "outline" CSS style pseudo class is used to identify the purpose of the style, but is not required. It is important to put this style setting before the existing, as it will be rendered first.
Additionally, the line-join and line-cap attributes were used to smooth out the ends of the line segments. The result looks like this (note that I'm zoomed in to 6 to show the county boundaries):
The final step in setting up the TileMill project is to create the settings that will be used when generating the tiles. You do this from the Project Settings panel, accessed using the wrench button in the main toolbar (i.e. the upper right of the application). By defining the Bounds (-179.7253,18.1928,-66.3464,71.4848), Center (-97.6355,40.6181,10) and the Zoom (0-12), you can significantly reduce the number of tiles that will be generated. Additionally, because of the transparent background, tiles will not be generated if there is no visible boundary. This results in a much smaller number of tiles than if there were a visible background to the map.
At this point I have created a simple transparent boundary set with a detailed (i.e. county) layer that becomes visible as one zooms in. The next blog post, Creating Map Tiles (Part 3) - Generating Tiles from a TileMill Project Using MBUtil and PowerShell, will present a PowerShell script that will generate the layers based on this TileMill project.
The first step in creating a transparent boundary set is to specify "png (24-bit)" as the Image Format and to uncheck the "Default data" checkbox when creating the new project (like MapInfo, in TileMill you have a project, or workspace, which will contain your layers).
When you open the project, you will notice that TileMill automatically created a stylesheet (style.mss) with a default Map style consisting of a solid blue background (unlike MapInfo which use the Layer Control, TileMill uses a CSS type stylesheet to control the appearance of the layers). The second step in creating a transparent boundary set is to remove or comment out (i.e. using comment blocks /* */) the Map selector.
The next step is to open the Layers List using the bottom button in the Editing tools (located at the bottom left of the map). Next, add a layer by clicking the Add Layers button. Add the bottom, or most detailed, layer first (counties, in my example). Browse for the ESRI Shape file and click "Save & Style" when done (entering a Carto ID and Class is optional). The layer will be added to the map with a default style.
The third step in creating a transparent boundary set is to comment out or remove the polygon-opacity and polygon-fill attributes of polygon layers. You can also change the line-color and line-width to your preference. At this point, you can add more polygon layers (I'm adding states) and perform the same edits to the attributes for each selector. My result looks like:
Right now the map is pretty cluttered with all of the county boundary lines. This brings up the other requirement for my transparent boundary set which was to have the more detailed layers only become visible as you zoom in. To accomplish that, we can apply a zoom selector which can specify at what zoom levels the layer is visible. For my simple state and county set, the stylesheet now looks like following:
#countyregion {
[zoom >= 6]
{
line-color:#00ffff;
line-width:1;
}
}
#stateregion {
line-color:#0000ff;
line-width:1;
}
Because this map will eventually overlay a Bing Maps road or satellite layer, I also want to make the boundaries stand out a little more. This can be done using additional styles and is basically taken straight from the TileMill manual. The "outline" CSS style pseudo class is used to identify the purpose of the style, but is not required. It is important to put this style setting before the existing, as it will be rendered first.
#countyregion::outline {
[zoom >= 6]
{
line-color:#00ffff;
line-width:7;
line-opacity:0.1;
line-join: round;
line-cap: round;
}
}
#countyregion {
[zoom >= 6]
{
line-color:#00ffff;
line-width:1;
}
}
#stateregion::outline {
line-color:#0000ff;
line-width:7;
line-opacity:0.1;
line-join: round;
line-cap: round;
}
#stateregion {
line-color:#0000ff;
line-width:1;
}
Additionally, the line-join and line-cap attributes were used to smooth out the ends of the line segments. The result looks like this (note that I'm zoomed in to 6 to show the county boundaries):
The final step in setting up the TileMill project is to create the settings that will be used when generating the tiles. You do this from the Project Settings panel, accessed using the wrench button in the main toolbar (i.e. the upper right of the application). By defining the Bounds (-179.7253,18.1928,-66.3464,71.4848), Center (-97.6355,40.6181,10) and the Zoom (0-12), you can significantly reduce the number of tiles that will be generated. Additionally, because of the transparent background, tiles will not be generated if there is no visible boundary. This results in a much smaller number of tiles than if there were a visible background to the map.
At this point I have created a simple transparent boundary set with a detailed (i.e. county) layer that becomes visible as one zooms in. The next blog post, Creating Map Tiles (Part 3) - Generating Tiles from a TileMill Project Using MBUtil and PowerShell, will present a PowerShell script that will generate the layers based on this TileMill project.
