In my last blog post, we created a population density map of New Zealand using QGIS, SQLite and TileMill. Today, we’re going to publish this map to the web using various MapBox inventions. I'll also show you how to publish an interactive TileMill map on your own web server using some PHP and JavaScript wizardry.
I love MapBox. The team behind this platform has created a series of new specifications, allowing us to create fast, good looking and interactive maps. The downside is the limited support for other map projections than Web Mercator.
TileMill allows you to add legends and tooltips to your maps. I’ve added a legend to my population density map with a HTML snippet describing the map and the color scale.
The tooltip shows when the user hovers over or clicks on the map. It allows us to show dynamic content - additional data, images, charts - for each map feature. I want to show the name, total population, area and population density for each feature:
The data fields for the layer are wrapped in curly Mustache tags. These tags will be replaced by data when you interact with the map. You can use the full Mustache template language.
The easy way to publish this map is to upload it to MapBox Hosting, and use the embed code provided. If you want to publish your map on your own web server, this is an alternative route:
To export an interactive map from TileMill, you need to use the MBTiles format. This is an innovative SQLite-based format specification capable of storing millions of map tiles in a single file. The format is also supported by various 3rd-party applications, and I'm sure we'll see a greater adoption in the future.
Within the MBTiles file, the map legend, the tooltip template and information about map extent, zoom levels etc. is stored in a format named TileJSON. This is also an open specification, providing a consistent way of describing a map, making it easier to load and display a map the way it’s meant to be seen. The TileJSON for my map looks like this:
If you add interactivity to your map (tooltips), your MBTiles file will also include the most impressing part of the MapBox specifications: UTFgrids. This JSON-format allows us to add thousands of interactive points or polygons through interactivity data grids, and it will even work in older browsers with limited support for vector data.
So how do we turn our MBTiles file into an interactive map? Previously, I've used MBUtil to extract the contents from MBTiles into a directory structure. But by doing this, we loose the benefits of the MBTiles format, like storing a map in a single file and dealing with redundant images. What we need is a script on our web server that will extract content from our MBTiles file on demand. I decided to try a PHP script from infostreams (this is probably not the most scaleable solution). The script supports the full MBTiles specification, including TileJSON and UTFGrids. Installation is simple: just put the .php file and the .htaccess file in the same directory as your .mbtiles files. The .htaccess file includes a rule that rewrites requested URLs on the fly, so the map data is available un URLs like:
I've also done some extra JavaScript coding to allow switching between various interactive map layers. I'll save that for a later blog post.
The Leaflet map looks like this (there seems to be an issue with the latest Wax distribution and Google Chrome):
Fullscreen map
I love MapBox. The team behind this platform has created a series of new specifications, allowing us to create fast, good looking and interactive maps. The downside is the limited support for other map projections than Web Mercator.
TileMill allows you to add legends and tooltips to your maps. I’ve added a legend to my population density map with a HTML snippet describing the map and the color scale.
The tooltip shows when the user hovers over or clicks on the map. It allows us to show dynamic content - additional data, images, charts - for each map feature. I want to show the name, total population, area and population density for each feature:
The data fields for the layer are wrapped in curly Mustache tags. These tags will be replaced by data when you interact with the map. You can use the full Mustache template language.
The easy way to publish this map is to upload it to MapBox Hosting, and use the embed code provided. If you want to publish your map on your own web server, this is an alternative route:
To export an interactive map from TileMill, you need to use the MBTiles format. This is an innovative SQLite-based format specification capable of storing millions of map tiles in a single file. The format is also supported by various 3rd-party applications, and I'm sure we'll see a greater adoption in the future.
Within the MBTiles file, the map legend, the tooltip template and information about map extent, zoom levels etc. is stored in a format named TileJSON. This is also an open specification, providing a consistent way of describing a map, making it easier to load and display a map the way it’s meant to be seen. The TileJSON for my map looks like this:
If you add interactivity to your map (tooltips), your MBTiles file will also include the most impressing part of the MapBox specifications: UTFgrids. This JSON-format allows us to add thousands of interactive points or polygons through interactivity data grids, and it will even work in older browsers with limited support for vector data.
So how do we turn our MBTiles file into an interactive map? Previously, I've used MBUtil to extract the contents from MBTiles into a directory structure. But by doing this, we loose the benefits of the MBTiles format, like storing a map in a single file and dealing with redundant images. What we need is a script on our web server that will extract content from our MBTiles file on demand. I decided to try a PHP script from infostreams (this is probably not the most scaleable solution). The script supports the full MBTiles specification, including TileJSON and UTFGrids. Installation is simple: just put the .php file and the .htaccess file in the same directory as your .mbtiles files. The .htaccess file includes a rule that rewrites requested URLs on the fly, so the map data is available un URLs like:
- TileJSON: http://earthatlas.info/nz/tiles/nz-popden.tilejson
- Map tile: http://earthatlas.info/nz/tiles/nz-popden/9/504/320.png
- UTFGrid: http://earthatlas.info/nz/tiles/nz-popden/9/504/320.json
I've also done some extra JavaScript coding to allow switching between various interactive map layers. I'll save that for a later blog post.
The Leaflet map looks like this (there seems to be an issue with the latest Wax distribution and Google Chrome):
Fullscreen map
Comments
It's probably this bug: https://github.com/mapbox/wax/issues/242
If you use the latest Wax distribution, it should solve the issue.
Bjørn
Thank you for sharing. I have a question for you regarding the legend. If you would like to move your legend to the top left corner of your map, how would you do this?
I am new to MapBox and can't find any comments on this topic, so your answer would very appreciated.
Dorothy
In the same folder:
- tileserver.php
- .mbtiles
- index.html (with the script you've written and the sources for leaflet)
I've downloaded Wax, but this folder is full of stuff, so I don't know what to use.
In the script you've written, you're calling for a 'wax.tilejson('URL', function)....etc. I don't know what URL to put there and where is the tilejson file that I need to get from the .php script you told about?
Hope you can help me, I would really appreciate it!
Thanks in advance, Fons.
Fons: Yes, it's the URL to your PHP script. TileJSON is part of your mbtiles file, and the PHP script will return it.
http://mandala2006.info/testleaf.html
My tilejson is here http://mandala2006.info/mbtiles/ph-comp.tilejson
and my code is like this
var url = 'mbtiles/ph-comp.tilejson'
wax.tilejson(url,
function(tilejson) {
var map = new L.Map('map-div')
.addLayer(new wax.leaf.connector(tilejson))
.setView(new L.LatLng(11, 123), 8);
// Add map interaction (tooltips)
wax.leaf.interaction()
.map(map)
.tilejson(tilejson)
.on(wax.tooltip().animate(true).parent(map._container).events());
});
What am i doing wrong?
awesome work !
do you know how I can do the exact same thing (switch or remove legend when baselayer is on/off), but with the overlay layers instead.
I've tried moving your "population" tilelayer from the base layers to the overlay layers, the "population" legend appears when the layer is checked, but does not disapear when the layer is unchecked...
Thanks again for all these tutorials, very helpful for beginers!