COTW: GeoJSON vs FusionTables with Google Maps API

A Coders of the West Internship Program Update

My name is Tyler DeFeyter and I am a freshman at Sheridan Community College in the Computer Science program as well as a member of the Coders of the West program.

The main project we are working on is the WDECE Career Explorer, which is a program designed to help high school students map out potential careers that they are interested in.

A few weeks ago while working on the WDECE project, we looked into different ways to display county lines onto a Google map. The two main ways we found to do this was either loading GeoJson or importing a Google FusionTable.

GeoJson

One of the biggest problems we encountered while working with GeoJson was getting our data to display on a google map. When we plugged the file in to be displayed, the lines didn’t show up and we didn’t receive any error messages in the console. As it turns out, the Google Maps Javascript API methods for handling GeoJson data are a bit touchy. The .loadGeoJson() method gets rather touchy when you try to load the coordinates from a saved file on your computer. The solution we found for this was to write code that takes the data and turns it into an object. After that we used the .addGeoJson() method to load our data onto the map. While this is a little bit of work, it doesn’t take too much effort to do and we haven’t had any problems since.

FusionTables

An alternative to using GeoJson is Google FusionTables. This experimental application allows users to create data tables that include any type of information including coordinates. FusionTables then generates a map and adds layers according to the coordinates. The user can also create custom info windows that will pop up when a specific polygon on the map is clicked. To import these layers into a Google Map all you need to do is get your FusionTables encrypted ID by going to File > About this table and then copy the string of characters next to Id. Then you just need to add the following code into the function where you declare your map:

var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: <<Your ID Here>>
    }
});

Preference

All in all, I prefer google FusionTables. It was a lot less of a hassle to learn to and it offers a huge range of customization, while still remaining easy to use.

Coders of the West Wyoming Internship Program Spring Semester

Coders of the West spring semester team (l-r): Sidney Jensen, Sara Keeney, Tyler Defeyter, Anne Gunn, Bret Norwood, Tyler Osborn, Caden Masters

Leave a Reply

Your email address will not be published. Required fields are marked *