Google Maps Developers Live: Ships, Polylines, Symbols, Oh My!


[MUSIC PLAYING] Hello, and welcome to
this week’s Google Maps Developers Live. This week we’re doing a
continuation of our last week’s show, which was “A Tale
of 245,000 Points.” What we did is we took a very
interesting data set, the C-L-I-O-W-C data set. I’ll bring it up on the computer
in a little bit. It’s actually a database
of ship voyages between 1750 and 1850. We took that data, visualized
the data on a map. What they did is they took– the
university did– they took the ship logs, they digitized
it, so we have a bunch of samples of basically wind, wind speed, and ship positions. So in the examples that I gave
last week, I did not use the wind speed, but Brendan did
in his canvas layer demo. This week, I’m just going to
go back to the geospatial data, though, and not
the wind speed. But I’m going to cover a
few more interesting visualizations that you
can do with that data. So to kick things off with,
I’ll pick up where we left off last week. So this is a heat map
of actually just one year of the data. So basically, we took the points
from the data set, binned them by year, and
actually plotted them in a heat map. So this is actually showing
density of samples, which actually correlates roughly to
ship voyages, or density of ship activity. So, a lot of it’s dependant on
where the ships were and how often they were sampling. If we zoom in over here, you
can see that these ships in this section here were sampling
relatively regularly. Some other areas, if you zoom
out, you can see it’s much less regular. Don’t have a good
example here. So like I said, I bin
this data by year. I added this slider in,
so actually we can increment over the years. So now, we’re going in
the 1760s, 1780s. So basically what I’m doing is
I’m taking each of the bin, applying them to a heat map, and
applying that heat map to the actual map itself. Very interesting data
here though. So as we go year by year,
we can see the densities changing over time. We can see more– actually, if we go back just a
year, really interesting, we can see quite a few voyages
to Peru in 1778. We continue on. We start to see some arctic
voyages coming out of, I believe that’s Denmark. So it’s a very interesting
data set. Visualized in a heat map, you
get the sense of density. Also, what I talked about last
week was actually how to get your map in a state where you
can actually do really compelling visualizations. And again, what I did with this
map is I basically turned everything off using the Styled
Maps API and just incrementally added in the data
that I really wanted on the display. So for example, I added back in
water and I made it black, turned on the labels for water,
turned on the labels for the land masses
or the countries. And what I did more recently
since last week is I actually put in the cities as well,
because it’s kind of interesting to see where
these voyages were coming from and going. Take a look at the code again
for this one here. So, this was heat map four. Relatively straightforward. You can see my map
styling again. So turn everything off, which
is the important part, I think, with doing
visualizations, because then you can kind of pick and choose
what information you want to put back in. Making the water black,
turning the visibility back on. So with the water labels– So you can see down here
if we look at the administrative labels– so that’s the country and
locality for the countries and the cities– I turned them back on, but I
just inverted the lightness. It’s just a trick, because
previously they were white on black, and I think I inverted
them to black on white. The water labels
were different. They had blue in them, so I
couldn’t just invert the lightness, so I actually had
to change the color. So that’s with the
map styling– again, if you want to do map
styling, I recommend definitely looking at the Styled
Maps Wizard because tweaking a map to this
level can take a little bit of effort. But using this Styled Maps
Wizard is just a matter of grabbing sliders and checking
check boxes. So you can pretty quickly
get a nice design. Basically, just taking the data,
getting it in a format that I liked– like I said,
it was binned by year. And then here, I’m setting
up the gradient. And this is very, very simple
gradient for a heat map. I like this really
kind of hot look. The red sticks out really nicely
on the black water background. And here just adding
it to the heat map. I talked a little bit about this
last week if you want to know a little more about these
parameters, things like radius and opacity and maxIntensity,
check out the show last week. But this week, we want to move
on to some other cool stuff. One more heat map though. One thing we did that we didn’t
show last week with the heat maps is to show what you
can do actually plotting data real time on a heat map. Because the heat map
itself takes an NVC array for data points. And that NVC array, the way it
works is as you add points to an NVC array, the container is
actually notified that there’s been a change in the array. You can assign just a normal
array to a heat map. But if you do that, you don’t
get this kind of dynamic, adding and removing
points effect. So taking a look at this map,
it’s really kind of fun, because you can actually
see the voyages. Essentially what I did with this
map is I just sorted the data by the date and
just plotting one point at the time. This is actually plotting
it as fast as you can on this computer. You can see there’s maybe about
a quarter second delay or so as each point is added
in, and that’s actually all rendering time. So this isn’t super-performant
visualization. But the really nice thing about
it is, even though we’re zooming around or zooming or
we’re actually scrolling around, actually this is
still being rendered. So it’s a really cool
effect that you can do on top of a map. I thought about some
other things that– so at some point, this actually
gets pretty slow, because you get so many
points on the map. And the heat map gets so complex
that it slows down almost to a crawl. But you can do things– the
really interesting thing that I’ve been meaning to play
around with is you could potentially, since we’re using
this NVC array, you can remove points from the heat map
as well as adding them. So you can actually trim down
and maybe do a window a year or something to that effect. Another thing you can do is you
could actually fade in and out points, because heat map
points actually have a weight associated with them. So default weight is 1, but
you can actually take that down to 0, so actually make
the point relatively transparent. So that would be a nice effect
for fading data in and out of the map as the time
progresses. Maybe in a couple weeks we’ll
play around with that a little bit more. But the interesting thing about
this is using this type of real-time rendering the
points, you can actually see these voyages progress
over time. So we started thinking, well,
what are other ways that we can look at how these voyages
progress over time. And that led us to polylines
and symbols. So polylines have been
in the Maps API for quite a few years. Very simple thing to use. You just basically provide
the lat/long values. You provide the styling for
the polyline, and it plots them on the map. You can plot the polylines
on the map. You can plot a number of
polylines on a map. I think in this case, I’m
plotting at one point up to 25,000, and we’ll show
that in a little bit. But what’s new about this, new
about polylines, is we recently added symbols
to polylines. So symbols are actually
SVG paths. So they’re basically a custom
icon that you can put on top of a polyline. And what we did here, the
arrows are kind of a little bit small. We could maybe potentially
blow it up to make this visualization a little better,
but you can see there’s little arrows plotted on this voyage. These arrows show direction,
because we originally– we just plotted this line on the
map, and said, wow, it’s kind of an interesting voyage. We can see they– I think this is probably a
Dutch voyage, because it actually goes to Japan. But you can see it actually
has three voyages. It goes to Japan, back,
and I think to Jakarta and back again. So having those arrows on there
was a really nice effect to kind of show directionality. The nice thing, too, is you can
control what these symbols look like since they
are SVG paths. Arrow is a default one that we
provide, or one that you can use without providing
an SVG path. But you can essentially put any
marker you want on top of a polyline as long as you have
the SVG paths for them. Take a quick look
at this code. Let’s see. Back to sublime. This is actually probably the
most simple of all the visualizations, all
51 lines of code. Although we did put the data in
a separate file, which made things a lot more simple. Same thing as before–
initializing the map, setting up the voyage in terms of– So here we’re creating the NVC
array for the coordinates and converting these lat/long
values, which are actually in a JavaScript object into a
Google Maps lat/long object and pushing them into
this NVC array. For the symbol, we just
assign a path. So the path is actually one of
the defaults like I said– the forward closed arrow. And then here is actually where
we’re setting up the polyline itself. So we created the polyline. We defined the path. The path is actually those
points that we loaded up here. And then we control how we want
the polylines styled, so weight opacity. And here is actually where we’re
putting the symbol on top of the polyline. So without the icon, you can
actually just be a very basic line, but here we’re actually
putting the symbol on top. So, here I’m applying the
forward closed arrow and specifying an offset
of 10 pixels. So that is actually the offset
from the origin of the polyline, or the first point
in the polyline. So I wanted to offset it
a little bit to show– well, it was just kind of
a nice visual tweak. And then this repeat is how
often you want that symbol repeated on the polyline. Both of these can be in
percents or pixels. And then here, we’re
just assigning the polyline to the map. So very simple getting a
polyline on a map, and also like using these SVG symbols,
also very simple to get a good visualization that way or add
a little bit of extra data. So like I said, with this
visualization, we just wanted to show the voyage and then also
show direction, which was very simple to do. So, the next step is– the interesting thing about that
visualization is you can see where the ship was going
and what direction it was going in, but you don’t get
really a sense of time. So another nice thing about
these symbols is you can actually animate them. Actually, I should mention
that both of these visualizations were done
previously by Mano Marks. Mano’s been playing around with
this idea of plotting these symbols on polylines
for a while now. But you can see here, we have
a ship anchor, and actually that ship anchor is following
the polyline and animated over time. So we’re just progressing
through time and plotting the polyline– or plotting the symbol– at a different offset. Very, very easy to do. Let’s see what happens when
it gets around this little curve here. You can see actually the
direction of the polyline follows, or the direction
of the symbol follows the polyline. We go back to the code
for that one. That symbol’s 1. So, the trick with this one is
very similar to the last one except that we’ve applied two
symbols, or two icons. So one is the arrow symbol,
which we saw before, and the other one is the ship symbol. The ship symbol, we control the
styling of that as well, and we have to apply
a path to it. So that path is an SVG path. I’ll show you that the moment. We can control how we want that
symbol styled, how it’s anchored on the polyline, et
cetera, what it’s scale is. Again, we just apply that
polyline, or that symbol to the polyline and away we go. So what the animation does is
actually just incrementing account per animation frame and
then adjusting the offset incrementally. So as we count upwards,
it’s just changing the percentage offset. Very simple to do. This one’s a whole
83 lines of code. A little bit more complexity. I was going to say if we take
a look at the symbol path– I put it in a separate file. I’m not an expert on SVG path,
so I can’t really say how these are constructed or how
to interpret this one, but this is how you actually
define these symbols. So I think Mano actually just
found one on the web and downloaded it. It’s freely available. You could also potentially draw
these using [INAUDIBLE], Inkscape or Adobe Illustrator. So now, where’d our ship go? All the way down here in the– looks like it’s getting closer
to the Indian Ocean. So this polyline, or this
symbol, will just kind of continue to follow this
polyline ad infinitum. Where do we go from there? So, another thing, in that case,
we’re just showing a single polyline on the map, but
we have all these voyages. We have 25,000 voyages
or thereabouts. We can show all of them on
a map at the same time potentially using polylines. And that’s what this next
visualization is. So, we go back to this kind of
minimalist type map where we just show the oceans and the
land masses and then the names of the countries
and the oceans. Again, I put the slider in here,
and what this slider does is I’m going voyage for
voyage, so they’re sorted chronologically from
the departure date. I’m going voyage by voyage,
plotting them on the map as a polyline. On the right hand side here, I
just put a little key, because I’m going to color the polylines
by the country. So Germany is red. Denmark is green. France is yellow, et
cetera, et cetera. And the Netherlands is cyan,
which is an important point, because you’ll see a lot
of them later in the visualization. So, let me zoom back in. So, grab the slider here, and
again like I said, I’m just going to plot these voyages
in one at a time. What you can see is
you can actually get a sense of density. You can also get a sense of what
countries are most active for a certain time period. And you can also get a sense
of where these ships are coming and going from since
these are polylines. So, over time, we can build a
pretty nice visualization of– let’s get the slider back. There we go– pretty nice visualization
of the entire data set as polylines. Let’s zoom back out one. So again, the nice thing about
these, since it’s all built into the map API, these things,
these polylines, are actually scaled dynamically as
you zoom in and zoom out or as you move around the map. Now, there’s quite
a few of these. Like I said, there’s about
245,000 points. I think it’s about
25,000 polylines. So a very dense data set, but
it ends up looking pretty nicely on a map here. A couple things I did with this,
I tweaked the opacity a little bit, so you can actually
see polylines that’s behind other polylines. And that’s a nice feature for
another way of showing density, because as these
polylines stack, the lines get more dense. And also, you can actually see
the other voyages behind them. Really, this visualization by
itself, even without the slider, is actually
pretty rich. You can see things like
the Dutch activity– actually Dutch activity pretty
much all over the world, but primarily in Jakarta
and Indonesia. A lot of activity over
in the Congo. I always pronounce this wrong,
but Suriname and Venezuela, so a lot of activity from
the Dutch up there. And a lot of– so this purple
is actually Spain– so a lot of activity obviously from Spain
in South America and South and Central America. And if we go back over to the
United States, the coast of the United States, we see a
lot of activity from the British and also from France. And when I first saw this, I saw
these lines from the Dutch coming in to the east coast of
the United States, and I was like, well that’s kind
of interesting. What’s going on there? And as we zoomed in, you can
pretty quickly see that they’re landing in New York,
since it was at one point called New Amsterdam. So, yeah, very rich, I
think, data set here. You can see a lot
of information. I think it looks pretty stunning
in terms of using the different colors. I made the colors a little bit
pastel to make them stick out a little bit on the map. If we get over to the single
voyages, they don’t stick out quite as well over here. Easy trick for that though would
be to adjust the opacity or the width of the polylines. We can take a quick look at the
code for this guy here. So it’s going to be– symbol’s 2. So I won’t get into
the specifics. Actually, the hardest part
about this was actually getting the slider to work. Oh, and I actually made it work
in both directions, which was kind of fun, and I’ll show
you that in a second. So really, trick here was
basically for each of these, I’m creating a polyline for
each of the voyages and assigning the specific color. And I’m starting out with
visibility faults. So, what I originally did is,
as I was actually adjusting the slider, I was creating these
polylines dynamically. That wasn’t quite as performant
as creating all the polylines in advance and
actually adjusting the visibility as you
move the slider. So, all these polylines are
actually on the map simultaneously. It’s just when I actually adjust
the slider is when they actually get displayed. And so again we have
these map controls. I think these are really
great for actually– a lot of samples, I see the
map’s controls sitting in a space on the page
next to the map. There’s no reason really
to do that. A lot of times, you can actually
put your controls right on top of the map. And I think this is the main
points of that one. Again, I’m proud of this one–
actually getting the slider to work in both directions. We can actually go back and
adjust the visibility as we go back in time as well. A variation of this one. So, I thought it was great,
because you can actually build this visualization over time. So you can add the polylines
dynamically over time, but I thought it would also be good
to see what was happening within a certain
range of time. There’s not a really good HTML5
control for doing a slider with two points
or two handles. So what I did with this one is
just use a standard HTML slider, HTML5 slider, or a range
control and did a range of polylines from the center. So here, we’re starting with
1750, and as I actually slide, I’m actually rendering it, I
think, about 100 polylines total on each side of where
the slider currently is. Zoom in to see that
a little bit. It’s a nice lightning affect. Nice thing about this, too, is
you can see over time what activity is like. So if we start all the way at
the left hand side, we see a lot of activity from the
French in Canada. We see a little bit of a Dutch
activity, some continued French activity. But then at some point, we see
a lot of Spanish activity, then a lot of English activity,
and then a lot from the Dutch coming at the end of
the data set in the 1800s. So a nice visualization, I
think, as well, because you get the sense of what’s
going on at a particular point in time. A variation of this would
be to show maybe all the polylines for a year, and as you
drag the slider, you just show one year of polylines. A lot of different things
you could do with this visualization, I think, just
with the polylines and this data set with polylines. Like I said, a really
rich data set. Since you have all these points
of the voyages, nice way to use them is to plot
them as polylines. So, let’s move on. So, going back to this one. Again, another way we can
slice this data up with polylines is– so this is all the polylines
again if the slider was all the way to the right with the
visualization, couple visualizations ago. But the thing I wanted to add
to this one was events on polylines, because polylines
can actually– using the Maps API,
you can actually register events on polylines. So here, what I’ve done is, as
I mouse over what I’m doing, is I’m catching the
mouseover event. And then I’m actually
adjusting how the polyline is rendered. It gets a little dense in the
Atlantic here, but if I go over to the Pacific– so some of these polylines I
couldn’t see very well before. As I mouse over them, you
can see the entire voyage lights up. I changed the width, the width
opacity, z-index, and basically bringing it all the
way to the front so you can see the entire voyage. The other thing I did is I put
a click event on here. So if I click on it, I get
kind of an old school JavaScript alert. It shows me the index of the
voyage, the country, how many points on the polyline, and the
beginning and end of the voyage, the dates. Code for this guy– so the only real differences
on that– let’s see, you go back. I forget what visualization
I’m on. Number four already. Almost done. So, if you take a look, the
interesting points about this is these events. So I’m creating the polylines,
setting the defaults for the weight opacity and the color
and the z-index of 1. Setting everything to a
z-index of 1 kind of randomizes how they’re
displayed. I tweaked this at one point, and
I actually set the z-index to the index of the polyline,
where the polyline is in the array. And basically all the most
recent polylines, or the polylines that were– the voyagers which
were later– were actually just stacked
up on top. So, you basically saw the
Dutch pretty much all over the place. And then all the other
polylines. But by setting everybody to
the same z-index, they’re rendered a little
more randomly. This is actually for
the ClickListener. So you can see here, I’m just
using the Google Maps events AdListener, adding a
ClickListener on the line, and going through creating
an alert window. And here, I’m actually the
mouseover and mouseout, and all I’m doing is just setting
the options, stroke weight, opacity and z-index to 999, so
it [? sticks ?] up on front. And then as the mouseout,
I actually revert everything back. So just about 20 lines of
code to add this nice interactiveness to the
visualization. I put this actually in a
separate method just to take advantage of the closure
on the line. So this reference to line here
is actually the reference to the line within this
event listener. If this code was elsewhere,
things wouldn’t work quite as well. So, yeah, definitely when you’re
doing this and you want to add the event listener, it’s
kind of convenient to put these in a separate method, so
the reference to the line is consistent. And so anyway, last
visualization before we move on is Symbols and Markers. So, those symbols that we’re
talking about on the polylines– so these SVG paths– they work great on polylines,
but you can also use them as markers as well. I use them in the
exact same way. Basically, when you set up your
marker, you specify the icon, and that icon you can
control how it’s rendered or what the path is. So you can use your own custom
markers, SVG markers. And again, the nice
thing about these SVGs is they’re scalable. You can really dynamically
adjust how they’re rendered or how they look. So what I did with this one,
this visualization here, is I took the data set, and
I ordered everything. So for each voyage, I took the
departure and the arrival, so the first and the last data
point of the voyage. And I put those into an array,
sorted that array, and basically, as I move the slider
across, capturing events for a departure of a ship
or an arrival of a ship. And what that allows me to do is
build a visualization where we can see what is the relative
number of ships in voyage for each of
these countries. A little easier to show
than to explain. So as you can see, as I’m
sliding the slider or sliding the range to the right– I go to 1751– and these bubbles, or these
markers, on each of these countries is growing and
shrinking over time. It grows as a voyage leaves
for that country. It shrinks as a voyage
returns or a voyage completes for that country. So this is showing the relative
number of ships at sea for each of these
countries. As we go over time, interesting
thing about this visualization, you can see again
what we saw with some of the other visualizations
how active the UK was. We see how active Spain
becomes at some point. French activity during the
late 1700s was relatively consistent until Spain really
took off at this point. And as we keep going,
we’ll see at some point how the Dutch– oh, there we go. There’s another both bubble
coming from the UK, and then how the Dutch took over the
world in terms of trade in the late 1800s or mid
to late 1800s. So pretty straightforward
code. I actually made this
one work backwards. The hardest part with this one
was actually getting the data in a way that I could actually
use to create these bubbles, or these markers. So if we go back, take a
quick peak at the code. So here, I set up– these are the lat/longs for
each of the markers. So I’m using these for creating
the markers, creating my map, same stuff as before. So here, I’m actually
setting up the data. So I’m creating the
array of events. I used plus 1 for when a ship
is leaving and a minus 1 for when a ship returns. And that’s really convenient,
because I can just add and subtract as I [? accounted ?] these events in the array. And basically here, just
creating these markers. I created a separate class
called Marker Symbol. This just lets me capture all
these default settings in a separate JavaScript object. I could easily just have
in-lined this code up here when I’m creating the marker,
but little more convenient to put it down here. And this is the code that gets
a little bit hairy, where I’m actually sliding from left to
right picking the delta of how many ships I want to add or
remove from each country. So that’s pretty much it for
these visualizations. We’re going to continue to
play around with these. We think they’re a lot of fun. I know Brendan’s actually
looking at different ways you can use the canvas layer which
uses OpenGL, or I’m sorry, WebGL for rendering mass
amounts of data. So we think that these 245,000
points or 25,000 or so voyages is probably about the max you
can display all at once on a map using some of the
default libraries. So you could probably
tweak that. And I don’t think you always
necessarily want to do that. So, you get to the point where
there’s just too much information on a visualization
that you can– makes it a little hard. And then there’s a lot of tricks
you can use with the mouseover effects on the
polylines that kind of sort things out. But if you do really want to go
beyond that and potentially render some really custom
visualizations, the canvas layer using WebGL would
be the way to go. Hopefully we can get Brendan
back in another week or two to show off some more stuff. But he’s been working hard on
the wind data, because the wind data is a whole other
aspect of this data set, which is actually really
interesting. Some other stuff– we probably continue to play
around on these polylines, with these animations. Really cool thing with these
animations are animating the symbols on polylines, as you can
potentially plot a number of ships actually leaving, or
animate a number of ships at any one time. If you’ve been to the “More
Than A Map” site– I hope you’ve been there,
because there’s a lot of great inspiration there. They’re visualization for
flights actually shows a number of different planes
actually en route. They’re using the exact same
technique as we did with the animated ship. So, if you haven’t checked
it out, morethanamap.com. Check out the demos. And it’s a data visualization
demo. Shows a number of points on
there, or a number of symbols animated at one time. So that’s pretty much it. A couple of quick
announcements. So in next couple of weeks,
we’re going to be down in– the Maps Developer Relations
team, or some of us, will be down in Sydney. And we’re hoping to do next week
a Places API event, GDL event, where we show off some
new APIs that are coming out with the Places API. So if you’re really interested
in location data, definitely a good one. I’ve been working on a
visualization that actually uses this data, the
Place data. So, even if you’re interested
in visualizations but not local data, you might want
to check it out anyway. And a couple of weeks out, we’re
looking to potentially do something with the
Photo Sphere. Because the Photo Sphere app
that was launched with the Jellybean update recently, it
actually allows you to take 360 degree panoramic photos. Those photos are really
convenient to use for the Street View API, so you can
take a 360 degree panorama using just the fairly simple
amount code actually rendered in a website using the Street
View library API. So that’s pretty much it. So if you have any ideas, if
you want to see something a little more detail on any of
these visualizations, or you have any comments or questions,
post them on the YouTube channel, and we’ll
take a look at them. And if you have any ideas for
future things you’d like to see, also let us know, because
we’re always looking for ideas to pass on. So, thanks for tuning in, and I
hope to catch you in another week or so. [MUSIC PLAYING]

Leave a Reply

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