DYLAN THOMAS: Hello, and welcome to What In The World.
This is a regular show where Geo Googlers dip into
interesting Enterprise Maps-related topics and share
the results with you.
I'm Dylan Thomas.
I'm a Geo Enterprise community manager.
And joining me today is Ryan Thomas, who works with our
Enterprise customers on getting up and running with
our Geo products.
Hi, Ryan.
RYAN THOMAS: Hi, Dylan.
How are you?
DYLAN THOMAS: I'm good, thanks.
I'm looking forward to the show today.
You're going to be talking with us
about Google Maps Engine.
And more to the point, how to get GME layers up and running
and visible in Google Maps JavaScript API, right?
RYAN THOMAS: That's right.
Specifically, I'm going to be talking about MapsEngineLayer
and DynamicMapsEngineLayer.
And because that's been such a tongue twister for me, I'm
going to refer to it as MEL and DMEL during the
presentation.
DYLAN THOMAS: That's an awesome idea.
RYAN THOMAS: Let's take it away.
And we'll look at a presentation
that we have today.
So this is what we're going to go through today.
We're going to talk about what are MEL and DMEL, why they
were created, what are the benefits to users, go over a
little bit more information, and then do a quick
demonstration on how to use them.
So what are MEL and DMEL?
Well, Google has the excellent location data hosting service
of Google Maps Engine, which you're probably familiar
about, where you can upload your map data, style, and
store your data in the cloud.
Google also has the map-making tool of JavaScript API, and
MEL and DMEL are essentially to the link between them.
Now, using those, you can easily put a map on your
website that shows your GME content.
So why were they created?
MEL and DMEL were originally created because there wasn't a
concise and simple way to put styled GME data on a non-GME
map, an example of Maps API.
Since customers went through the effort to style their data
in GME, they didn't want to have to repeat the effort in
the Maps API JavaScript.
So enter MEL and DMEL.
And MEL was created to make it easy to visualize your
content on a map.
And prior to MEL, the only way to add GME content was to draw
one feature at a time, which, as you can imagine, would
become pretty cumbersome and time consuming.
DMEL was created to make the experience for your end user
much richer.
And you can add styling changes which reacts to the
user, such as mouseover, which we'll see later on during the
demonstration.
So what are the benefits to users?
Essentially, this is a powerful integration between
our Geo products of Google Maps Engine
and JavaScript API.
And it's a simple and easy way to visualize your
GME data on a map.
And what's nice about is there's little to no coding
experience necessary for users.
This is all accomplished in approximately three lines of
code, which is very simple.
And just giving a little bit more information.
This does not work with Internet Explorer 8 or earlier
versions, so that's just something to be aware of.
And these are several links with documentation on
MapsEngineLayer, DynamicMapsEngineLayer, and
then OAuth 2.0 Playground.
And these links will be embedded within the video for
you to go to at your leisure as you come across any issues
or questions.
So let's move into the demonstration.
As you can see, right now I am in Google Maps Engine.
And let's say we created a layer in Google Maps Engine,
and the data was about the 2010 census.
Now, if we go over to the right, we can click on this
map to view a draft of our data in GME.
As I zoom out and then zoom in, we can see the data, or
the layer, that was placed upon the map here in GME.
Now, if we click on the map, we can get some information
from the layer that we've added.
So now we want to get this layer, and place this on a map
on a website.
So the thing that you want to do is go to the upper
right-hand corner--
and you can see this button in the upper right-hand corner it
says access links.
And if you click on that, you have the asset ID, which is
the same as the layer ID.
Now, you can copy this layer ID .
And then from here, we'll move into some actual script that
we have already filled out.
And now that we're in the script, you can see if there's
a place for the layer ID.
And this is where you would place the layer ID that we
just copied and pasted from Google Maps Engine.
And as we scroll down--
Now, this is a little more complicated than it normally
would be, because in the demonstration I'm going to be
showing to maps side by side, but it's really only a few
lines of code.
And you can see we have the DMEL code here.
And then just below that, we have the MEL code.
DYLAN THOMAS: So that looks really simple, Ryan.
All you're doing is calling each of those classes.
And you're just passing in the layer ID you go, and then
linking it to one or other of the maps, right?
That's it.
RYAN THOMAS: Exactly.
So now that we've looked at the script, let's go and take
a look at what the maps will look like.
These are the two maps that we're now displaying.
Now, the map on the left is from MapsEngineLayer and is a
static map.
The map the right is from DynamicMapsEngineLayer and
it's more dynamic and interactive.
So let's zoom in on the map on the left.
And we're headed toward Kansas.
Now, let's just scroll over our data.
See, we can click on it and still get the same information
that was in Google Maps Engine.
Now, let's go over to the map on the right.
Zoom in back to Kansas.
Now this time, this map is a little bit more dynamic and it
has a mouseover effect.
As you can see, as we scroll over some of the data in the
layer, it'll light up.
And so this is just a very simple example of ways to make
your maps more interactive for your users, and make it a
richer experience for them.
DYLAN THOMAS: The key difference here as I
understand it, then, is your MapsEngineLayer, or MEL, as we
just renamed it, is the left.
And that's really getting traditional map tiles as
images that are being created in Maps Engine, right?
So that we're downloading map tiles and displaying them.
And that's why you have to click on a feature to go get
the feature information on the left.
But on the right, we're actually streaming the vectors
from the MapsEngineLayer.
Engine And that's why when they're down on the client, we
have more of this interactivity.
RYAN THOMAS: That's exactly right.
And this is what MEL and DMEL can do for you by taking the
Google Maps Engine data and displaying them for you with
the JavaScript API.
DYLAN THOMAS: Got it.
So it looks like it when you're hovering there, I saw
the change of color.
So obviously, you can listen to events with
DynamicMapsEngineLayer, like mouseover or onclick,
obviously and then change an individual feature as well.
RYAN THOMAS: That's right.
DYLAN THOMAS: Well, thanks for showing that, Ryan I do have a
couple of follow on questions.
This is, after all, the Enterprise folks who are
listening in.
So one of things I wanted to ask was about authentication
and authorization.
I know that OAuth 2.0 is the protocol we use to provide
authorization for Map Layers so that access control data
isn't just wide open to the internet.
Are there some resources available or a place a
customer can go to learn more about that?
RYAN THOMAS: There are.
And that's a really good question which a
lot of people have.
In the links that I showed earlier in the presentation,
there was a link to an example in the developers page where
it will have a JavaScript example about OAuth 2.0.
And another link is for the OAuth 2.0 Playground, where
you can go and learn more about OAuth 2.0 and how to
utilize it.
And if you have additional questions, feel more than
welcome to get in touch with us through the community to
help answer any specific questions you may have.
DYLAN THOMAS: Good point.
Thanks for plugging the community, there, Ryan.
That's pretty nice.
So the two pieces you mentioned there is the OAuth
Playground, where you can learn more about OAuth just as
a base protocol and the approach to doing this.
And the second part is a specific example for Maps
Engine, right?
RYAN THOMAS: Exactly.
DYLAN THOMAS: Got it.
One other thing I was thinking about as you were hovering
over the map feature, there, is you're changing the color,
but there's no reason you couldn't just call any kind of
code at that point, right?
You hover over a feature, you could show a picture or go get
some Wikipedia data about that county in Kansas.
I know that a lot of customers on the DynamicMapsEngineLayer
also want to then go and query the Google Maps Engine via the
API as well.
Are there any limitations that they should think about as
they're streaming these vectors down to the client
using the Maps API and then querying back to the feature
in Maps Engine?
RYAN THOMAS: That's a good point.
The possibilities are pretty great on what
you can do with that.
But people should just be aware that the
limit is 1,000 features.
And so going over that, you may run into some issues.
DYLAN THOMAS: So you're saying that there's no limitation on
the number of things that Maps API could display, at least
today in terms of--
we're not going to say a million, that may
be too many, right?
But the GME API itself is what's used to make this thing
work, and that has a limitation today of 1,000
features per request, right?
RYAN THOMAS: Exactly.
As long as that doesn't go up, GME is essentially doing the
heavy lifting.
And so 1,000 features in GME is the limit as of today.
DYLAN THOMAS: Got it.
Well, Ryan, I wanted to really thank you for taking the time
to show us some tips and tricks there on MEL and DMEL
today, so thank you.
And we'll make sure that this video is available online for
those of you who couldn't watch it live, and we'll
include the links.
And I want to reiterate Ryan's offer
to help in the community.
So if you do have further questions, just get in touch
with us and let us know.
Thanks very much.