With the recent launch of the new Google Maps and my love for maps, I want to dedicate a post and create something with the version 3 of the Google Maps API. Street View is capturing more and more interesting locations around the world and it’s great that Google is constantly enhancing this feature. On top of this, other people are innovating and making things like Google Street Viewer and Hyperlapse which combine Google Street View and WebGL to make some awesome effects. The Google Maps API also supports 45° imagery for certain locations, which is another interesting map type. So, today, I will combine all these map views and create a Google Maps demo that explores geo locations with three different map types: roadmap, streetview, and tilt.
Multiple Google Maps
Countries and Capitals Quiz
- Uses JSON to load the data for the quiz
- Allows you to flip questions with answers
- Allows you to define the amount of multiple choices
- Tracks time, score, and progress
- Shuffles the questions and options on each play
- Uses CSS transition to animate colors in the UI
LeafLet Map showing Flickr and Panoraimo Photos with Caching
Guess the Country Game
After creating my last D3 game, I wanted to follow up with a similar concept but focus more on country names and zooming animation. It’s basically a recreation of Mike Bostock’s World Tour but in a game format with some extra features, like zooming into a country, keeping score, and providing hints. Most of the code has been re-implemented from my other D3 demos and I have added capitals data directly into the TopoJSON. Let’s look at the code.
Drag and Drop SVG Geography Game
I wanted to write a game for a while, so today I decided to create a geography game with D3.js. The idea is to let the player drag and drop territories into their appropriate place on the world map. The map is rendered using the Robinson projection and only the top 100 territories are chosen according to land area. These 100 “countries” are shuffled on each refresh and upon a successful drop, the land changes color to green. If the player makes a mistake, a hint is provided: all the countries that border the selected country. The player has one more try to drag the land into the right place or the land turns red, animates on its own to the right place, and the next territory is loaded. The goal is to get a perfect score and learn where every country is located on a map. Let’s look at the code.
You might have recently heard about Obama’s executive order to open government data and this made me want to dedicate a post that aggregates various sources for geographical data. The US Government’s Data.gov website currently has over 200,000 datasets and I am impressed at the available formats and filtering capabilities. There are over 400 data sets on next.data.gov. The health data community has over 800 data sets and the U.S. Census Bureau has a really large collection of maps and data available to explore.
Adding to this, we have the CIA World Factbook which has a lot of relevant country information but not in an open standards format. My last post highlighted how you could use CasperJS to scrape and transform that data into CSV or JSON files. But, let’s explore non-government data sets and geo resources:
D3 World Map with Country Information
2013 World Population Map
2013 World Population Density Choropleth Map
The CIA world factbook is a great resource for information about various countries and territories. It can and it has been used often to create world maps for specific data points. The problem is that a lot of the data changes frequently and retrieving this content is not straightforward. The pages are not well formed and the data is not delivered in JSON or CSV formats. Instead, these great country metrics are just dumped into the content of the page and even thought the pages are nice and readable, the source is painful to scrape.