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.
The nice thing about UNESCO is that they offer the data in many formats (rss, xml, kml, xls) but they do not have GeoJSON, which is mainly supported by MapBox. It took me some time to convert the format to GeoJSON because I also wanted to remove everything except name, latitude, and longitude. But, after a little work, I created the UNESCO GeoJSON file. This was really the hardest part as the code to plot locations on MapBox is super easy, check out the MapBox demo of UNESCO heritage sites.
Now, you might notice a slight lag (wait time with white screen) when the page loads and that is due to the amount of markers getting placed on the page (over 900 sites). But the file is only 156K and I think that this lag could be eliminated. After placing a JavaScript breakpoint on map.addLayer(markers), I realized that the whole map waits to render on the browser screen until the entire GeoJSON file is loaded and processed.
This is the problem, MapBox should render the map first and then execute adding markers and the API has support for this but I must say it is not well documented. I have upgraded from v0.6.7 to v.1.0.2 and noticed that there is a layer “load” event but the documentation only talks about “ready” even. When you use the load event it fires after the tiles get rendered and that makes this UNESCO MapBox Demo feel much faster.
As I reviewed these demos over the weekend, I felt that a lot could be enhanced. I would love to see images of each heritage site and links to Wikipedia so you can actually explore and learn more about these places from the map. Wikipedia also has these UNESCO sites listed but it splits things up per continent, doesn’t always include geo location data, and the names of places do not always correlate. So, combining the data from Wikipedia with the information from UNESCO was a pretty painful manual process but in the end I created a UNESCO GeoJSON file that powers my MapBox map with custom popups of each world heritage site and direct links to Wikipedia articles. Here is the final UNESCO World Heritage Sites Map with Photos.
