My setup for the population density map of New Zealand made it easy to create new choropleth maps with New Zealand census data. This blog post explains how you can use Leaflet to switch between multiple interactive layers created with TileMill.
I wanted to create a map of the social geography of New Zealand, using the Index of Deprivation from the Department of Public Health, University of Otago. I downloaded a Excel sheet containing data for the 2006 census area units, which I also used for my population density map. I simply added the data to the same SQLite database, and created the map using the same techniques described in two previous blog posts (1, 2).
The Index of Deprivation is constructed from nine Census 2006 variables, and provides a summary deprivation score from 1 to 10. A score of 1 is allocated to the least deprived 10 percent of areas, and 10 is allocated to the most deprived 10 percent of areas. You'll find more information about the index in the Atlas of Socioeconomic Deprivation in New Zealand.
Wax allows you to easily add an interactive TileMill map to Leaflet or other mapping libraries. Adding more than one interactive layer is not that straightforward, so I wrote a Leaflet plugin:
This plugin allows you to switch between various layers (interactive or not) and it will automatically load and display map legends, and remove the elements when they're no longer needed. It's easy to use the plugin:
Include a wax property when you create a tile layer, containing a TileJSON object or an URL to a TileJSON file.
var population = L.tileLayer('tiles/nz-popden/{z}/{x}/{y}.png', {
attribution: 'Statistics New Zealand',
wax: 'tiles/nz-popden.tilejson'
});
After you've created the map you simply add:
L.wax(map);
That's it! :-)
You can try to switch between the various basemaps using the layers control below:
Fullscreen map
I wanted to create a map of the social geography of New Zealand, using the Index of Deprivation from the Department of Public Health, University of Otago. I downloaded a Excel sheet containing data for the 2006 census area units, which I also used for my population density map. I simply added the data to the same SQLite database, and created the map using the same techniques described in two previous blog posts (1, 2).
The Index of Deprivation is constructed from nine Census 2006 variables, and provides a summary deprivation score from 1 to 10. A score of 1 is allocated to the least deprived 10 percent of areas, and 10 is allocated to the most deprived 10 percent of areas. You'll find more information about the index in the Atlas of Socioeconomic Deprivation in New Zealand.
Wax allows you to easily add an interactive TileMill map to Leaflet or other mapping libraries. Adding more than one interactive layer is not that straightforward, so I wrote a Leaflet plugin:
This plugin allows you to switch between various layers (interactive or not) and it will automatically load and display map legends, and remove the elements when they're no longer needed. It's easy to use the plugin:
Include a wax property when you create a tile layer, containing a TileJSON object or an URL to a TileJSON file.
var population = L.tileLayer('tiles/nz-popden/{z}/{x}/{y}.png', {
attribution: 'Statistics New Zealand',
wax: 'tiles/nz-popden.tilejson'
});
After you've created the map you simply add:
L.wax(map);
That's it! :-)
You can try to switch between the various basemaps using the layers control below:
Fullscreen map
Comments
This is very cool stuff. I am struggling to get the functionality to work. Would you mind sharing the .html and script.js that you used to integrate Wax and Leaflet for this cool web map. Thanks!
Thanks a lot for explaining lots of stuff about using MapBox (TileMill) tricks and techniques. I am quite new in both mapping and web-designing, despite leaned quite good staff by reading your blogs and repeating myself. I am greatly thankful to you for that.
Bjørn Sandvik, I have few "stand-alone" maps with their specific legends and tooltips prepared by TileMill and placed in MapBox. They are all somehow interrelated. I read your this blog but couldn't completely figured out how I can "join" all together and place in one interactive map and show on my website. Could you please explain a bit in detail about leaflet, modifying it, placing and editing. You can say it "interactive multilayer map" for dummies :)
I would be quite thankful for that.
I wish you the very best in doing what you love, and helping others.
Baha
Bakyt: Please try MapBox support.
I've been looking at your post and find your implementation very interesting.
Am trying to replicate the functionality using offline tiles generated using tilemill. The json files produced by tilemill however are surrounded by a function 'grid();' helnce are throwing an error "grid is not defined"
Any pointers?
Thanks!