HOT goes Cartographic with TileMill

What good are maps if they are not beautiful? Last week, Jeff Haack and I taught the eight Indonesian trainers how to use Mapbox and its offline editor, TileMill. These tools will be taught in the upcoming Advanced training workshop so that the provincial government can understand how to create and put up maps on their websites.

Why is it necessary to teach the Indonesian government how to use a cartography tool? Well, the participants in our workshops have been working hard to collect building and road data and they would like to be able to share all of their work. The OpenstreetMap website does not display building details. In order to show all of the attribute information, such as the type of structure, number of levels, or number of students in a school, that they have collected about each critical building they must create personalized maps. Therefore, since Mapbox is such a large proponent of OpenStreetMap and they provide an opensource, offline editor, it seems logical to teach participants how to use their cartography tools.

The first step to teaching the BNBP how to use TileMill was to teach our trainers the ins and outs of the mapping program. Our trainers enjoyed learning how to add OSM data (shapefiles, PostGIS and SQLite files), how to write CartoCSS to customize their maps and how to compile HTML to create legends and pop-ups. They found that creating specific labels and sizes for each zoom level to be quite labor intensive, but enjoyed the challenge. To make sure that the trainers could understand TileMill, we held a mini competition. Here are the winners of our first annual TileMill practice competition:

1. University of Indonesia

Wulan created a map of her university, the University of Indonesia. She had a narrow focus and used a basic color scheme to show the facilities around her campus. Her pop-ups all included images of each building.

2. Bogor, Indonesia

Emir took advantage of OSM Bright and styled his home city of Bogor. He used a colorful color scheme to show the general overview of his city.

3. Bus Stations in Jakarta

Harry highlighted the 17 bus terminals in Jakarta. He differentiated between bus terminals that contained inner city buses and the ones that held buses that traveled to other cities. He practiced using different zoom details with CartoCSS.

Stay tuned next month for updated versions of their maps that will include the use of OSM databases (either PostGIS or SQLite) and OSM Templates. We will focus more on details and cartographic elements in order to make sexier maps.