I really like maps and today I want to list some of the best JavaScript frameworks, plugins, and libraries for making maps. Over the last few months, I have written a bunch of articles and demos on some of these JS mapping libraries but creating this compilation has opened my eyes to many more map APIs, jQuery plugins, and mapping solutions that I have not previously seen. Some of these map tools can really reduce the amount of effort needed to produce interactive maps. Many of these tools allow you to implement all kinds of dynamic maps with just a few lines of code. Here is a list of the top 50 JavaScript libraries and tools for making maps:
Read more
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
Read more
Countries and Capitals Quiz
Today, I wanted to create a really simple JavaScript framework for an index cards quiz with multiple choice options. To clarify, it is a matching game or a multiple choice question quiz but build from a 1 to 1, question and answer type relationship. Consider a list of countries and capitals. Normal index cards would show a country and ask you to speak or write the capital. My quiz shows you a country, provides a random list of capitals, and asks you to select or match the correct capital to the country. It can also flip the question and answer, so that you are provided a capital and the quiz gives you country options to match with the capital. So this JavaScript quiz framework turns a list of items into a multiple choice matching game. Here are my requirements:
- Pure JavaScript and very simple
- 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
Read more
LeafLet Map showing Flickr and Panoraimo Photos with Caching
I was looking at my OpenLayers Flickr And Panoraimo Demo today and I realized that plotting anything on a map with data that comes from an external API should leverage the server. The most important reason for this is caching but there are other benefits. You don’t have to deal with any cross-domain policy or hope for JSONP support since the communication with the API will be server-side. Also, it’s not secure to have API keys in your JavaScript as they can easily be taken, especially with search engines like NerdyData. So, it’s good practice to have these keys on the server. Today, I am going to explore some caching options in PHP and show how to create a nice Leaflet Map with markers generated by API calls that are cached on the server.
Read more
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.
Read more
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.
Read more
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:
Read more
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.
Read more
