Exploring MapBox Tile Maps and Data

MapBox is amazing. I love looking around at all their tile maps, examples, and browsing through various geographical data visualizations. I also like how their solutions works, their API, and other things like TileMill and Wax, so this post is going to explore some interesting vector tiles from MapBox and various interesting maps.

Let’s start with a quick demo I put together that explores various MapBox tiles. All of them show New Your City but you can zoom out to explore how these tiles and maps look on a world level. If you open up the console and look at the network tab, you can see a JSON file being retrieved for each of these tile sets. The comic looking map (examples.bc17bb2a), for example, loads the following JSON file. It gives you some information about the tile set like the URLs for tiles that you could use to load these tiles in other slippy maps like LeafLet or OpenLayers.
Read more

Reverse Geocoding on ModestMaps

I have previously shown how to do reverse geocoding with MaxMind and now I want to show how to leverage a geocoding web service to visualize locations on a map. I have already done a ModestMaps with API calls and markers example in the past so I can leverage that to create this demo. Instead of using Google Maps Geocoding, I am going to use GeoNames Web Services and render the results on a ModestMap for comparison with MapBox image tiles.
Read more

D3 Maps with Image Tiles

After creating some D3 maps, I wanted to investigate how to make these maps look better. I could definitely improve the presentation of the map element, use better colors for different countries, and make other minor changes but leveraging image tiles with D3.js would be cool. However, using an external tile server, loading a lot more resources, and paying performance costs are important considerations. So, today, I am going to explore different options for integrating map tiles with D3 and GeoJSON.
Read more

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.
Read more

Plotting GeoLocations with MapBox API

Final Demo: UNESCO World Heritage Sites Map

After messing around with OpenLayers and D3, I wanted to create an example of plotting some data points on a MapBox World Map. The API documentation and examples look great so creating this demo should be quick and easy. The data points are geolocations that come from an external GeoJSON file and I will be using the MapBox JavaScript API to visualize the geo locations on the map. Last time I have retrieved and plotted all the IUCN landmarks and now I will focus on UNESCO world heritage sites. The UNESCO website already has these mapped but my demo will plot these heritage sites with MapBox.
Read more