>> Hey, friends. It's Azure Friday.
I'm Scott Hanselman and I'm here with
Ricky Brundritt and we're talking about
visualizing data with the Azure Maps Web Control.
How are you, sir?
>> I'm doing great. The Azure Maps.
Nice powerful web service for your mapping needs.
And so we have a JavaScript map control,
uses Web GL for rendering.
>> Oh, really?
>> Yeah. And it does four client-side vector rendering.
And so we've seen in previous videos
that there are over 400 different elements
used for styling the base maps.
And with that, you know,
you can do some really powerful visualizations.
In theory, if you wanted to,
you could create a custom style that
maybe emulates the color patterns of a taco.
>> That would be nice.
I would appreciate that.
That's interesting because you know over
the years we've all seen
map controls that have been largely tiled,
generated server-side generated bitmaps.
And when you scroll in,
you see the kind of uncomfortable popping in of squares.
And they don't really scale.
And then I've had situations in the past where I've
put five or 10 pins on a map,
and I feel that it's slow.
But you're saying you're using modern browser techniques
to render these as vectors in a very performing way?
>> Correct. And with that,
we're able to render a
massive amount of data on the client
compared to the older map technologies that we have used.
So you know rendering
tens of thousands of pushpins is
not unrealistic if you wanted to do that.
And the same thing
when it comes to the polygon data as well.
And we'll take a look at that in a little bit.
Some other cool things about
the map controls is that it supports
27 languages which is
you know what you need if you are creating a global app.
>> Yep.
>> In addition to that, the map data.
So that's the most important part of
the whole map is updated weekly.
>> Seriously, weekly?
>> Weekly.
>> That's interesting because again, in
the past when I think about other map systems,
it's all rendered Bitmaps
and Tiles that are terabytes in size.
Really switching over to modern techniques
and vectors makes it better for everybody.
>> Correct. So we don't need to worry
about pre-rendering tiles and things like that.
It's because it's vector since we
make the update in the data and publish that,
it's instantly available to users.
>> I see that you're in Visual Studio
and I use Visual Studio a lot.
Is this easy for me to go and
add into my Web application?
>> Yes. And so if we take a look at Visual Studio here,
we'll see what's involved.
So, first thing you need to do is
simply add a reference to
the CSS file and
to the JavaScript file for the map control.
From there, you would
simply inside of your body of your page,
you would add a simple Div for your map.
I give it some style for sizing.
And then inside a JavaScript,
we would simply go
through and create an instance of the map,
and pass in the ID of
the Div that we want the map to render in.
We'd also pass in
the subscription key for your Azure map subscription.
If you want you can even set in the center and zoom in.
There's a ton of other options you can set as well.
If you wanted to just take this example and go a
little bit further besides rendering them out,
maybe you want to show traffic on top of that map,
it's really easy to do.
A couple lines of code you say ''map.settraffic''.
And we say, ''Okay, but we want the Internet data to
appear and we want the flow information to
appear as an absolute flow.
So there's a lot of different types
of flow data that can be rendered.
So for traffic flow, you could have
it relative to the speed limits. It could be the-
>> Oh, I see.
If it's idealized speed,
is it slower than usual, or absolute,
where it's like green or red
depending on traffic?
>> So, yeah.
Is it slow, is it faster or what have you-
So yeah, there's a lot of different
ways to kind of visualize that.
So if we actually switch in here, so here we go.
We can actually go through and see those differences.
>> There's your relative flow and everything
is green, relatively okay?
>> And then if we switch into absolute,
we can see that there's more red showing up over here.
>> Reality is that in
this case down there in Seattle not so good.
>> Yeah. And similarly,
there are some other ones such as relative to the delay.
So if you know there's
a delay but you
know how worse is it compared to the delay?
>> I'm noticing as you're moving around,
it's very kind of fluid,
and I assume you can zoom in and zoom out.
>> That's correct.
>> It's interesting when you zoomed in, zoom out,
I noticed that the Belltown neighborhood name
kind of like moved around with you.
You know it's a vector.
Look at 2nd Avenue as you zoom out and 1st Avenue.
Those words aren't tiles,
it is all vectors base. You said it was WebGL?.
>> Yes, that's correct.
>> Fantastic.
>> So, some interesting things about the traffic data
that's inside the map control
is that it's updated every five minutes.
So you know whenever you get some traffic information
it's within five minutes of the actual traffic condition.
>> That's great. So maps updated weekly
based on vectors with five-minute traffic.
That's a level of freshness
I don't think that we are used to.
>> Yeah, that's correct.
And the traffic data is available
in 55 countries as well.
>> Seriously?
>> So going forward,
another thing I wanted to show is
this monstrosity of a map.
>> Why did you do this?
>> This is more so my go for broke example.
If you wanted to render a lot
of data on the map you can do that.
So this example here is rendering
167 thousand shapes on the map.
About a third of them are polygons,
a third are pushpins and a third
are polylines or line strings.
And so there's 140 megabytes
worth of GOGs on data
being rendered on the map right here.
>> So you tried to break-
it out on the system you can see
the megabytes of data that you're loading
into it here to see if you can break this thing.
>> Exactly. That's what I wanted to do.
>> Let's see if you broke it.
>> And so we can zoom in.
As we zoom in here you can see
it's actually pretty fluid.
>> So you've added all those,
all the different waypoints,
the line strings, all the features,
hundreds of thousands of items.
>> Yeah. So we have the road lines here.
We have the addresses for the individual properties,
and then we even have the outlines for
the properties or personal boundaries.
And what's even cooler is,
even though we have all the shapes,
we can easily just click on them,
and we have events tied
into it and we can read all the
meditative for each one as well.
>> Wow.
>> And so we can quickly jump through it.
Even though we have
all this data being handled
in Web GL we were able to still have
fluid map visualizations and mouse events as well.
>> That's amazing. I would not expect at
this point with all of that stuff loaded up,
especially that it's using JavaScript that it
could be that responsive.
But the browser is working nicely.
You're zooming in and zooming out. The map is responsive.
So it can take basically anything you throw at it.
So anything that your commercial or
your Azure-based applications can handle.
>> The one question you have to ask
yourself though is where is
your data and doesn't
make sense for the user to download it
all at 140 megabytes if it's a client side.
Or if you have that data locally,
then adding it to the map
directly makes sense. It's nice and easy.
But if it's server side may be sitting in SQL Azure,
then you might want to start looking at creating
a Web service to pull in data
as needed rather than downloading the whole data.
>> And that brings up another interesting point because
you commented that you've got
all the different events that are available to you.
You could certainly if you needed
this level of data just do it on demand as they
get into that appropriate zoom level and
that does little the data that you just loaded in day.
That's fantastic. But it's nice to know
and it's comforting to know if I was going to
put this into one of my applications in
Azure that you can handle anything I throw at you.
>> Correct. So the next thing you know,
you love this map, you want to use it.
You know where do you go? You have to look at the dock.
So if you go to aka.ms/Azuremapsdocs, nice and simple.
You'll get taken to our docs page here.
And you can go through and not only do we
have you know textual content on docks,
but we actually have interactive code samples
read inside the docs and so-
>> Wow. These are live, that's not on a picture.
>> Yeah. So this is live.
So we go through here and now we are here.
So, how do you set the camera for the map?
And so if we just simply wanted to
change the zoom level to two,
we should see that the other map updates on the right.
>> Nice.
>> And so there's, as you go through
the samples get more and more
complicated to do more and more things.
But it provides you with
a nice rich environment to not only
learn by reading but also learn by
trying with Azure maps EPI.
>> Very cool. So then anyone who's
watching right now can go into portal.
Azure.com. They can set up Azure Maps,
get their subscription key,
check out the demos and then you can probably
integrate this into your own system just in days.
>> Exactly.
>> Very cool. I'm learning all about
the Azure Maps Web Control here on Azure Friday.