We recently announced the launch of the data layer in the Google Maps JavaScript API, including support for GeoJSON and
declarative styling. Today we’d like to share a technical overview explaining how
you can create great looking data visualizations using Google
Maps.
Here’s our end goal. Click through to
interact with the live version.
Data provided by the Census Bureau Data API but is not endorsed or certified by the
Census Bureau.
The map loads data from two sources: the
shape outlines (polygons) are loaded from a public Google Maps Engine table and we query the US Census API for the population data. You can
use the controls above the map to select a category of data to display (the "census
variable"). The display is then updated to show a choropleth
map shading the
various US regions in proportion to the values recorded in the
census.
How it works
When the map loads, it first queries the Google Maps Engine API to retrieve the
polygons defining the US state boundaries and render them using the loadGeoJson method. The controls on the map
are used to select a data source and then execute a query against the US Census Data API for the specified variable.
Note: At the time of writing, the data layer and functions described
here require you to use the experimental (3.exp) version
of the Maps API.
Loading polygons from Maps
Engine
The Maps Engine API's Table.Features list method returns
resources in GeoJSON format so the API response can be loaded directly using
loadGeoJson. For more information on how to use Maps Engine to read public data tables,
check out the developer guide.
The only trick in the code below is setting the idPropertyName for the
data that is loaded. When we load the census data we'll need a way to connect it with the Maps
Engine data based on some common key. In this case we're using the 'STATE'
property.
Importing data
from the US Census API
The US Census Bureau provides an API for querying data in a number of ways. This
post will not describe the Census API, other than to say that the data is returned in JSON
format. We use the state ID, provided in the 2nd column, to look up the existing state data
(using the lookupId method of google.maps.Data) and update with
the census data (using the setProperty method of google.maps.Data)
Styling the
data
Data can be styled through the use of a Data.StyleOptions
object or through a function that returns a Data.StyleOptions object. Here we
create a choropleth map by applying a gradient to each polygon in the dataset based on the
value in the census data.
In addition to the coloring, we've created an interactive element by adding
events that respond to mouse activity. When you hover your mouse cursor (or finger) over a
region with data, the border becomes heavier and the data card is updated with the selected
value.
We’ve also used a custom basemap style in this example to
provide some contrast to the colorful data.
Check out Google Maps Engine if
you need somewhere to store your geospatial data in the cloud, as we’ve done here. If you have
any questions on using these features, check out the docs for the data layer and the
Maps Engine API or
head over to Stack Overflow and
ask there. You can also check out this article’s permanent home,
where the interactive version lives.
