Hi, I'm Jen Kovnats, product manager on the Google Maps API.
There are a million websites out there
that have a Google map on them.
These have been built using the JavaScripts Maps API.
They're helping people figure out where to go for dinner,
show off their marathon training,
or keep up to date with the latest
news on natural disasters.
A map is a great tool to help your users visualize
the world around them.
And the Google Maps JavaScript API
lets you craft and mold these maps,
presenting your own data in beautiful and compelling ways.
Maps can be used just to plot a single feature or a whole host
of data.
If you plan to include a map on your website
to display more than a single feature at a time,
then you might be very interested in using the Data
Layer in the JavaScript Maps API.
The Data Layer gives you a way to structure and visualize
your geographic data sets and has
built in support for GeoJSON.
Now, let's dive into some demos that show just how easy it
is to map and work with data sets using the Data Layer,
as an example of what you can do yourself.
Say we wanted to build a map to show how earthquakes
are distributed across the globe.
We would go over to the United States Geological Survey's
website and grab a GeoJSON file containing information
on every earthquake in the world over the last 24 hours.
It would contain useful context, like the location
and the magnitude of each earthquake.
Now, with a data set of this size,
I'd usually have to parse the GeoJSON myself,
instantiate a marker for each earthquake,
and then plot them all on the map individually.
But using the Data Layer, I can load and visualize
the data on the map in just one line of code.
Ta-da!
The beauty of the Data Layer is that it provides you
the structure to let you handle your set of data like a set.
You don't have to go through the hassle of hand-crafting
a version of collections over and over again just to handle
simple things like instantiation, iteration,
and the ongoing manipulation of data-- hence,
the single line of code.
The other thing that it's doing is loading data onto the map
directly from GeoJSON at full fidelity.
Let's take a look at another example
that takes full advantage of this.
So the next thing I wanted to do is not just
see where the earthquakes were but also get
a sense of their size.
This was really easy to do by setting a simple styling rule.
It basically goes, hey, Data Layer,
make each point into a circle where the radius
scales with the magnitude of each quake.
And it just did it.
I didn't have to iterate through all the features myself.
Instead, I was able to set the style declaratively.
This makes my code really clean.
The other thing that's happening here
is that the Data Layer still contains the properties
that the original GeoJSON file came with.
Prior to the Data Layer, the minute
you would load data onto a map, it
was reduced to just what you could see.
You'd have features, their icons, styles, the location,
maybe some content for the Info window.
But things in the real world usually
have so many other properties.
This is really valuable pieces of data,
and you might want to use them in creating
how your map looks and feels.
Let's take a moment to jump into the wonderful world of GeoJSON.
GeoJSON is great to work with.
There are a lot of formats out there for geographic data.
Some of the biggies are KML, Shapefiles, GeoRSS,
and GeoJSON.
Personally, I like working with GeoJSON
because it's so easy to read and edit and just mentally parse.
It's an open standard that's emerged
as a favorite for sharing and collaborating
on geographic data online.
Now, if you're familiar with GeoJSON,
then the structure of GeoJSON should be pretty easy to grok.
Notice that you have a set of features, each of which
is a geometry-- this can be points, lines, and polygons--
and an arbitrary set of properties.
For me, it's really in these properties
that make the combination of GeoJSON and the Data Layer
super powerful.
When we first loaded the earthquakes' GeoJSON
file on the map, these properties were preserved.
So in the last example, that magnitude information
for each earthquake was actually loaded and used
in the map to size the circle icons.
It wasn't just thrown away.
So jumping back to the demo, another thing
I wanted to point out is that the beauty of the declarative
styling approach is it's really easy
to set a number of style rules at once.
All you have to do is add another rule.
Again, in this case, we're setting the size in addition
to the color.
My code is really clean.
The Data Layer also makes combining data
from a few different sources really easy
and can be used for any kind of geometry.
Let's look at another demo to show this off.
So in this map, we wanted to do a visual analysis of education
levels across the United States.
So first, we loaded the geometries
for each state in the US from Google Maps Engine via its API,
and it returns GeoJSON.
Using the Data Layer, we could draw these polygons on the map.
Then we loaded the US Census Bureau data
on high school education levels by state.
By mixing these two sources of information,
we were able to color our states based
on their levels of high school education.
And what's really nice is that because the Data Layer is drawn
in the client, we can make it dynamic
and interactive by adding lovely hover effects.
You should try this yourself.
It's worth pointing out too that while GeoJSON is really cool,
you can also create Data Layers manually and add data
to them programmatically, regardless of what format
the data started in.
You might want this if you like the sound of handling your data
sets as objects and if you want to do
declarative styling on them.
The Data Layer is a developer's tool.
It's designed to make your code cleaner and your life easier.
So if you're creating a map to show a data set,
the magic of the Data Layer is going
to give you consistent structure and hooks for your data,
unlocking things like declarative styling, semantics
of the data load right in the map, by way of properties,
enabling you to use this information in crafting
the map, and native GeoJSON support,
which makes loading a data set ridiculously fast and easy.
Take a look at the Data Layer documentation link to here
to get started.
One of our teammates wrote a great walk-through
of the US Census demo.
The code for all the rest of the demos can be found here.
And do take a look at GeoJSON.io, a website that
lets you generate GeoJSON on the fly with just
a couple simple drawing tools.
Thanks for listening.
Check us out on Google+, or Tweet at us if you have a cool
project that uses the Data Layer.
We would love to see it.
Cheers.