Results for tag: mapbox
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.
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.
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.
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.
Final Demo: UNESCO World Heritage Sites Map