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
I was really impressed with Leaflet and UTFgrid but I wondered how hard would it be to allow the end user to highlight countries on mouse hover and zoom into a specific country on mouse click. I did that in my D3 World Map Example by leveraging GeoJSON but Leaflet.js creates a world map using image tiles. Of course, you could load the GeoJSON code as a layer in Leaflet and then use that data to identify countries on mouse over and zoom into the bounds of that country area on click. It’s actually really simple and here is how to do it.
Read more
Lately, I have been working a lot with regular expressions and today I want to expand on my Best Programming Cheat Sheets post and Grep, Awk, and Sed post and list some great resources on finding useful Regex patterns and examples. If you are just starting out in Regex land, I would highly recommend reading through Smashing Magazine’s Guide to Regular Expressions and practice some patters with RegexPal or JS Regex Tester. These tools are really useful in testing and validating different patterns so keep them in mind as you browse through the Regex resources below:
Read more
Reverse geocoding is the process of translating the geo location of a point (latitude and longitude values) into a readable address or place name. Google has the Geocoding API which includes Address Loookup and I have previously written about using Google for Reverse Geocoding. Here is an example of Google Reverse Geocoding, and here is an example of a reverse geocoding on a Google Map. This is a good tutorial explaining how to use Google’s GeoCoding API, but what about other reverse geocode services and options?
There are a few other geocoding APIs like Bing’s Find a Location by Point, MapQuest’s Reverse GeoCode Example, ArcGIS reverse geocode method, AfriGIS Reverse Geocoding API, Open Street Map reverse geocoding query, and CloudMate’s Reverse GeoCoding Method. Personally, I would go with GeoNames Web Services as it is available under Creative Commons Attribution License and you can even download their database. If you are already using MaxMind to translate IP addresses into place names, you could also leverage that database as it has city names with latitude and longitude values. But, how do you query such a database to get city names with some proximity of one geo coordinate?
Read more
Final Demo: Direct Flights World Map
Update:
Many countries do not have direct flights. Recently, there has been a lot of talk about Edward Snowden not having a direct flight from Russia to Venezuela. I have updated the routes map to capture the fastest flights in between countries where a direct flight does not exist and for such two countries, the result shows all possible flights with one connection. Here are the possible flights for Edward Snowden from Russia to Venezuela.
Direct Flights with Connections
I like to travel and the problem I have with Kayak, Momondo, and other travel search solutions is that they want me to give them a specific source location and destination location. They do have a radius search but my trips don’t really have specific locations, I want to know all my options and all I care about is price. Usually, I am interested in exploring some country, I intent on seeing various cities in that country and don’t really care which city I fly into or fly out of. I also don’t really want to be limited to a radius in the origin city, it’s not a big deal to drive from Los Angeles to San Diego or Boston to New York if it results in a cheaper direct flight.
What I really want is more information about airlines and their routes. I want to see all the direct flights in between countries, inside a country, and from specific airports. I don’t know why this thing does not exist but when I build my OpenLayers demo, I realized that OpenFlights has airline routes information. So, today I am going to use that data file to create an interactive world map in D3 and let you select two countries which will show you all the direct flights between those 2 countries. You can also click on an airport and get all direct flights from that airport. Clicking on a single country will give you all direct flights from that country to the world and clicking twice on a country will give you all the direct flights within a country.
Read more
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
Final Demo: US Ski Resorts on PolyMaps
PolyMaps is a free JavaScript library for making dynamic maps using tiled vector data in spherical mercator projection. In other words you get a full-fledged slippy maps (image tiles, pan, zoom, etc) library that works with SVG. This is very similar to my geo example with D3, but D3 is more of a visualization library with geographical capabilities while PolyMaps is more focused on just mapping. PolyMaps has nice documentation and examples, and it was a breeze to create a simple map.
Now, lets add some data. I have mentioned GeoCommons before, but I wanted to show how easy it is to find and visualize some interesting data sets from GeoCommons. You could just upload some data to GeoCommons and let them create a map for you but we are going to browse the website for uploaded geo data and make our own map. PolyMaps uses GeoJSON and GeoCommons allows you to transform their data sets into various formats so lets get started.
Read more
It’s time for another JavaScript mapping library and data visualization demo so today I wanted to take a look at ModestMaps with some real-time data. I was just looking for concerts around my area and stumbled on SongKick so this demo will use the SongKick API for concerts data. ModestMaps comes from the makers of MapBox and it looks really simple and clean with GitHub hosted API docs and examples you can easily download. The idea is to load a simple map, process the end users geolocation and position the map to that location, initiate a call to SongKick API for concerts in that location, and show the results in an overlayed panel, while allowing the end user to plot each concert on the map. Lets get started.
Final Demo: Find Concerts per Geo Location on a Map
Read more
