Leaflet Map with UTFGrid and PHP Served Mbtiles

Final Demo: Largest Cities on Leaflet Map

It has been fun visualizing all kinds of data with D3, Raphael, OpenLayers, MapBox, PolyMaps, and ModestMaps, but now I really want to dig into Leaflet and UTFGrid. UTFGrid is a concept created by MapBox to improve the performance of map interaction across browsers when you are dealing with large amounts of vector data. In more detail, UTFGrid rasterizes polygons and points in JSON as a grid of text characters to enable fast lookups. It is as amazing and simple as it sounds and Leaflet has a UTFGrid plugin among its many great plugins.

Today I will show a basic example of Leaflet, demonstrate how to use MapBox maps in Leaflet, create a map out of city data in TileMill with UTFGrid, serve those map image tiles with PHP from my own server, and put it all together to create a demo of a fast dynamic Leaflet map with top 1,000 cities by population.

Basic Example of Leaflet

Lets start with a simple demo of Leaflet. I used a CloudMate tile layer and in 2 lines you have an awesome slippy map. You can load all kinds of map image tiles that you want, like OpenStreetMap, Stamen, or even your own MapBox map. I have signed up for a free account at MapBox and created a simple terrain map in a few minutes, dropped the tile location into my leaflet code, and here is a demo of a Leaflet Map with custom MapBox tiles. This only required a tile path change but here are some instructions on further integration between Leaflet and MapBox.

Leaflet with UTFGrid Plugin and Data on Countries

Around this time, I started reading about UTFGrid and wanted to see how it works with a simple example. I added the UTFGrid Leaflet plugin, found a countries UTFGrid layer from MapBox, and then added some simple JavaScript code to trigger events on map interaction. Take a look at the demo of Leaflet with UTFGrid. Now, what about other data and creating these custom UTFGrids?

I decided it would neat to visualize cities around the world where markers would change in size according to population. There is a free world cities database on MaxMind and it has everything I need: city name, latitude, longitude, and population. You can glance at this data over here but the unzipped file was 151.1MB. It is in CSV format and I did not want to include all cities, but just the top 1,000. I decided to load the CSV into MySQL, run a simple SELECT command that only gives me the top 1,000 world cities by population, and export the file as CSV. Here is a nice tutorial on importing MaxMind data to mysql.

I ended up with a 29KB CSV file of the top 1000 cities ordered by population with geo data and names. Still, how do you convert the CSV into UTFGrid?

Introduction to TileMill

MapBox has an awesome piece of software called TileMill which allows you to create some impressive interactive maps. It lets you import all kinds of data and style it with CartoCSS code. You can create custom tooltips out of the data and when you are all done, there are several export options. I found the TileMill Crash Course very helpful and it took me less than 5 minutes to create the map of most populous cities.

Now, UTFGrid is based on the actual tiles, you have a JSON file per tile, so it doesn’t make much sense to just export the JSON tiles by themselves. However, you can export the mbtiles file which has all the image tiles and UTFGrid tiles. Once that is exported, you can upload it to MapBox and start using your map.

Serving Mbtiles with PHP

Uploading to MapBox did not work for me. First, the mbtiles file was over 70MB and MapBox free account gives you only 50MB. Secondly, I really want to be in full control of all the data and imagery, and not use an external server. I started looking around for a way to serve map image tiles from your own server and it landed me on a simple PHP script that runs SQL queries on the mbtiles file and delivers the appropriate tiles. I uploaded the mbtiles, php file, and htaccess file to my server and it works like a charm. Check out this image tile and the corresponding UTFGrid file.

City by Population on Leaflet Map with UTFGrid

The final step is to point the tile layer in Leaflet to my server location and make sure the correct data is retrieved from a UTFgrid on a hover event. It’s a small change and here is the final demo of a Leaflet World Map with TileMill map tiles served by PHP and largest cities as markers deployed using UTFGrid.

External:

Leaflet Popups with UTFGrid interactivity
Custom Map Tiles
Exporting Tiles from TileMill
Exploring the MapBox Stack
Map Providers and Tiles
Landez – Python MBTiles Management
Serving mbtiles from your own server in python
Streaming UTF-Grid json tiles via TileStache
UTFGrids with OpenLayers and Tilestache
Making sense of Mapnik
Making maps from OpenStreetMap geodata
TileStache – Python-based server application that can serve up map tiles based on rendered geographic data.
MapTiler – Map Tile Cutter
SimpleTiles – an image generation library for spatial data written in C