309.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:00.506 --> 00:00:09.666 A:middle
[ Silence ]

00:00:10.166 --> 00:00:11.176 A:middle
>> Aroon Pahwa: Good
afternoon everybody.

00:00:11.176 --> 00:00:11.516 A:middle
[ Applause ]

00:00:11.516 --> 00:00:21.216 A:middle
Thanks for coming here today to
Putting Map Kit in Perspective.

00:00:22.076 --> 00:00:24.826 A:middle
My name is Aroon Pahwa and I am
here to talk to you about some

00:00:24.826 --> 00:00:27.386 A:middle
of the new ways you can
look at Maps in iOS 7.

00:00:27.986 --> 00:00:33.556 A:middle
So last year with iOS 6 we
introduced an all new maps

00:00:33.556 --> 00:00:35.806 A:middle
application with
vector map rendering.

00:00:36.446 --> 00:00:38.486 A:middle
And along with that we
introduced a few new ways you

00:00:38.486 --> 00:00:39.526 A:middle
can interact with Maps.

00:00:39.526 --> 00:00:42.906 A:middle
We added the ability
to rotate the map,

00:00:44.006 --> 00:00:45.776 A:middle
as well as pitch
the map into 3D.

00:00:46.346 --> 00:00:47.946 A:middle
You get to see these
beautiful 3D buildings.

00:00:48.596 --> 00:00:52.126 A:middle
We also added the
ability to pan westward

00:00:52.126 --> 00:00:53.276 A:middle
across the Pacific Ocean.

00:00:53.726 --> 00:00:55.906 A:middle
You can just keep going forever
all the way around the world.

00:00:56.546 --> 00:00:59.986 A:middle
And to implement
printing support

00:00:59.986 --> 00:01:03.706 A:middle
in Maps we added the ability
to take static map snapshots.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:59.986 --> 00:01:03.706 A:middle
in Maps we added the ability
to take static map snapshots.

00:01:06.496 --> 00:01:09.226 A:middle
Now we had hundreds of millions
of users using the Maps.app

00:01:09.226 --> 00:01:12.066 A:middle
and when they left and
came to your app they found

00:01:12.066 --> 00:01:14.676 A:middle
that the Map Kit view
did not work the same.

00:01:15.696 --> 00:01:17.096 A:middle
They tried to rotate
it, it didn't work.

00:01:17.666 --> 00:01:19.326 A:middle
They tried to pitch
it and it didn't work.

00:01:19.376 --> 00:01:21.906 A:middle
And it's frustrating for them
and I'm sure it's frustrating

00:01:21.906 --> 00:01:24.026 A:middle
for you too because your
customers can't use the map the

00:01:24.026 --> 00:01:24.916 A:middle
way they do in the Maps.app.

00:01:25.966 --> 00:01:28.846 A:middle
So this year we brought all of
that to Map Kit and not only

00:01:28.846 --> 00:01:31.116 A:middle
that we brought the
whole thing to OS X.

00:01:32.536 --> 00:01:33.966 A:middle
So I'm really excited
to talk to you today

00:01:34.916 --> 00:01:37.706 A:middle
about how we make
that work in Map Kit.

00:01:38.236 --> 00:01:39.496 A:middle
So the first thing
I'm going to go

00:01:39.496 --> 00:01:43.346 A:middle
over is what do we
actually mean by 3D map?

00:01:45.196 --> 00:01:48.476 A:middle
After that I'm going to show
you how you can add perspective

00:01:48.476 --> 00:01:49.906 A:middle
views to your map.

00:01:51.196 --> 00:01:53.826 A:middle
Then I'm going to go over some
new API that we've introduced

00:01:53.826 --> 00:01:56.186 A:middle
to help you take
full advantage of 3D.

00:01:56.726 --> 00:01:59.666 A:middle
And lastly I'm going
to talk to you

00:01:59.666 --> 00:02:01.466 A:middle
about how you can
use the Snapshot API

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:01:59.666 --> 00:02:01.466 A:middle
about how you can
use the Snapshot API

00:02:01.466 --> 00:02:04.596 A:middle
that we've introduced to create
static snapshots of a map

00:02:04.746 --> 00:02:09.126 A:middle
in a preformat manner.

00:02:09.286 --> 00:02:10.455 A:middle
So what is a 3D map?

00:02:10.936 --> 00:02:13.966 A:middle
What does it mean
to call a map 3D?

00:02:14.896 --> 00:02:17.076 A:middle
When someone says map
usually they're talking

00:02:17.076 --> 00:02:18.016 A:middle
about something flat.

00:02:18.016 --> 00:02:20.416 A:middle
Maybe like a piece of paper you
roll up and put in your car.

00:02:21.006 --> 00:02:22.156 A:middle
It's got a bunch of roads on it.

00:02:23.386 --> 00:02:26.116 A:middle
So how do we take that
flat thing and make it 3D?

00:02:28.296 --> 00:02:30.616 A:middle
Well we start with the
same 2D map you're used to.

00:02:30.616 --> 00:02:31.436 A:middle
Here a picture of one.

00:02:31.436 --> 00:02:34.036 A:middle
North is at the top.

00:02:34.696 --> 00:02:38.106 A:middle
Then we add pitched
views of that map.

00:02:38.256 --> 00:02:41.226 A:middle
And on top of that now we can
add things like 3D buildings.

00:02:41.756 --> 00:02:44.276 A:middle
And the result is something

00:02:44.486 --> 00:02:46.666 A:middle
that is sometimes
referred to as 2.5D.

00:02:47.186 --> 00:02:50.426 A:middle
That's because what's really
going on here is we're looking

00:02:50.426 --> 00:02:53.936 A:middle
at the same 2D map you're used
to seeing in a 3D environment.

00:02:54.496 --> 00:02:57.576 A:middle
And that exactly how you should
conceptualize what's happening.

00:02:57.576 --> 00:02:59.386 A:middle
What we're doing is
we're looking at 2D map

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:00.046 --> 00:03:03.136 A:middle
in a 3D environment and
that allows us to move

00:03:03.136 --> 00:03:05.626 A:middle
around in a 3D environment
getting pitched views

00:03:05.626 --> 00:03:08.466 A:middle
and rotation, as well as,
putting 3D objects on top

00:03:08.466 --> 00:03:09.446 A:middle
of the map like these buildings.

00:03:09.446 --> 00:03:13.366 A:middle
So how do you get
around this new 3D map?

00:03:13.426 --> 00:03:15.666 A:middle
Well you're probably all
familiar with the Maps.app

00:03:15.666 --> 00:03:17.766 A:middle
and it works exactly
the same in Map Kit.

00:03:17.806 --> 00:03:19.766 A:middle
You can also use two
fingers to rotate the map

00:03:19.766 --> 00:03:20.686 A:middle
by rotating your fingers.

00:03:20.686 --> 00:03:22.916 A:middle
You can also use two
fingers and pan up

00:03:22.916 --> 00:03:23.846 A:middle
and down to pitch the map.

00:03:24.656 --> 00:03:28.126 A:middle
And in OS X we use all the
gestures you're used to using

00:03:28.126 --> 00:03:30.366 A:middle
with a track pad and if
you don't have a track pad

00:03:30.366 --> 00:03:32.696 A:middle
and you've got a mouse we've
added handy compass controls

00:03:32.696 --> 00:03:35.186 A:middle
and zoom controls so it's easy
to get around that way too.

00:03:36.816 --> 00:03:39.236 A:middle
And I know most of you use the
simulator to test your apps

00:03:39.236 --> 00:03:41.086 A:middle
so we've added the
ability to pitch and rotate

00:03:41.086 --> 00:03:42.166 A:middle
in the simulator, as well.

00:03:42.486 --> 00:03:44.066 A:middle
You can use these key
combinations up here,

00:03:44.066 --> 00:03:45.436 A:middle
now you can pitch and rotate.

00:03:45.836 --> 00:03:48.996 A:middle
Test your app, complete
functionality in the sim.

00:03:51.436 --> 00:03:54.886 A:middle
So how do you get these 3D
views in your Map Kit app?

00:03:56.306 --> 00:03:58.396 A:middle
It's basically three
things you need to do.

00:03:58.856 --> 00:04:01.396 A:middle
The first one is just
recompile with iOS 7 SDK.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:58.856 --> 00:04:01.396 A:middle
The first one is just
recompile with iOS 7 SDK.

00:04:01.396 --> 00:04:04.846 A:middle
You're going to find that
pitching and rotation just work.

00:04:04.846 --> 00:04:05.886 A:middle
They're on by default.

00:04:06.576 --> 00:04:09.616 A:middle
And for the most part your
app will probably just work.

00:04:09.706 --> 00:04:12.046 A:middle
But there are some changes
to the existing API behavior

00:04:12.046 --> 00:04:14.096 A:middle
that you should be aware
of and we're going to go

00:04:14.096 --> 00:04:16.166 A:middle
over the four major
areas of the MKMap API

00:04:16.166 --> 00:04:18.586 A:middle
that change a little
bit, you should be aware

00:04:18.586 --> 00:04:21.875 A:middle
of in case something
in your app breaks.

00:04:22.176 --> 00:04:25.666 A:middle
Lastly I'm going to go over a
new camera API we're introducing

00:04:25.666 --> 00:04:27.486 A:middle
that you should be
adopting in your apps

00:04:27.676 --> 00:04:28.986 A:middle
to take full advantage of 3D.

00:04:29.396 --> 00:04:32.736 A:middle
So I'm pretty sure you can
handle recompiling your app

00:04:32.736 --> 00:04:35.656 A:middle
so I'm just going to go ahead
and get started with adapting

00:04:35.656 --> 00:04:36.886 A:middle
to existing API changes.

00:04:37.986 --> 00:04:40.276 A:middle
So after you create
you MKMapView one

00:04:40.276 --> 00:04:41.796 A:middle
of the first things you're
probably doing is telling the

00:04:41.796 --> 00:04:43.786 A:middle
map what part of the world
that you want to see.

00:04:43.786 --> 00:04:46.676 A:middle
Here are the two APIs that
you're probably using.

00:04:47.076 --> 00:04:48.716 A:middle
The first one is
setVisibleMapRect

00:04:48.716 --> 00:04:50.086 A:middle
and the second one is setRegion.

00:04:50.676 --> 00:04:52.396 A:middle
Both of these take a rectangle

00:04:52.456 --> 00:04:54.106 A:middle
and tell the map
to just show it.

00:04:54.106 --> 00:04:56.666 A:middle
And this API behaves
exactly like it always has

00:04:56.666 --> 00:04:57.816 A:middle
in previous iOS releases.

00:04:58.166 --> 00:05:00.676 A:middle
It results in a 2D map
that's looking straight

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:58.166 --> 00:05:00.676 A:middle
It results in a 2D map
that's looking straight

00:05:00.676 --> 00:05:02.546 A:middle
down at the map with
no rotation.

00:05:02.546 --> 00:05:04.006 A:middle
So North is at the
top of your map view.

00:05:05.066 --> 00:05:07.646 A:middle
The difference in iOS 7
is now that we can pan

00:05:07.646 --> 00:05:09.606 A:middle
across the Pacific Ocean
it means we can pan

00:05:09.606 --> 00:05:13.716 A:middle
across the 180th Meridian;
this API will now returnRects

00:05:13.866 --> 00:05:15.916 A:middle
that span that as well, and
that's a little bit different

00:05:15.916 --> 00:05:17.136 A:middle
than in previous iOS releases.

00:05:17.136 --> 00:05:20.096 A:middle
So if you're doing math with
these rectangles that math needs

00:05:20.096 --> 00:05:22.936 A:middle
to handle a rectangle that's
spanning that meridian.

00:05:27.976 --> 00:05:31.936 A:middle
So here's an example of a
rectangle that you can now set

00:05:31.936 --> 00:05:34.236 A:middle
with these APIs that
spans the 180th meridian.

00:05:34.856 --> 00:05:36.676 A:middle
Here we have a
MKCoordinateRegion that's

00:05:36.676 --> 00:05:41.146 A:middle
looking directly at the
equator and the 108th Meridian;

00:05:41.146 --> 00:05:43.116 A:middle
that's the line that goes up
and down the Pacific Ocean.

00:05:43.346 --> 00:05:45.646 A:middle
And we have some
radius around it.

00:05:46.006 --> 00:05:48.396 A:middle
So in iOS 6 and before you would
have got an image like this

00:05:48.396 --> 00:05:49.846 A:middle
if you had tried to
set that in MKMapView.

00:05:50.386 --> 00:05:51.916 A:middle
We kind of got bumped
over and now we're looking

00:05:51.916 --> 00:05:52.966 A:middle
at North and South America.

00:05:53.746 --> 00:05:55.976 A:middle
But in iOS 7 we'll obey
the rectangle that you set

00:05:55.976 --> 00:05:57.706 A:middle
and now we're looking in the
middle of the Pacific Ocean.

00:05:57.706 --> 00:06:02.756 A:middle
Now the same two APIs
you can read from

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:57.706 --> 00:06:02.756 A:middle
Now the same two APIs
you can read from

00:06:02.756 --> 00:06:03.846 A:middle
and they'll turn a rectangle

00:06:03.846 --> 00:06:05.846 A:middle
and they behave a little
bit differently now

00:06:05.846 --> 00:06:06.536 A:middle
that we have pitching.

00:06:07.326 --> 00:06:10.346 A:middle
So here's a pitched and rotated
view of downtown San Francisco

00:06:11.126 --> 00:06:13.426 A:middle
and intuition tells me that you
can't really describe what we're

00:06:13.426 --> 00:06:14.596 A:middle
seeing here using a rectangle.

00:06:15.866 --> 00:06:16.836 A:middle
So let's see if that's true.

00:06:16.836 --> 00:06:18.606 A:middle
We can just wash
this view with blue.

00:06:19.016 --> 00:06:20.446 A:middle
Now let's zoom out
and take a look at it

00:06:20.676 --> 00:06:22.476 A:middle
and indeed it's not
a rectangle it's

00:06:22.476 --> 00:06:25.326 A:middle
like some chopped off
rectangle or triangle.

00:06:26.666 --> 00:06:29.296 A:middle
And so these APIs do the most
sensible thing they can do.

00:06:29.726 --> 00:06:32.606 A:middle
They return a rectangle that
contains the visible region.

00:06:33.476 --> 00:06:35.276 A:middle
That means it's now
an approximation

00:06:35.276 --> 00:06:38.066 A:middle
to what your map view is
showing when it's pitched.

00:06:39.296 --> 00:06:41.676 A:middle
The other difference is
they may return a rectangle

00:06:41.676 --> 00:06:44.016 A:middle
that spans 108th Meridian and
like I said you need to be able

00:06:44.016 --> 00:06:44.826 A:middle
to handle that in your app.

00:06:45.646 --> 00:06:47.876 A:middle
You may wonder, "Well what
am I going to use this thing

00:06:47.876 --> 00:06:49.706 A:middle
for if it doesn't actually
tell me what the map view

00:06:49.706 --> 00:06:50.106 A:middle
is showing?"

00:06:50.106 --> 00:06:54.156 A:middle
Well it turns out its really
easy to trim or filter the data

00:06:54.156 --> 00:06:56.106 A:middle
that you're going to show
on a map using a rectangle.

00:06:56.106 --> 00:06:57.796 A:middle
The math is very simple
and you're probably doing

00:06:57.796 --> 00:06:59.786 A:middle
that today already
if you're trying

00:06:59.786 --> 00:07:00.926 A:middle
to show a lot of
data on the map.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:59.786 --> 00:07:00.926 A:middle
to show a lot of
data on the map.

00:07:01.336 --> 00:07:04.086 A:middle
So you should continue
using this API to do that.

00:07:06.416 --> 00:07:08.396 A:middle
So there's one more
API to change what part

00:07:08.396 --> 00:07:10.116 A:middle
of the map is being
shown in your map view

00:07:10.116 --> 00:07:11.406 A:middle
and that's setCenterCoordinate.

00:07:12.356 --> 00:07:13.476 A:middle
In previous iOS releases

00:07:13.476 --> 00:07:16.866 A:middle
and in iOS 7 this returns the
coordinate that's at the center

00:07:16.866 --> 00:07:18.746 A:middle
of the screen or allows
you to set the coordinate

00:07:18.746 --> 00:07:22.036 A:middle
which should be visible at
the center of the screen.

00:07:22.036 --> 00:07:24.856 A:middle
And what that does is basically
simulate the pan gesture.

00:07:25.266 --> 00:07:28.066 A:middle
That means when you change this
property the zoom level won't

00:07:28.066 --> 00:07:31.246 A:middle
change and now on iOS 7
the rotation or the pitch

00:07:31.246 --> 00:07:32.936 A:middle
of the map won't change either.

00:07:36.086 --> 00:07:36.716 A:middle
Annotations.

00:07:37.596 --> 00:07:39.136 A:middle
The annotations are a great way

00:07:39.136 --> 00:07:40.756 A:middle
to describe a single
point on the map.

00:07:41.296 --> 00:07:44.186 A:middle
In iOS7 they're really
easy to use.

00:07:44.186 --> 00:07:45.356 A:middle
They continue to be easy to use.

00:07:45.746 --> 00:07:49.236 A:middle
That's because they stay
upright as the map rotates.

00:07:49.796 --> 00:07:53.726 A:middle
They also always face the
screen even as the map pitches.

00:07:54.116 --> 00:07:56.596 A:middle
And as you push them
into the background

00:07:56.596 --> 00:07:58.566 A:middle
when you're pitched they
always stay the same size.

00:07:59.136 --> 00:08:01.296 A:middle
To the artwork that you're
using will never be distorted

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:59.136 --> 00:08:01.296 A:middle
To the artwork that you're
using will never be distorted

00:08:01.296 --> 00:08:03.636 A:middle
and you don't have to
account for it changing size.

00:08:05.056 --> 00:08:06.046 A:middle
What's also handy is

00:08:06.046 --> 00:08:08.626 A:middle
that annotation views
always track the map.

00:08:08.626 --> 00:08:11.976 A:middle
That means as your user is
panning the map the annotation

00:08:11.976 --> 00:08:14.636 A:middle
view will be updated to
stay in the same position.

00:08:15.306 --> 00:08:18.126 A:middle
That means if you have
some UI that you want

00:08:18.226 --> 00:08:21.356 A:middle
to follow the map you should
try to add that as a sub-view

00:08:21.356 --> 00:08:23.436 A:middle
of the annotation view, or
just map it an annotation view

00:08:23.436 --> 00:08:24.516 A:middle
if that seems appropriate.

00:08:25.646 --> 00:08:28.886 A:middle
If you try to approximate
the way the map is moving

00:08:29.186 --> 00:08:31.426 A:middle
by capturing a gesture
recognizer

00:08:31.426 --> 00:08:32.796 A:middle
and overlaying your UI on top

00:08:32.796 --> 00:08:34.466 A:middle
of the map it's just not
going to work anymore.

00:08:35.256 --> 00:08:37.586 A:middle
When you pitch the
transformation is non-linear

00:08:37.586 --> 00:08:40.246 A:middle
so you can't kind
of interpolate that.

00:08:42.476 --> 00:08:45.076 A:middle
So in iOS annotation
views are still UIViews.

00:08:45.076 --> 00:08:46.756 A:middle
There's no changes there
so all the customization

00:08:46.756 --> 00:08:48.146 A:middle
that you're used to
doing continues to work.

00:08:48.146 --> 00:08:50.806 A:middle
And in iOS X we've
introduced them as NSViews

00:08:50.806 --> 00:08:52.086 A:middle
so if you're familiar

00:08:52.086 --> 00:08:54.696 A:middle
with NSViews you can use
annotation views right

00:08:54.696 --> 00:08:58.246 A:middle
out of the box.

00:08:58.406 --> 00:09:00.046 A:middle
There's a few small
changes to overlays.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:58.406 --> 00:09:00.046 A:middle
There's a few small
changes to overlays.

00:09:01.726 --> 00:09:04.146 A:middle
Overlays now take the
shortest path across the maps.

00:09:04.146 --> 00:09:07.576 A:middle
So if you have a polyline
and you give it two points;

00:09:07.576 --> 00:09:09.716 A:middle
one here in Los Angeles
and the other in Tokyo.

00:09:10.516 --> 00:09:11.746 A:middle
In previous iOS releases

00:09:11.746 --> 00:09:14.636 A:middle
that would have drawn a line
all the way across the U.S. then

00:09:14.636 --> 00:09:18.106 A:middle
across the Atlantic,
Africa, India, then China

00:09:18.326 --> 00:09:19.766 A:middle
and now finally on to Tokyo.

00:09:20.566 --> 00:09:21.926 A:middle
That doesn't really
make that much sense.

00:09:21.926 --> 00:09:24.916 A:middle
And now that we can look across
the Pacific Ocean we'll now draw

00:09:24.916 --> 00:09:26.336 A:middle
that polyline over
the Pacific Ocean.

00:09:27.066 --> 00:09:30.236 A:middle
In red what you're seeing here
is the new MKGeodesicPolyline

00:09:30.476 --> 00:09:32.446 A:middle
and those behave just
like normal polylines.

00:09:32.446 --> 00:09:33.686 A:middle
They're going to take
the short path, as well.

00:09:33.686 --> 00:09:38.446 A:middle
The other thing to note is
now that we have 3D buildings

00:09:39.576 --> 00:09:42.106 A:middle
when you pitch a view if there
are 3D buildings available those

00:09:42.106 --> 00:09:44.106 A:middle
are going to occlude
your overlays.

00:09:45.476 --> 00:09:46.436 A:middle
That's just something
to be aware of.

00:09:46.436 --> 00:09:48.176 A:middle
If you're presenting data that
doesn't really make sense,

00:09:48.176 --> 00:09:49.366 A:middle
if it's partially occluded,

00:09:49.946 --> 00:09:51.446 A:middle
something you should
be aware of.

00:09:54.676 --> 00:09:58.516 A:middle
So in the Maps.app we have
this feature; if you long press

00:09:58.516 --> 00:10:00.416 A:middle
on the map a purple
pins going to drop.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:09:58.516 --> 00:10:00.416 A:middle
on the map a purple
pins going to drop.

00:10:01.026 --> 00:10:02.716 A:middle
And that's really
handy for figuring

00:10:02.716 --> 00:10:05.026 A:middle
out what a random
address is on the map.

00:10:05.026 --> 00:10:07.446 A:middle
You can place it over a house
and you'll see the address

00:10:07.446 --> 00:10:08.246 A:middle
that that house is at.

00:10:09.596 --> 00:10:12.766 A:middle
Well to implement that the
Maps.app uses this first API I

00:10:12.766 --> 00:10:13.266 A:middle
listed here.

00:10:14.046 --> 00:10:16.006 A:middle
Convert point to
coordinate from view.

00:10:16.736 --> 00:10:18.806 A:middle
We take the point where the
user rested their finger

00:10:18.806 --> 00:10:21.186 A:middle
and we convert that into
a coordinate in the map.

00:10:22.046 --> 00:10:23.446 A:middle
From there you can
make an annotation

00:10:23.536 --> 00:10:24.796 A:middle
and drop an annotation
view on the map.

00:10:25.996 --> 00:10:28.706 A:middle
These other APIs are useful
for similar kinds of features.

00:10:30.236 --> 00:10:31.836 A:middle
Now in this image here
we can see the sky

00:10:31.836 --> 00:10:33.606 A:middle
and if the user places
their finger there

00:10:33.606 --> 00:10:34.866 A:middle
and long presses well,

00:10:35.656 --> 00:10:37.726 A:middle
what coordinate represents
a point of the sky?

00:10:37.796 --> 00:10:38.316 A:middle
There isn't one.

00:10:39.346 --> 00:10:42.296 A:middle
And so these APIs now have
to somehow indicate that.

00:10:42.866 --> 00:10:44.946 A:middle
Which means they can
return invalid values now

00:10:44.946 --> 00:10:46.216 A:middle
and that's something that
you have to be aware of.

00:10:47.666 --> 00:10:49.846 A:middle
So if you're using these
APIs be sure to check

00:10:49.846 --> 00:10:50.886 A:middle
for these invalid values.

00:10:51.856 --> 00:10:53.016 A:middle
Anywhere there's
a coordinate check

00:10:53.016 --> 00:10:56.616 A:middle
for KCLLocationCoordinate2D,
that's a mouth full.

00:10:58.006 --> 00:11:00.636 A:middle
And if there's a rectangle
involved check for CGRectNull.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:58.006 --> 00:11:00.636 A:middle
And if there's a rectangle
involved check for CGRectNull.

00:11:01.036 --> 00:11:03.436 A:middle
It's an indication that we
just couldn't do the conversion

00:11:04.026 --> 00:11:06.016 A:middle
and so you can probably just
handle that by returning.

00:11:06.606 --> 00:11:12.466 A:middle
So that's all the
API behavior changes.

00:11:13.956 --> 00:11:14.716 A:middle
There wasn't much.

00:11:15.156 --> 00:11:17.786 A:middle
If you recompile your app and
you test it you're going to find

00:11:17.786 --> 00:11:19.166 A:middle
that it's mostly compatible.

00:11:19.726 --> 00:11:21.926 A:middle
Most of the ways people are
using Map Kit just continue

00:11:21.926 --> 00:11:22.296 A:middle
to work.

00:11:22.296 --> 00:11:24.616 A:middle
You don't really have
to think about it.

00:11:24.706 --> 00:11:26.326 A:middle
One thing that is
important to note is

00:11:26.326 --> 00:11:28.516 A:middle
that annotations track the map.

00:11:28.516 --> 00:11:30.606 A:middle
Annotation view moves
with the map.

00:11:30.606 --> 00:11:33.236 A:middle
And that's the only reliable
way to get that behavior.

00:11:34.356 --> 00:11:35.646 A:middle
So if you have some
UI that needs

00:11:35.646 --> 00:11:37.686 A:middle
to track the map use
annotation views.

00:11:38.226 --> 00:11:42.066 A:middle
The other thing to note is
that overlays like polylines

00:11:42.066 --> 00:11:43.956 A:middle
and polygons will now
cross the Pacific Ocean

00:11:43.956 --> 00:11:45.306 A:middle
when it makes sense.

00:11:46.436 --> 00:11:47.726 A:middle
And lastly if you're using any

00:11:47.726 --> 00:11:50.566 A:middle
of those geometry conversion
APIs just search in your code

00:11:50.566 --> 00:11:53.176 A:middle
for those and make sure you're
checking for invalid values

00:11:54.336 --> 00:11:54.916 A:middle
that come out of there.

00:11:54.966 --> 00:12:01.006 A:middle
So that's the existing API.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:11:54.966 --> 00:12:01.006 A:middle
So that's the existing API.

00:12:01.006 --> 00:12:05.626 A:middle
Now I want to talk about a new
API we've introduced called

00:12:05.626 --> 00:12:08.896 A:middle
MKMapCamera that'll help you
take full advantage of 3D.

00:12:09.506 --> 00:12:15.276 A:middle
To understand what a
map camera is it'll help

00:12:15.276 --> 00:12:17.166 A:middle
to understand the coordinate
system that we're operating in.

00:12:18.136 --> 00:12:19.576 A:middle
Here we see a map that
you're used to seeing.

00:12:19.816 --> 00:12:22.766 A:middle
It's North at the top, South
at the bottom, West on the left

00:12:22.846 --> 00:12:23.586 A:middle
and East on the right.

00:12:23.586 --> 00:12:26.986 A:middle
And this is a 2D
coordinate system composed

00:12:26.986 --> 00:12:28.496 A:middle
of an X-axis and a Y-axis.

00:12:28.526 --> 00:12:30.296 A:middle
This is your high
school algebra.

00:12:30.896 --> 00:12:35.296 A:middle
And when we introduce 3D we're
really introducing a third axis,

00:12:35.296 --> 00:12:37.186 A:middle
a Z-axis that's coming
out of the maps.

00:12:37.186 --> 00:12:39.626 A:middle
So like I said before
that 2D map still exists.

00:12:39.626 --> 00:12:41.406 A:middle
There it is sitting at Z=0.

00:12:42.796 --> 00:12:45.096 A:middle
And now we can talk about how
we position a camera inside

00:12:45.096 --> 00:12:46.426 A:middle
of this 3D map.

00:12:48.196 --> 00:12:50.356 A:middle
So our camera is made up
of four basic properties.

00:12:50.846 --> 00:12:52.836 A:middle
The first property is
a center coordinate.

00:12:53.146 --> 00:12:56.176 A:middle
That's a latitude and longitude
that is positioned on the ground

00:12:56.546 --> 00:12:59.456 A:middle
and it's just like the center
coordinate API on MKMapView.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:00.236 --> 00:13:02.216 A:middle
So it's the point
that you want to see

00:13:02.216 --> 00:13:03.106 A:middle
at the center of the screen.

00:13:03.676 --> 00:13:07.136 A:middle
The second property
is an altitude.

00:13:07.826 --> 00:13:09.846 A:middle
That describes how
high above the map

00:13:09.846 --> 00:13:12.586 A:middle
in meters you want
your camera to float.

00:13:14.256 --> 00:13:15.746 A:middle
Third property is heading.

00:13:16.556 --> 00:13:19.506 A:middle
That's the cardinal direction
in which the camera faces.

00:13:19.506 --> 00:13:22.666 A:middle
So is you set that to zero North
will be at the top of your map,

00:13:22.666 --> 00:13:25.856 A:middle
and if you set it to 180 South
will be at the top of your map.

00:13:26.346 --> 00:13:28.786 A:middle
And that's basically a rotation

00:13:28.786 --> 00:13:30.246 A:middle
around that Z-axis
we introduced.

00:13:30.696 --> 00:13:34.136 A:middle
And the last property is pitch.

00:13:34.636 --> 00:13:36.486 A:middle
That describes where the
camera is looking relative

00:13:36.486 --> 00:13:36.996 A:middle
to the ground.

00:13:36.996 --> 00:13:39.686 A:middle
So if you set that to zero the
camera's going to look straight

00:13:39.686 --> 00:13:41.546 A:middle
down and you're going to
get a normal map you're used

00:13:41.546 --> 00:13:44.576 A:middle
to seeing, and as you increase
that value you're going

00:13:44.576 --> 00:13:46.176 A:middle
to look more and more
towards the horizon.

00:13:47.106 --> 00:13:49.376 A:middle
Now there are some pitches
that just don't make sense.

00:13:49.376 --> 00:13:51.116 A:middle
Like it doesn't make sense to
look straight up at the sky.

00:13:51.556 --> 00:13:53.126 A:middle
User's not going to know
how to get out of that view

00:13:53.126 --> 00:13:53.916 A:middle
and look back at the map.

00:13:53.916 --> 00:13:57.466 A:middle
So Map Kit is smart and
it just clamps that value

00:13:57.466 --> 00:13:58.506 A:middle
to something reasonable for you.

00:13:58.506 --> 00:14:05.226 A:middle
So here's the interfacing
code of the four properties

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:58.506 --> 00:14:05.226 A:middle
So here's the interfacing
code of the four properties

00:14:05.226 --> 00:14:06.676 A:middle
that I just described;
center coordinate,

00:14:06.676 --> 00:14:07.946 A:middle
altitude, heading, and pitch.

00:14:08.476 --> 00:14:11.406 A:middle
And we also have a
convenience constructor

00:14:11.406 --> 00:14:13.396 A:middle
that because sometimes these
four properties aren't the

00:14:13.396 --> 00:14:14.226 A:middle
easiest things to work with.

00:14:14.226 --> 00:14:15.926 A:middle
It takes a lot of
math to convert

00:14:15.926 --> 00:14:17.726 A:middle
from the way you're thinking
about placing the camera

00:14:18.226 --> 00:14:19.226 A:middle
into these four properties.

00:14:19.816 --> 00:14:21.986 A:middle
So I want to introduce one
more way of thinking about how

00:14:21.986 --> 00:14:22.846 A:middle
to position the camera.

00:14:24.016 --> 00:14:26.836 A:middle
You might think about the point
that you want to look at that's

00:14:26.836 --> 00:14:29.146 A:middle
on the ground, and
you might think

00:14:29.146 --> 00:14:32.176 A:middle
about positioning the camera
at another location on the map

00:14:32.456 --> 00:14:33.486 A:middle
with a latitude and longitude.

00:14:34.286 --> 00:14:36.316 A:middle
And then you might think
about raising that camera

00:14:36.316 --> 00:14:38.886 A:middle
up off the ground from
an altitude and looking

00:14:38.886 --> 00:14:40.896 A:middle
at that other point
in the ground.

00:14:41.456 --> 00:14:44.426 A:middle
Well given those three
properties Map Kit can compute a

00:14:44.426 --> 00:14:46.936 A:middle
camera for you and so we
introduced this convenience

00:14:46.936 --> 00:14:50.956 A:middle
constructor which
does the work for you.

00:14:50.956 --> 00:14:55.536 A:middle
You chose the ground point, you
chose the point where you want

00:14:55.536 --> 00:14:57.976 A:middle
to look from and
you pass that all

00:14:57.976 --> 00:14:58.916 A:middle
through the convenience
constructor.

00:14:58.916 --> 00:15:00.956 A:middle
Camera looking at center
coordinate give it the

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:58.916 --> 00:15:00.956 A:middle
Camera looking at center
coordinate give it the

00:15:00.956 --> 00:15:01.426 A:middle
ground point.

00:15:02.056 --> 00:15:03.866 A:middle
From EyeCoordinate; that's
the point on the ground

00:15:03.866 --> 00:15:06.836 A:middle
that you want to look from and
then you choose an altitude.

00:15:06.836 --> 00:15:08.076 A:middle
Here I'm choosing 100 meters.

00:15:09.416 --> 00:15:10.956 A:middle
Now that I have a camera
I can simply set it

00:15:10.956 --> 00:15:12.726 A:middle
on my map using the
set camera method.

00:15:13.736 --> 00:15:16.306 A:middle
And with that you can create
an image like this pitched view

00:15:16.306 --> 00:15:17.156 A:middle
of the Statue of Liberty.

00:15:17.656 --> 00:15:24.566 A:middle
[ Applause ]

00:15:25.066 --> 00:15:28.126 A:middle
So there's one thing
that you definitely want

00:15:28.126 --> 00:15:30.416 A:middle
to be using MKMapCamera
for and that's saving

00:15:30.416 --> 00:15:32.306 A:middle
and restoring the
state of your map view.

00:15:33.646 --> 00:15:34.686 A:middle
When users leave your app

00:15:34.686 --> 00:15:36.026 A:middle
and then they come
back they really want

00:15:36.026 --> 00:15:38.206 A:middle
to be seeing exactly
what they left.

00:15:39.006 --> 00:15:40.656 A:middle
And so MKMapCamera
makes that really easy

00:15:40.656 --> 00:15:42.476 A:middle
by implementing NSSecureCoding.

00:15:43.686 --> 00:15:45.326 A:middle
Here's a couple examples
of how to use it.

00:15:45.326 --> 00:15:48.246 A:middle
First is saving state the
last is restoring state.

00:15:48.606 --> 00:15:51.326 A:middle
This is saving.

00:15:51.326 --> 00:15:53.416 A:middle
You can use any archiver
you have

00:15:53.416 --> 00:15:54.966 A:middle
but here I'm using
NSKeyedArchiver

00:15:54.966 --> 00:15:56.996 A:middle
and saving the camera
off to a file.

00:15:56.996 --> 00:16:00.116 A:middle
And then to restore it its
one line of code again.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:15:56.996 --> 00:16:00.116 A:middle
And then to restore it its
one line of code again.

00:16:01.276 --> 00:16:03.646 A:middle
Use unarchiveObjectFromFile:
from that same file

00:16:03.646 --> 00:16:05.226 A:middle
and now I get my
MKMapCamera back.

00:16:05.846 --> 00:16:06.986 A:middle
So you can use this again

00:16:06.986 --> 00:16:09.596 A:middle
with any archiver you have
including the state restoration

00:16:09.656 --> 00:16:11.906 A:middle
APIs in UI kit.

00:16:17.076 --> 00:16:19.596 A:middle
That's exactly the
same API on OS X.

00:16:20.376 --> 00:16:22.136 A:middle
So you don't have to
learn anything else.

00:16:22.926 --> 00:16:23.886 A:middle
That's it.

00:16:24.386 --> 00:16:29.876 A:middle
[ Applause ]

00:16:30.376 --> 00:16:32.956 A:middle
So with that I want to show
you an example of MKMapCamera

00:16:32.956 --> 00:16:34.666 A:middle
in action just so we
can understand how those

00:16:34.666 --> 00:16:35.276 A:middle
properties work.

00:16:35.276 --> 00:16:38.026 A:middle
And after that I want to show
you how you can use MKMapCamera

00:16:38.026 --> 00:16:39.446 A:middle
to add a little bit
of flare to your app.

00:16:40.006 --> 00:16:41.506 A:middle
So I have a very
simple app here.

00:16:41.506 --> 00:16:42.686 A:middle
It's just a map view
in a window.

00:16:42.686 --> 00:16:45.306 A:middle
And what I'm doing
is I'm setting it up

00:16:45.306 --> 00:16:48.746 A:middle
and then anytime
the map moves --

00:16:48.746 --> 00:16:51.036 A:middle
I'm just going to update another
window that's showing the

00:16:51.036 --> 00:16:51.766 A:middle
properties of the map.

00:16:51.766 --> 00:16:53.516 A:middle
And the way I'm doing
this is by looking

00:16:53.516 --> 00:16:54.646 A:middle
at the description
of the camera.

00:16:54.646 --> 00:16:57.176 A:middle
So if you're trying to debug
your app this is a great way

00:16:57.176 --> 00:16:57.676 A:middle
to do that.

00:16:57.676 --> 00:16:59.426 A:middle
If you think you're
setting the camera correctly

00:16:59.426 --> 00:17:01.496 A:middle
and it's not showing what you
want just get the description

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:59.426 --> 00:17:01.496 A:middle
and it's not showing what you
want just get the description

00:17:01.496 --> 00:17:02.436 A:middle
from the camera and it's going

00:17:02.436 --> 00:17:04.076 A:middle
to show you all the
properties of the camera.

00:17:04.205 --> 00:17:11.076 A:middle
So, let's run this
-- here we go,

00:17:11.076 --> 00:17:12.846 A:middle
Xcode has moved the
window to the back.

00:17:13.256 --> 00:17:17.016 A:middle
Okay. So here we are
looking at Moscone

00:17:17.806 --> 00:17:21.965 A:middle
and as I pan the map you can see
the center coordinates changing.

00:17:22.175 --> 00:17:22.796 A:middle
It's updating.

00:17:23.356 --> 00:17:29.416 A:middle
Okay. As I pitch the
map you can see now

00:17:29.416 --> 00:17:30.146 A:middle
where the pitch is at zero.

00:17:30.146 --> 00:17:31.706 A:middle
That means that we're looking
straight down at the map

00:17:32.406 --> 00:17:35.446 A:middle
and as I increase my
pitch it's reflected here

00:17:35.446 --> 00:17:36.076 A:middle
in the description.

00:17:36.076 --> 00:17:37.196 A:middle
Now we're at 57 degrees.

00:17:37.446 --> 00:17:39.336 A:middle
And this maximum amount
of pitch you can see

00:17:39.336 --> 00:17:41.266 A:middle
as I pitched it kind of bumps.

00:17:41.456 --> 00:17:42.506 A:middle
Now I'm at a maximum pitch.

00:17:43.026 --> 00:17:44.416 A:middle
As I zoom in that changes.

00:17:45.006 --> 00:17:47.156 A:middle
So now let's pitch some more.

00:17:47.966 --> 00:17:49.086 A:middle
Now I'm at 69 degrees.

00:17:49.546 --> 00:17:51.606 A:middle
So this is that kind of
limiting I was talking about.

00:17:53.666 --> 00:17:56.306 A:middle
Now, I'm using a gesture here to
rotate the map and you can see

00:17:56.306 --> 00:17:57.886 A:middle
that the heading is changing.

00:17:58.056 --> 00:17:59.416 A:middle
So we're going toward South,

00:17:59.416 --> 00:18:01.166 A:middle
it's getting closer
to 180 degrees.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:59.416 --> 00:18:01.166 A:middle
it's getting closer
to 180 degrees.

00:18:01.166 --> 00:18:04.486 A:middle
Now I'm going to use
these zoom controls here.

00:18:04.486 --> 00:18:05.366 A:middle
Let me pitch out.

00:18:06.096 --> 00:18:08.326 A:middle
Use these zoom controls
to zoom in and zoom out,

00:18:08.326 --> 00:18:09.666 A:middle
and you can see the
altitudes changing.

00:18:09.936 --> 00:18:12.726 A:middle
And what I want you to notice
here is that as I zoom in

00:18:12.726 --> 00:18:15.886 A:middle
and zoom out by one zoom level
the altitude is roughly doubling

00:18:15.886 --> 00:18:16.386 A:middle
or halving.

00:18:17.816 --> 00:18:20.996 A:middle
And so you can use that in your
app to also reproduce zooming in

00:18:20.996 --> 00:18:24.716 A:middle
and out by one zoom level just
half or double your altitude

00:18:24.716 --> 00:18:28.096 A:middle
as appropriate and you'll
simulate zoom in and zoom

00:18:28.096 --> 00:18:29.346 A:middle
out by one zoom level.

00:18:29.776 --> 00:18:32.246 A:middle
Okay, so those are
the properties

00:18:32.246 --> 00:18:33.416 A:middle
of MKMapCamera in action.

00:18:33.666 --> 00:18:34.186 A:middle
Pretty simple.

00:18:35.266 --> 00:18:39.176 A:middle
Now let's take a look at
how we can use MKMapCamera

00:18:39.176 --> 00:18:42.796 A:middle
to make your app a little more
interesting when you're trying

00:18:42.796 --> 00:18:43.776 A:middle
to move the map around.

00:18:44.896 --> 00:18:48.066 A:middle
So here I have an app
that just does a search

00:18:48.066 --> 00:18:49.106 A:middle
and shows the result for it.

00:18:49.236 --> 00:18:51.676 A:middle
So let's just run this and
see what it looks like.

00:18:52.316 --> 00:18:57.756 A:middle
Okay here we are in Moscone
and I've got a search box.

00:18:58.166 --> 00:19:00.966 A:middle
Let's go to a park nearby
called Golden Gate Park,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:18:58.166 --> 00:19:00.966 A:middle
Let's go to a park nearby
called Golden Gate Park,

00:19:02.686 --> 00:19:04.746 A:middle
search for that and great.

00:19:04.746 --> 00:19:06.126 A:middle
So I saw it, the search worked.

00:19:06.606 --> 00:19:09.046 A:middle
The map view took me
there but you know

00:19:09.046 --> 00:19:11.886 A:middle
that transition wasn't
doing a lot for me.

00:19:12.536 --> 00:19:14.226 A:middle
You know I can't really
tell what's happening.

00:19:14.226 --> 00:19:16.586 A:middle
Where am I going and
how do I get there

00:19:16.586 --> 00:19:19.326 A:middle
and where is Golden Gate Park
relative to Moscone West?

00:19:19.326 --> 00:19:19.876 A:middle
I have no idea.

00:19:20.286 --> 00:19:24.326 A:middle
So let's look at our code
and see what's going on.

00:19:25.156 --> 00:19:27.526 A:middle
So after I finish the search
I'm taking the top result

00:19:27.526 --> 00:19:29.186 A:middle
and I'm adding an
annotation to the map

00:19:29.186 --> 00:19:31.086 A:middle
that represents that
search result.

00:19:31.086 --> 00:19:33.976 A:middle
And then I'm using this
new API that we introduced

00:19:33.976 --> 00:19:37.066 A:middle
in iOS 7 called show Annotations
which is just going to show

00:19:37.066 --> 00:19:38.176 A:middle
that annotation on the map.

00:19:38.176 --> 00:19:40.596 A:middle
And so it's clearly
a no frills animation

00:19:40.596 --> 00:19:42.006 A:middle
when I say animated yes.

00:19:42.406 --> 00:19:43.416 A:middle
It just kind of took me there.

00:19:44.536 --> 00:19:47.076 A:middle
So what I'd like to do is see
how I can make this a little bit

00:19:47.076 --> 00:19:47.876 A:middle
better for my users.

00:19:47.876 --> 00:19:51.466 A:middle
What I want to do is implement
a bit of a two stage hop.

00:19:51.466 --> 00:19:53.306 A:middle
So I want the camera
to kind of lift out.

00:19:53.746 --> 00:19:55.676 A:middle
Maybe I'll have it look
at where we're going to go

00:19:55.676 --> 00:19:56.646 A:middle
and then zoom into there.

00:19:57.256 --> 00:20:00.266 A:middle
And you know what, I want to
add a little bit of pitch too

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:19:57.256 --> 00:20:00.266 A:middle
And you know what, I want to
add a little bit of pitch too

00:20:00.266 --> 00:20:03.116 A:middle
because I want the user to
see 3D buildings and want them

00:20:03.116 --> 00:20:04.106 A:middle
to just think it's really cool.

00:20:04.906 --> 00:20:07.106 A:middle
So how am I going to do this?

00:20:08.536 --> 00:20:10.886 A:middle
Well the first thing is I
need some infrastructure

00:20:10.886 --> 00:20:13.326 A:middle
to help me animate
through a series of cameras

00:20:13.326 --> 00:20:18.646 A:middle
so let's write that code.

00:20:18.736 --> 00:20:19.106 A:middle
All right.

00:20:19.106 --> 00:20:20.966 A:middle
Let me get my notes up.

00:20:22.566 --> 00:20:26.466 A:middle
Okay. It's really
easy to write code

00:20:26.466 --> 00:20:27.456 A:middle
when you can just
drag it in [laughter].

00:20:29.366 --> 00:20:31.536 A:middle
Okay, so I have a method
here called go to next camera

00:20:32.136 --> 00:20:34.936 A:middle
and as the name implies it's
going to go to the next camera

00:20:34.936 --> 00:20:38.606 A:middle
in the stack of cameras
I've created that are

00:20:38.606 --> 00:20:41.576 A:middle
at key intervals between
the start position

00:20:42.136 --> 00:20:42.996 A:middle
and an end position.

00:20:44.046 --> 00:20:46.406 A:middle
So this method proceeds
as you may expect.

00:20:46.666 --> 00:20:48.076 A:middle
If there's nothing left
on the stack we know

00:20:48.076 --> 00:20:49.916 A:middle
that we're done animating
and so we simply return.

00:20:51.536 --> 00:20:54.836 A:middle
Otherwise we pop the next camera
off of our stack and now we know

00:20:54.836 --> 00:20:56.266 A:middle
that we want to animate
to that camera.

00:20:57.386 --> 00:20:59.246 A:middle
And so here what we're seeing
is we're using the built

00:20:59.246 --> 00:21:01.086 A:middle
in animation APIs
on our platform --

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:59.246 --> 00:21:01.086 A:middle
in animation APIs
on our platform --

00:21:01.086 --> 00:21:03.416 A:middle
on OS X that's
NSAnimationContext --

00:21:04.016 --> 00:21:05.176 A:middle
to animate to the next camera.

00:21:05.176 --> 00:21:07.636 A:middle
And the reason I can do that is
because the set camera method

00:21:07.636 --> 00:21:09.436 A:middle
on MKMapView is animatable.

00:21:10.496 --> 00:21:12.836 A:middle
And so I create my
NSAnimationContext

00:21:12.836 --> 00:21:14.036 A:middle
and I say run animation group.

00:21:14.036 --> 00:21:15.456 A:middle
That thing has a
block that comes back

00:21:15.456 --> 00:21:17.366 A:middle
with an NSAnimationContext
object.

00:21:18.066 --> 00:21:20.016 A:middle
And on that context
object I can tweak it.

00:21:20.016 --> 00:21:21.646 A:middle
So I can tell it
a custom duration

00:21:21.646 --> 00:21:25.566 A:middle
which I can compute based
on the transition I'm making

00:21:26.366 --> 00:21:28.206 A:middle
and I can also choose
a timing function

00:21:28.206 --> 00:21:29.656 A:middle
and here I'm using
ease in/ease out.

00:21:30.926 --> 00:21:32.946 A:middle
Now I have to be
sure to select --

00:21:32.946 --> 00:21:36.456 A:middle
to change allowed implicit
animation to yes to let the map

00:21:36.456 --> 00:21:39.546 A:middle
in map view know that it
can pick up this animation

00:21:39.546 --> 00:21:40.876 A:middle
and animate that camera change.

00:21:40.876 --> 00:21:43.686 A:middle
So if you leave that out the
camera change won't animate.

00:21:44.026 --> 00:21:47.066 A:middle
So just set that to yes.

00:21:47.676 --> 00:21:49.506 A:middle
Okay now that I fired
off this animation to go

00:21:49.506 --> 00:21:50.666 A:middle
to the next camera
I need to know

00:21:50.666 --> 00:21:53.686 A:middle
when that animation completes
so that I can then animate

00:21:53.686 --> 00:21:54.946 A:middle
to the next camera in our stack.

00:21:55.756 --> 00:21:57.936 A:middle
Well you might think of using
the completion handler here

00:21:57.936 --> 00:21:59.706 A:middle
but it's going to trip you up.

00:21:59.706 --> 00:22:00.236 A:middle
I know it will.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:59.706 --> 00:22:00.236 A:middle
I know it will.

00:22:00.916 --> 00:22:02.326 A:middle
Don't use that completion
handler.

00:22:02.326 --> 00:22:06.166 A:middle
Instead you need to use
MKMapViews delegate method

00:22:06.296 --> 00:22:08.436 A:middle
which tells you when a
region change is completed.

00:22:09.336 --> 00:22:13.926 A:middle
So let's drag in that API here.

00:22:14.406 --> 00:22:16.726 A:middle
Drag it. Okay.

00:22:17.176 --> 00:22:19.316 A:middle
That's map view region
did change animated,

00:22:19.776 --> 00:22:22.226 A:middle
and this gets called anytime
a region change completes.

00:22:22.226 --> 00:22:23.676 A:middle
So even when the user interacts

00:22:23.676 --> 00:22:25.236 A:middle
with the map this
method gets called.

00:22:25.236 --> 00:22:27.416 A:middle
But when the user
interacts with the map,

00:22:27.416 --> 00:22:28.646 A:middle
the animated flags
going to be no.

00:22:29.616 --> 00:22:31.796 A:middle
So we can use that flag
to tell if we're animating

00:22:31.796 --> 00:22:33.296 A:middle
or if the user's been
interacting with our map.

00:22:33.296 --> 00:22:35.876 A:middle
So I just checked if we're
animated then go ahead

00:22:35.876 --> 00:22:36.836 A:middle
and go to our next camera.

00:22:37.476 --> 00:22:42.546 A:middle
Okay. Now that we have the
infrastructure in place

00:22:42.546 --> 00:22:44.516 A:middle
to animate between a series
of cameras we're ready

00:22:44.516 --> 00:22:46.336 A:middle
to implement a particular
animation.

00:22:46.466 --> 00:22:49.126 A:middle
So let's implement the
hop we were talking about.

00:22:49.126 --> 00:22:53.586 A:middle
I'm going to implement a
method called go to coordinate.

00:22:53.586 --> 00:22:55.316 A:middle
The reason is we're
doing a search,

00:22:55.956 --> 00:22:57.736 A:middle
we're picking the top
result off that search

00:22:57.736 --> 00:23:00.416 A:middle
and that search result lives at
a coordinate and we just want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:22:57.736 --> 00:23:00.416 A:middle
and that search result lives at
a coordinate and we just want

00:23:00.416 --> 00:23:01.396 A:middle
to go look at that coordinate.

00:23:02.376 --> 00:23:03.946 A:middle
Okay. So the first
step here is to figure

00:23:03.946 --> 00:23:06.146 A:middle
out where we want to go.

00:23:07.036 --> 00:23:08.476 A:middle
I'm choosing a camera
that's looking

00:23:08.476 --> 00:23:13.116 A:middle
at our search result coordinate
from directly above it

00:23:13.676 --> 00:23:16.266 A:middle
at a height of 500 meters.

00:23:17.466 --> 00:23:19.536 A:middle
And then what I'm doing
is I'm modifying the pitch

00:23:20.136 --> 00:23:21.026 A:middle
to 55 degrees.

00:23:21.026 --> 00:23:22.946 A:middle
So now we'll be tilted
a little bit,

00:23:22.946 --> 00:23:24.586 A:middle
we'll be able to
see 3D buildings.

00:23:25.136 --> 00:23:27.726 A:middle
Okay, what's next?

00:23:27.896 --> 00:23:29.626 A:middle
Well I said we wanted
to do a two-stage hop

00:23:29.626 --> 00:23:33.856 A:middle
so zoom out, stop, zoom in.

00:23:33.966 --> 00:23:36.046 A:middle
So I need to find a
mid-point between the start

00:23:36.046 --> 00:23:37.956 A:middle
and end coordinate
to animate to.

00:23:38.366 --> 00:23:39.816 A:middle
So here I am I do a
little bit of math.

00:23:40.546 --> 00:23:42.536 A:middle
Okay. I take our starting
point and our ending point

00:23:42.536 --> 00:23:44.226 A:middle
and I find the average
point in the middle.

00:23:45.056 --> 00:23:48.636 A:middle
I convert that to a coordinate.

00:23:49.156 --> 00:23:53.416 A:middle
And then I pick some
arbitrary altitude.

00:23:53.416 --> 00:23:54.356 A:middle
I know I want to zoom out

00:23:54.356 --> 00:23:56.426 A:middle
and here I've just
picked a magic number four

00:23:56.426 --> 00:23:59.856 A:middle
and I'm just going to take the
altitude we want to travel to,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:24:00.426 --> 00:24:01.546 A:middle
multiply it by four and that's

00:24:01.546 --> 00:24:04.866 A:middle
where I want our
intermediate altitude to be.

00:24:05.316 --> 00:24:07.856 A:middle
Okay now that I have those
properties I can create a

00:24:07.856 --> 00:24:08.716 A:middle
midpoint camera.

00:24:09.486 --> 00:24:12.406 A:middle
So I want it to look at
where we're going to go

00:24:13.546 --> 00:24:16.846 A:middle
from the middle point between
the start and end points

00:24:18.196 --> 00:24:20.926 A:middle
and I want it to sit
at our mid altitude.

00:24:20.926 --> 00:24:21.906 A:middle
That's something high above.

00:24:23.066 --> 00:24:25.986 A:middle
Now I just create our stack of
cameras so I add the mid camera

00:24:26.066 --> 00:24:29.346 A:middle
and our endpoint camera and
I kick off the animation

00:24:29.346 --> 00:24:30.746 A:middle
by calling go to next camera.

00:24:32.426 --> 00:24:34.346 A:middle
Okay, so that's our
animation and now we just want

00:24:34.346 --> 00:24:36.006 A:middle
to replace this animation
we don't

00:24:36.646 --> 00:24:42.066 A:middle
like with the animation
we do like.

00:24:43.186 --> 00:24:45.676 A:middle
All right, let's
see how it works.

00:24:46.236 --> 00:24:49.776 A:middle
All right, here we are
at Moscone West again.

00:24:50.286 --> 00:24:52.076 A:middle
Now let's type Golden Gate Park.

00:24:52.666 --> 00:24:55.956 A:middle
That's pretty sweet [laughter].

00:24:56.466 --> 00:24:58.266 A:middle
[applause] I like that a lot.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:02.326 --> 00:25:03.806 A:middle
The whole map swings around.

00:25:04.706 --> 00:25:05.876 A:middle
Let's go back to Moscone.

00:25:07.056 --> 00:25:08.916 A:middle
That's awesome and look at
those 3D buildings pop up.

00:25:08.916 --> 00:25:08.983 A:middle
[ Laughter & Applause ]

00:25:08.983 --> 00:25:16.586 A:middle
Okay, so now let's do a
little bit more testing.

00:25:16.586 --> 00:25:18.446 A:middle
I mean I wish we were done and
we could just ship this thing,

00:25:18.446 --> 00:25:21.456 A:middle
but I'm pretty sure that hop
doesn't work all the time.

00:25:21.456 --> 00:25:22.936 A:middle
So let's try going
to the Metreon.

00:25:22.936 --> 00:25:23.976 A:middle
That's right across the street.

00:25:24.486 --> 00:25:27.596 A:middle
Yeah, that seems a
little bit heavy.

00:25:28.246 --> 00:25:30.856 A:middle
Now Target which
is right next door.

00:25:30.856 --> 00:25:32.596 A:middle
You know I'm pretty
sure if a user says

00:25:32.596 --> 00:25:34.636 A:middle
that they would wonder like,
"Why are we zooming out

00:25:34.636 --> 00:25:35.956 A:middle
and zooming in and
tilting and..."

00:25:36.216 --> 00:25:37.016 A:middle
It's just too much.

00:25:37.566 --> 00:25:39.886 A:middle
And let's try going
really far away.

00:25:39.886 --> 00:25:40.846 A:middle
Let's go to New York City.

00:25:41.466 --> 00:25:44.366 A:middle
I don't even know
what happened there.

00:25:44.366 --> 00:25:46.256 A:middle
I think New York is
south of San Francisco.

00:25:46.256 --> 00:25:47.066 A:middle
I'm not really sure.

00:25:48.296 --> 00:25:50.176 A:middle
Okay. Clearly one kind

00:25:50.176 --> 00:25:51.946 A:middle
of transition doesn't
necessarily work

00:25:52.536 --> 00:25:53.426 A:middle
for all distances.

00:25:54.556 --> 00:25:57.746 A:middle
So let's modify our program so
that we can account for that.

00:25:58.366 --> 00:25:59.446 A:middle
Okay let's stop this.

00:25:59.976 --> 00:26:03.476 A:middle
All right, the first
thing to figure

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:59.976 --> 00:26:03.476 A:middle
All right, the first
thing to figure

00:26:03.476 --> 00:26:05.646 A:middle
out is how do we build a filter?

00:26:06.176 --> 00:26:07.776 A:middle
So I think what I
want to do is figure

00:26:07.776 --> 00:26:10.356 A:middle
out what those distances are and
then build a filter around that.

00:26:10.356 --> 00:26:12.446 A:middle
So let's go to our go
to coordinate method.

00:26:13.056 --> 00:26:14.056 A:middle
This is kind of a funnel point

00:26:14.056 --> 00:26:15.586 A:middle
where we can start looking
at what's happening.

00:26:15.906 --> 00:26:18.476 A:middle
And let's drop in some
code here to figure

00:26:18.476 --> 00:26:22.036 A:middle
out how far we're
trying to travel.

00:26:23.226 --> 00:26:27.456 A:middle
Okay. So I pull the camera off
the map view before we begin the

00:26:27.456 --> 00:26:30.256 A:middle
animation and now I have a start
camera where we're starting from

00:26:30.666 --> 00:26:32.276 A:middle
and I've already computed
an end point camera

00:26:32.806 --> 00:26:35.556 A:middle
and using properties on those
cameras I can populate two CL

00:26:35.556 --> 00:26:36.496 A:middle
location objects.

00:26:37.476 --> 00:26:40.436 A:middle
One for the start location
and one for the end location.

00:26:41.646 --> 00:26:44.616 A:middle
And once I have two CL location
objects I can use the more API

00:26:44.616 --> 00:26:47.116 A:middle
on CL location to
get the distance

00:26:47.116 --> 00:26:47.896 A:middle
between those two points.

00:26:47.896 --> 00:26:49.756 A:middle
This is the distance
from location API.

00:26:49.756 --> 00:26:52.086 A:middle
And now I'm just
going to log that out

00:26:52.726 --> 00:26:54.616 A:middle
so we can inspect how
far we're traveling

00:26:54.616 --> 00:26:56.126 A:middle
and then decide what we
want to do from there.

00:26:56.126 --> 00:26:58.886 A:middle
So here we are back at Moscone
West after I ran the project.

00:26:59.356 --> 00:27:05.746 A:middle
And let's go bring up our
console, switch back to our app.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:59.356 --> 00:27:05.746 A:middle
And let's go bring up our
console, switch back to our app.

00:27:06.266 --> 00:27:08.396 A:middle
Let's go to Golden Gate Park.

00:27:08.396 --> 00:27:09.156 A:middle
We know we like that.

00:27:09.676 --> 00:27:13.096 A:middle
Okay, so that's about
7,000 meters

00:27:13.096 --> 00:27:14.166 A:middle
and that feels pretty good.

00:27:14.196 --> 00:27:16.026 A:middle
Let's go back to Moscone west

00:27:16.026 --> 00:27:18.536 A:middle
and we can try a
smaller animation.

00:27:19.986 --> 00:27:21.316 A:middle
Okay, let's go to the Metreon.

00:27:21.616 --> 00:27:24.426 A:middle
All right, that's
just 161 meters.

00:27:24.426 --> 00:27:26.226 A:middle
That's way shorter
than 7,000 meters.

00:27:26.586 --> 00:27:28.216 A:middle
That's good because it
means it's easy to filter.

00:27:29.286 --> 00:27:30.956 A:middle
And Target is just 60 meters.

00:27:31.716 --> 00:27:32.736 A:middle
Okay how about New York City?

00:27:34.586 --> 00:27:35.836 A:middle
Some huge number.

00:27:35.836 --> 00:27:37.386 A:middle
I think that's like
4 million meters.

00:27:37.386 --> 00:27:38.786 A:middle
Okay that's a long way away.

00:27:39.446 --> 00:27:40.056 A:middle
So this is great.

00:27:40.056 --> 00:27:41.966 A:middle
This means that we can
filter between these.

00:27:42.036 --> 00:27:44.136 A:middle
But that's kind of
an extreme example.

00:27:44.136 --> 00:27:46.866 A:middle
Let's try something in between
Dallas and San Francisco

00:27:46.866 --> 00:27:48.386 A:middle
or New York and San Francisco.

00:27:48.386 --> 00:27:50.956 A:middle
Let's try Dallas.

00:27:51.096 --> 00:27:51.926 A:middle
2 million meters.

00:27:52.976 --> 00:27:54.096 A:middle
That also didn't feel very good.

00:27:54.656 --> 00:27:57.606 A:middle
Okay so I think we have a basis
on which we can start filtering.

00:27:57.606 --> 00:28:01.316 A:middle
So let's go back and figure
out how we can filter this.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:57.606 --> 00:28:01.316 A:middle
So let's go back and figure
out how we can filter this.

00:28:01.316 --> 00:28:05.626 A:middle
well right now our animation is
kind of stuck inside of this go

00:28:05.626 --> 00:28:07.116 A:middle
to coordinate method
so I think what I want

00:28:07.116 --> 00:28:09.066 A:middle
to do is refactor
this to make room

00:28:09.996 --> 00:28:11.716 A:middle
for having a few
different animations.

00:28:11.716 --> 00:28:13.526 A:middle
So let's to drag in
a new method here.

00:28:14.576 --> 00:28:16.716 A:middle
This is called perform
short camera animation

00:28:16.716 --> 00:28:19.216 A:middle
and all this does is
produce the same animation

00:28:19.216 --> 00:28:19.936 A:middle
that we've already built.

00:28:19.936 --> 00:28:22.806 A:middle
So this is exactly the same code
we just wrote and what I'm going

00:28:22.806 --> 00:28:27.116 A:middle
to do is delete the code
that is inside the go

00:28:27.116 --> 00:28:27.846 A:middle
to coordinate method.

00:28:29.046 --> 00:28:31.406 A:middle
Okay. Now that we have
that I think I want

00:28:31.406 --> 00:28:33.316 A:middle
to do a different
kind of animation

00:28:33.316 --> 00:28:35.116 A:middle
when we're going all the
way to New York City.

00:28:35.116 --> 00:28:38.346 A:middle
I think what would be better is
if we zoomed out and then panned

00:28:38.346 --> 00:28:39.976 A:middle
over to New York City
and then zoomed in.

00:28:40.006 --> 00:28:42.866 A:middle
I think that'll produce
something that's a little bit

00:28:42.866 --> 00:28:44.656 A:middle
more logical to the user.

00:28:44.656 --> 00:28:47.476 A:middle
So let's drag in a method here;

00:28:48.176 --> 00:28:51.706 A:middle
it's called perform
long camera animation

00:28:51.706 --> 00:28:54.236 A:middle
and that's the animation we want
to use for long transitions.

00:28:54.926 --> 00:28:55.606 A:middle
So how does it work?

00:28:56.986 --> 00:28:59.256 A:middle
Well we get the starting
camera off of the map view.

00:28:59.526 --> 00:29:01.646 A:middle
Now we have a start and end
point just like we were using

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:28:59.526 --> 00:29:01.646 A:middle
Now we have a start and end
point just like we were using

00:29:01.646 --> 00:29:03.146 A:middle
to inspect the distance
we were traveling.

00:29:04.386 --> 00:29:08.186 A:middle
And again I can go compute the
distance between the two points

00:29:08.416 --> 00:29:11.996 A:middle
and now I kind of want to just
use that distance to figure

00:29:11.996 --> 00:29:14.136 A:middle
out how far above the
map I want to zoom out.

00:29:14.136 --> 00:29:16.756 A:middle
Because if you're
going to let's say L.A.

00:29:16.756 --> 00:29:18.306 A:middle
from San Francisco
it's pretty different

00:29:18.306 --> 00:29:19.266 A:middle
than going to New York City.

00:29:19.266 --> 00:29:21.276 A:middle
So maybe I don't want to zoom
out as far if I'm just going

00:29:21.276 --> 00:29:24.566 A:middle
to L.A. Okay, so what I'm going
to do here is the naive thing.

00:29:24.566 --> 00:29:26.286 A:middle
I'm just going to use the
distance between the two points

00:29:26.696 --> 00:29:29.216 A:middle
to choose -- to lift
myself up off the map.

00:29:29.216 --> 00:29:31.306 A:middle
So I'm just going to
turn that on its side

00:29:31.786 --> 00:29:33.586 A:middle
and lift off the map
by the same distance.

00:29:34.826 --> 00:29:37.766 A:middle
So now I need to make
two midpoint cameras.

00:29:37.866 --> 00:29:42.256 A:middle
So that means I have now two
key intervals between the start

00:29:42.256 --> 00:29:43.616 A:middle
and end where I want
to animate through.

00:29:44.716 --> 00:29:46.176 A:middle
So I go ahead and
make those cameras.

00:29:46.176 --> 00:29:49.546 A:middle
The first one is looking
at our start point and from

00:29:49.806 --> 00:29:51.876 A:middle
above the start point.

00:29:51.876 --> 00:29:53.086 A:middle
So I'm just zooming out.

00:29:53.186 --> 00:29:58.906 A:middle
I'm going to zoom out to our
extreme altitude and then I want

00:29:58.906 --> 00:30:00.386 A:middle
to pan over to our destination.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:58.906 --> 00:30:00.386 A:middle
to pan over to our destination.

00:30:00.386 --> 00:30:02.206 A:middle
So now I have a second
camera and it's going to look

00:30:02.206 --> 00:30:05.616 A:middle
at our second coordinate, our
end coordinate from directly

00:30:05.616 --> 00:30:07.316 A:middle
above it at the same
altitude so now

00:30:07.316 --> 00:30:08.636 A:middle
that means I'm just
going to pan over.

00:30:10.536 --> 00:30:12.746 A:middle
Then just like out short
animation I create a stack

00:30:12.746 --> 00:30:13.346 A:middle
of cameras.

00:30:13.896 --> 00:30:16.966 A:middle
So our first camera, second
camera and then the end camera

00:30:16.966 --> 00:30:19.576 A:middle
and then I can just call our
infrastructure that will animate

00:30:19.576 --> 00:30:21.156 A:middle
through those cameras
go to next camera.

00:30:23.516 --> 00:30:25.236 A:middle
Okay, so what's left
is back in my go

00:30:25.236 --> 00:30:27.096 A:middle
to coordinate method
I want to filter

00:30:27.096 --> 00:30:31.396 A:middle
out which animation I'm going
to use based on the distance.

00:30:31.396 --> 00:30:32.716 A:middle
So we've already
computed the distance.

00:30:33.456 --> 00:30:34.716 A:middle
I'm going to drag in some code

00:30:35.336 --> 00:30:38.836 A:middle
that filters based
on that distance.

00:30:39.736 --> 00:30:41.576 A:middle
Here it is, just a
bunch of if statements.

00:30:41.766 --> 00:30:43.226 A:middle
If the distance is less

00:30:43.226 --> 00:30:45.356 A:middle
than 2,500 meters I think I'm
just going to use the built

00:30:45.356 --> 00:30:47.966 A:middle
in MapKit animation we know
as a no frills animation

00:30:47.966 --> 00:30:50.436 A:middle
and I think that's appropriate
for really short distances.

00:30:50.976 --> 00:30:52.936 A:middle
For medium size differences
I think I want

00:30:52.936 --> 00:30:55.766 A:middle
to use our hop animation so
I chose a filtering range

00:30:55.766 --> 00:30:59.166 A:middle
of 50,000 meters and then
for anything else I consider

00:30:59.166 --> 00:31:00.386 A:middle
that pretty long
and I think I want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:59.166 --> 00:31:00.386 A:middle
that pretty long
and I think I want

00:31:00.386 --> 00:31:02.796 A:middle
to use our multi-stage
transition

00:31:03.406 --> 00:31:04.926 A:middle
to give the user a
little bit more context.

00:31:05.436 --> 00:31:08.576 A:middle
Okay. Let's run this
and see how it works.

00:31:09.186 --> 00:31:11.856 A:middle
Cool, so here's Moscone West.

00:31:11.856 --> 00:31:14.856 A:middle
Let's make sure our Golden Gate
Park transition still works.

00:31:15.296 --> 00:31:17.106 A:middle
Yeah it does.

00:31:17.856 --> 00:31:20.226 A:middle
Nice. All right, let's
go back to Moscone West

00:31:20.226 --> 00:31:22.196 A:middle
and let's test the
Metreon one more time.

00:31:22.196 --> 00:31:25.256 A:middle
So here we are at Moscone West.

00:31:25.346 --> 00:31:26.256 A:middle
Let's go to the Metreon.

00:31:27.786 --> 00:31:28.426 A:middle
Yeah that's great.

00:31:28.626 --> 00:31:31.046 A:middle
For a short transition I mean I
think that's really appropriate.

00:31:31.676 --> 00:31:33.086 A:middle
Now let's try New York City.

00:31:36.836 --> 00:31:38.146 A:middle
I think that's much better.

00:31:38.646 --> 00:31:44.286 A:middle
[ Applause ]

00:31:44.786 --> 00:31:45.986 A:middle
Now the user knows
what's going on.

00:31:45.986 --> 00:31:48.946 A:middle
Right? We saw that New York City
was to the East of San Francisco

00:31:48.946 --> 00:31:52.696 A:middle
and if I go back to San
Francisco, yeah great.

00:31:52.696 --> 00:31:56.166 A:middle
I'm still in the U.S. and I
went west to get San Francisco

00:31:56.166 --> 00:31:58.316 A:middle
from New York City and
that all makes sense.

00:31:58.726 --> 00:31:59.616 A:middle
Let's try Tokyo.

00:31:59.616 --> 00:32:00.466 A:middle
That's really far away.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:59.616 --> 00:32:00.466 A:middle
That's really far away.

00:32:03.126 --> 00:32:04.876 A:middle
Boom, all over the
Pacific Ocean.

00:32:04.956 --> 00:32:07.096 A:middle
And you notice how instead
of going the long way

00:32:07.096 --> 00:32:09.446 A:middle
around the world MapKit
was smart enough to go

00:32:09.446 --> 00:32:14.086 A:middle
over the Pacific Ocean which is
how a plane might go [laughter].

00:32:14.316 --> 00:32:16.266 A:middle
Great, so that's all
I'm going to do today

00:32:16.266 --> 00:32:17.886 A:middle
but I think you can
see that there's a lot

00:32:17.886 --> 00:32:21.256 A:middle
of opportunity here for you to
play with MKMapCamera and play

00:32:21.256 --> 00:32:22.386 A:middle
with the transitions
in your app,

00:32:22.736 --> 00:32:24.716 A:middle
and make your app feel
a little bit different

00:32:24.716 --> 00:32:25.946 A:middle
from all the other
apps out there.

00:32:26.006 --> 00:32:27.986 A:middle
So I hope you'll take
advantage of that.

00:32:28.826 --> 00:32:30.326 A:middle
So that was cinematic
camera motion.

00:32:31.196 --> 00:32:31.716 A:middle
What did we learn?

00:32:33.086 --> 00:32:34.716 A:middle
We saw that the crux of this is

00:32:34.716 --> 00:32:38.296 A:middle
that MKMapView's method
setCamera: is animatable.

00:32:38.526 --> 00:32:41.886 A:middle
So you can call that within
the normal animation context

00:32:41.886 --> 00:32:42.516 A:middle
on your platform.

00:32:42.516 --> 00:32:44.716 A:middle
So if you're on iOS
using UI view animations

00:32:44.936 --> 00:32:47.106 A:middle
and in OS X using
NSAnimationContext.

00:32:47.596 --> 00:32:51.826 A:middle
We also saw that we should
use map view region did

00:32:51.826 --> 00:32:52.716 A:middle
change animated.

00:32:53.106 --> 00:32:54.616 A:middle
We want to use that
call back to figure

00:32:54.616 --> 00:32:56.296 A:middle
out when an animation
has completed.

00:32:56.706 --> 00:32:59.746 A:middle
Don't use the completion
handler that's part of the built

00:32:59.746 --> 00:33:00.616 A:middle
in animation framework.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:32:59.746 --> 00:33:00.616 A:middle
in animation framework.

00:33:01.116 --> 00:33:04.596 A:middle
And lastly we saw
that it's pretty clear

00:33:04.596 --> 00:33:06.466 A:middle
that there isn't
necessarily one answer

00:33:06.466 --> 00:33:07.626 A:middle
for every type of transition.

00:33:07.626 --> 00:33:09.956 A:middle
Right? If we're just going a
few meters you really don't want

00:33:09.956 --> 00:33:11.256 A:middle
to be zooming all the way out

00:33:11.256 --> 00:33:12.516 A:middle
and then zooming
all the way back in.

00:33:12.556 --> 00:33:14.196 A:middle
It's a little bit long winded.

00:33:15.256 --> 00:33:16.466 A:middle
So play with it.

00:33:18.916 --> 00:33:20.396 A:middle
So that's MKMapCamera.

00:33:21.446 --> 00:33:24.436 A:middle
It's the one API you need to
know to take advantage of 3D.

00:33:24.436 --> 00:33:25.446 A:middle
There isn't anything else.

00:33:26.576 --> 00:33:28.536 A:middle
At minimum you should
be using it to save

00:33:28.536 --> 00:33:30.346 A:middle
and restore the viewport
state for your map view.

00:33:31.746 --> 00:33:39.346 A:middle
And clearly you can use it to
add a special touch to your app.

00:33:39.616 --> 00:33:41.026 A:middle
Now sometimes rotation

00:33:41.776 --> 00:33:44.036 A:middle
and pitching may not be the
right answer for your app.

00:33:44.666 --> 00:33:46.796 A:middle
If you're showing something
like weather data on top

00:33:46.796 --> 00:33:49.856 A:middle
of a map maybe that looks just
really weird if you're pitched

00:33:49.856 --> 00:33:51.716 A:middle
and buildings are showing
through clouds or something.

00:33:53.436 --> 00:33:56.006 A:middle
Well in previous iOS releases
we've given you the control

00:33:56.006 --> 00:33:58.356 A:middle
to disable and enable
gestures selectively

00:33:58.976 --> 00:34:00.956 A:middle
and in iOS 7 we're
doing the same thing.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:58.976 --> 00:34:00.956 A:middle
and in iOS 7 we're
doing the same thing.

00:34:00.956 --> 00:34:02.996 A:middle
We've introduced rotate
enabled and pitch enabled

00:34:02.996 --> 00:34:04.336 A:middle
so you can disabled
these properties

00:34:04.376 --> 00:34:07.096 A:middle
if that's what you
need for your app.

00:34:07.716 --> 00:34:10.295 A:middle
Now as I mentioned these are
all on by default in iOS 7.

00:34:11.045 --> 00:34:13.786 A:middle
That's because users who come
out of the map app, Maps.app

00:34:14.226 --> 00:34:16.766 A:middle
and see a map view in your
app really expect to be able

00:34:16.766 --> 00:34:19.235 A:middle
to rotate it and pitch it just
like they could in the Maps.app.

00:34:20.096 --> 00:34:22.396 A:middle
So think carefully
before you disable them.

00:34:24.146 --> 00:34:25.936 A:middle
Now some devices don't
support pitching.

00:34:26.846 --> 00:34:29.286 A:middle
And in that case the pitch
enabled property will always

00:34:29.286 --> 00:34:29.815 A:middle
return no.

00:34:30.696 --> 00:34:33.156 A:middle
So that means if you have a
feature of your app that depends

00:34:33.156 --> 00:34:37.186 A:middle
on pitching just be
sure to enable that only

00:34:37.326 --> 00:34:39.116 A:middle
if the pitching enabled
property returns yes.

00:34:43.576 --> 00:34:44.706 A:middle
So that's all the new API.

00:34:44.706 --> 00:34:45.585 A:middle
That's 3D.

00:34:46.966 --> 00:34:52.196 A:middle
Now I want to talk to you about
producing snapshots of a map.

00:34:52.426 --> 00:34:53.686 A:middle
Now why would you
want to do this?

00:34:53.686 --> 00:34:55.775 A:middle
Why do you want to create
a static snapshot of a map?

00:34:56.366 --> 00:34:59.756 A:middle
Well, there's some cases where
a fully interactive map just

00:34:59.756 --> 00:35:00.626 A:middle
doesn't make sense.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:34:59.756 --> 00:35:00.626 A:middle
doesn't make sense.

00:35:01.006 --> 00:35:04.196 A:middle
You may have seen an app like
this; it's a table view app.

00:35:04.706 --> 00:35:08.536 A:middle
You're scrolling it, it's full
of MKMapViews and its jittery,

00:35:08.536 --> 00:35:11.226 A:middle
the map is loading in pieces
and it doesn't quite feel right.

00:35:11.226 --> 00:35:13.596 A:middle
I mean it's just not what
you want your users to see.

00:35:14.526 --> 00:35:18.756 A:middle
Well with Snapshots you can
create maps images off the

00:35:18.756 --> 00:35:19.236 A:middle
main thread.

00:35:19.446 --> 00:35:21.066 A:middle
You get smooth table
view scrolling

00:35:21.066 --> 00:35:22.866 A:middle
and the whole map
comes in at once.

00:35:22.866 --> 00:35:25.176 A:middle
And because it's just an image
you can do all the effect you

00:35:25.176 --> 00:35:27.826 A:middle
want to do with images like
fade it in or apply filters

00:35:27.826 --> 00:35:29.106 A:middle
or anything like that.

00:35:30.636 --> 00:35:31.736 A:middle
The other reason you may want

00:35:31.736 --> 00:35:34.366 A:middle
to use them is the same reason
we use them in the Maps.app.

00:35:34.936 --> 00:35:37.046 A:middle
To implement a printing
feature in your app.

00:35:39.686 --> 00:35:40.826 A:middle
So how do you create a Snapshot?

00:35:41.176 --> 00:35:42.226 A:middle
It's just three steps.

00:35:43.536 --> 00:35:46.906 A:middle
The first step is create an
options object and configure it.

00:35:47.716 --> 00:35:49.986 A:middle
Second step is to create
a snapshot or object

00:35:50.536 --> 00:35:52.366 A:middle
and give it the options
object you configured.

00:35:52.856 --> 00:35:57.926 A:middle
And second step is to kick off
the asynch snapshot task wait

00:35:57.926 --> 00:35:58.556 A:middle
for it to complete.

00:35:59.056 --> 00:36:02.936 A:middle
The options object has
a few properties on it

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:59.056 --> 00:36:02.936 A:middle
The options object has
a few properties on it

00:36:02.936 --> 00:36:03.796 A:middle
that you need to configure.

00:36:04.206 --> 00:36:06.576 A:middle
The first one is the
image size is the size

00:36:06.576 --> 00:36:07.596 A:middle
of the image you want.

00:36:08.706 --> 00:36:10.896 A:middle
Then you can tell it which part
of the map you want to see.

00:36:10.896 --> 00:36:13.176 A:middle
You can use the same
properties you're used to using

00:36:13.176 --> 00:36:16.456 A:middle
on MKMapView, that's
setVisibleMapRec and setRegion.

00:36:17.086 --> 00:36:19.786 A:middle
You can also use a camera which
means you can produce pitched

00:36:19.786 --> 00:36:21.116 A:middle
and rotated snapshots.

00:36:21.666 --> 00:36:24.266 A:middle
And then you can
specify a map type

00:36:24.266 --> 00:36:25.666 A:middle
and we support all
the same map types

00:36:25.666 --> 00:36:26.886 A:middle
that we support in MKMapView.

00:36:26.886 --> 00:36:29.046 A:middle
So that's standard,
satellite and hybrid.

00:36:29.616 --> 00:36:33.936 A:middle
And lastly on iOS only you
need to specify a scale.

00:36:34.796 --> 00:36:37.906 A:middle
The scale property lets you
support retina displays as well

00:36:37.906 --> 00:36:38.896 A:middle
as non-retina displays.

00:36:38.896 --> 00:36:41.106 A:middle
So for non-retina displays
you want to set this to 1,

00:36:41.106 --> 00:36:43.126 A:middle
for retina displays you
want to set it to 2.

00:36:43.126 --> 00:36:45.716 A:middle
You can always grab
this off of the view

00:36:45.716 --> 00:36:46.626 A:middle
that you're about to display.

00:36:46.626 --> 00:36:48.496 A:middle
So [[UIScreen mainScreen]
scale] will give you an

00:36:48.496 --> 00:36:49.246 A:middle
appropriate scale.

00:36:49.556 --> 00:36:55.246 A:middle
So here's what the
code looks like.

00:36:56.336 --> 00:36:57.346 A:middle
There's step one.

00:36:57.346 --> 00:36:58.596 A:middle
We created our options object.

00:36:59.926 --> 00:37:02.346 A:middle
Here I'm setting it to
a size of 512 points

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:59.926 --> 00:37:02.346 A:middle
Here I'm setting it to
a size of 512 points

00:37:02.346 --> 00:37:04.286 A:middle
by 512 points, a square image.

00:37:05.556 --> 00:37:07.426 A:middle
Then on iOS I need
to set a scale here.

00:37:07.426 --> 00:37:08.806 A:middle
I'm just using the
main screen scale.

00:37:08.806 --> 00:37:11.266 A:middle
That's the scale of the
display that's on your device.

00:37:11.726 --> 00:37:14.216 A:middle
So if you intend on showing this
image on a different screen,

00:37:14.216 --> 00:37:17.156 A:middle
maybe it's an AirPlay screen,
you want to make sure to set

00:37:17.156 --> 00:37:19.176 A:middle
that scale to what's
appropriate for that screen.

00:37:19.176 --> 00:37:21.666 A:middle
You can use the UIScreen
API to figure that out.

00:37:22.816 --> 00:37:24.876 A:middle
Then I'm setting a
camera to choose what part

00:37:24.876 --> 00:37:25.766 A:middle
of the map I want to see.

00:37:26.936 --> 00:37:28.506 A:middle
Then I'm setting
MKMapTypeStandard.

00:37:29.466 --> 00:37:32.106 A:middle
Step two I created my Snapshot.

00:37:32.206 --> 00:37:33.926 A:middle
Thats alloc init I think
you can all do that.

00:37:34.566 --> 00:37:38.316 A:middle
And the last step is
kick off async task

00:37:38.316 --> 00:37:39.336 A:middle
and wait for it to complete.

00:37:40.356 --> 00:37:41.996 A:middle
MapKit's going to
call your block back

00:37:41.996 --> 00:37:44.396 A:middle
when the async task is complete
and your Snapshot is ready

00:37:44.396 --> 00:37:45.356 A:middle
or if we get an error.

00:37:46.446 --> 00:37:49.066 A:middle
Generating an image of a map
just like using MKMapView

00:37:49.066 --> 00:37:50.896 A:middle
or the Maps.app requires
a network connection

00:37:50.896 --> 00:37:53.196 A:middle
so that can obviously
fail if you're

00:37:53.196 --> 00:37:54.136 A:middle
out in the boonies somewhere.

00:37:55.416 --> 00:37:57.206 A:middle
So be sure to check for an error

00:37:57.206 --> 00:37:58.636 A:middle
and if there is an error
have a backup plan.

00:37:58.636 --> 00:38:01.116 A:middle
Have a placeholder image or
something you can show your user

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:37:58.636 --> 00:38:01.116 A:middle
Have a placeholder image or
something you can show your user

00:38:01.116 --> 00:38:02.606 A:middle
in case the map wasn't
able to load.

00:38:03.016 --> 00:38:05.806 A:middle
But if you don't have an error
object then we know the Snapshot

00:38:05.806 --> 00:38:07.956 A:middle
was generated successfully
and the image

00:38:07.956 --> 00:38:11.066 A:middle
of the map itself is sitting
inside the MKMapSnapshot object

00:38:11.336 --> 00:38:12.326 A:middle
under the image property.

00:38:16.376 --> 00:38:17.536 A:middle
So I talked about printing.

00:38:18.596 --> 00:38:20.736 A:middle
If you're implementing
printing you might find yourself

00:38:20.736 --> 00:38:21.906 A:middle
implementing a method like this.

00:38:21.906 --> 00:38:24.886 A:middle
drawContentForPageAtIndexInRect.

00:38:26.526 --> 00:38:27.976 A:middle
So okay, you need a Snapshot.

00:38:28.156 --> 00:38:29.386 A:middle
Aroon told you that on stage.

00:38:29.976 --> 00:38:31.726 A:middle
So step one, create
your options.

00:38:31.726 --> 00:38:33.266 A:middle
Step two, create your snapshot.

00:38:33.266 --> 00:38:35.046 A:middle
Step three, kick
off that async task.

00:38:35.046 --> 00:38:39.116 A:middle
So the thing about
printing is that you have

00:38:39.116 --> 00:38:41.926 A:middle
to provide all the content for
your print out synchronously.

00:38:42.266 --> 00:38:44.196 A:middle
You need to draw all that
right there in that method

00:38:44.196 --> 00:38:47.556 A:middle
but if you have to kick off an
async task how are you going

00:38:48.136 --> 00:38:49.266 A:middle
to do that.

00:38:49.266 --> 00:38:52.126 A:middle
Well, the steps for
producing a map snapshot

00:38:52.126 --> 00:38:53.486 A:middle
for printing are a
little bit different.

00:38:53.486 --> 00:38:54.366 A:middle
A little bit longer.

00:38:55.836 --> 00:38:57.046 A:middle
But it's not too hard.

00:38:57.376 --> 00:38:59.206 A:middle
The first step is
configure options just

00:38:59.206 --> 00:39:00.196 A:middle
like you normally would.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:38:59.206 --> 00:39:00.196 A:middle
like you normally would.

00:39:01.056 --> 00:39:02.726 A:middle
Create a snapshot just
like you normally would.

00:39:03.706 --> 00:39:05.676 A:middle
The third step is to
create a semaphore.

00:39:05.806 --> 00:39:08.016 A:middle
This is something that's
going to allow us to wait

00:39:08.426 --> 00:39:09.886 A:middle
for a resource to
become available.

00:39:10.366 --> 00:39:13.446 A:middle
The third step is you need
to pick a dispatch queue

00:39:13.446 --> 00:39:14.866 A:middle
where you want to
receive a call back

00:39:15.426 --> 00:39:17.676 A:middle
when the snapshot is
done being generated.

00:39:18.196 --> 00:39:20.196 A:middle
That's because you're going to
block the thread that you're on

00:39:20.196 --> 00:39:22.626 A:middle
and if you block that thread
while waiting for something

00:39:22.626 --> 00:39:24.856 A:middle
to come back on that thread I
think we all know that's called

00:39:24.856 --> 00:39:25.406 A:middle
a deadlock.

00:39:25.676 --> 00:39:28.316 A:middle
You don't want that.

00:39:28.366 --> 00:39:30.016 A:middle
Then you create a couple
of result variables

00:39:30.016 --> 00:39:32.196 A:middle
where you can stash the
results of the async tasks

00:39:32.196 --> 00:39:33.996 A:middle
to use after it's generated.

00:39:34.846 --> 00:39:37.726 A:middle
Then you start the snapshotter
as usual and then wait

00:39:37.726 --> 00:39:38.746 A:middle
for that snapshotter
to complete.

00:39:38.746 --> 00:39:40.826 A:middle
So let's look at some code.

00:39:41.226 --> 00:39:41.596 A:middle
Here it is.

00:39:42.656 --> 00:39:44.876 A:middle
Let's just assume we
have the options object

00:39:44.876 --> 00:39:46.166 A:middle
in the snapshotter
object that we created

00:39:46.166 --> 00:39:47.166 A:middle
in the last few slides.

00:39:47.476 --> 00:39:49.886 A:middle
The only difference
is that for printing

00:39:50.116 --> 00:39:52.866 A:middle
on iOS you probably want
to set the scale to 2.

00:39:53.436 --> 00:39:55.706 A:middle
That's because most printers
are fairly high resolution

00:39:55.706 --> 00:39:57.776 A:middle
and so you want kind of
retina quality graphics

00:39:57.776 --> 00:39:58.276 A:middle
for your printout.

00:39:58.276 --> 00:40:02.196 A:middle
All right, into the differences.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:58.276 --> 00:40:02.196 A:middle
All right, into the differences.

00:40:02.676 --> 00:40:05.576 A:middle
The first step we're doing here
is using dispatch semaphore APIs

00:40:05.756 --> 00:40:07.976 A:middle
to create and initialize
the semaphore to zero.

00:40:08.416 --> 00:40:09.686 A:middle
The reason we initialize
it to zero is

00:40:09.686 --> 00:40:11.236 A:middle
because we don't have
any resources yet.

00:40:11.236 --> 00:40:13.586 A:middle
We need to wait for a
resource to become available.

00:40:14.396 --> 00:40:15.396 A:middle
Then we need to pick a queue.

00:40:15.826 --> 00:40:17.526 A:middle
Generally any global
queue will work

00:40:17.526 --> 00:40:19.816 A:middle
so you can use the get
dispatch global queue API

00:40:20.096 --> 00:40:21.166 A:middle
to pick a queue to run on.

00:40:21.166 --> 00:40:23.136 A:middle
A high, or low, or
medium priority queue.

00:40:23.136 --> 00:40:26.576 A:middle
Then we can create a
couple of variables

00:40:26.576 --> 00:40:27.786 A:middle
where we want to
stash the results.

00:40:27.786 --> 00:40:29.756 A:middle
We need to use the
block modifiers here

00:40:29.756 --> 00:40:31.386 A:middle
because we're going to
modify these variables inside

00:40:31.386 --> 00:40:32.406 A:middle
of a block.

00:40:33.586 --> 00:40:36.166 A:middle
So we need a place to stash
the map Snapshot and a place

00:40:36.166 --> 00:40:37.966 A:middle
to stash the error just
in case there is one.

00:40:38.406 --> 00:40:42.396 A:middle
Then we kick off our
async task using a variant

00:40:42.396 --> 00:40:42.986 A:middle
of the start API.

00:40:42.986 --> 00:40:45.466 A:middle
Here we're using the --
this is the startWithQueue:

00:40:45.466 --> 00:40:48.156 A:middle
API that lets us
tell the snapshotter

00:40:48.156 --> 00:40:49.926 A:middle
that we want the call back
not on the main thread

00:40:49.926 --> 00:40:52.476 A:middle
where we're starting this
request but on a different queue

00:40:52.476 --> 00:40:53.626 A:middle
where we're not blocking.

00:40:54.146 --> 00:40:58.126 A:middle
Then on that same
thread we're going

00:40:58.126 --> 00:40:59.936 A:middle
to use the
dispatch-semaphore-wait API

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:00.006 --> 00:41:02.066 A:middle
to just wait for that
resource to become available.

00:41:02.516 --> 00:41:06.836 A:middle
Okay. After some time
that Snapshot will finish

00:41:06.836 --> 00:41:09.796 A:middle
or it'll error out and we
can stash those two variables

00:41:09.796 --> 00:41:13.056 A:middle
where we made space and then
call the dispatch semaphore

00:41:13.056 --> 00:41:16.436 A:middle
signal API in order to indicate
that the snapshot is finished.

00:41:16.436 --> 00:41:18.676 A:middle
So that will unblock
our main thread

00:41:18.676 --> 00:41:20.156 A:middle
and now we can handle
the snapshot just

00:41:20.156 --> 00:41:20.946 A:middle
like we normally would.

00:41:21.276 --> 00:41:23.766 A:middle
Check for an error, otherwise
you know we have an image.

00:41:24.226 --> 00:41:29.426 A:middle
So here's an example
of a snapshot.

00:41:30.246 --> 00:41:30.926 A:middle
It's great.

00:41:30.926 --> 00:41:34.506 A:middle
It looks just like MKMapView and
that's probably what you wanted.

00:41:35.556 --> 00:41:38.546 A:middle
Now you probably just don't
want a blank image though.

00:41:38.546 --> 00:41:39.946 A:middle
I mean you probably
want to put something

00:41:39.946 --> 00:41:42.526 A:middle
on it may be like pins.

00:41:42.716 --> 00:41:43.956 A:middle
So I want to show
you how to do that.

00:41:44.356 --> 00:41:48.396 A:middle
Here's a sample project that's
pretty bare bones right now.

00:41:49.026 --> 00:41:53.916 A:middle
What I've got is two
points that I want

00:41:53.916 --> 00:41:55.406 A:middle
to show in a static snapshot.

00:41:55.406 --> 00:41:58.106 A:middle
And for the purpose of this demo
I just want to save the snapshot

00:41:58.106 --> 00:41:59.286 A:middle
out and I'm going to
show you the result.

00:41:59.286 --> 00:42:02.486 A:middle
So I have London, I have
Paris, two coordinates.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:59.286 --> 00:42:02.486 A:middle
So I have London, I have
Paris, two coordinates.

00:42:02.486 --> 00:42:04.756 A:middle
I also have a little
helper method I wrote

00:42:04.956 --> 00:42:07.766 A:middle
which given two map points is
just going to return a rectangle

00:42:07.766 --> 00:42:08.806 A:middle
around those two map points.

00:42:10.176 --> 00:42:11.026 A:middle
Okay, so let's get started.

00:42:11.026 --> 00:42:12.746 A:middle
The first thing I want to
do is figure out what part

00:42:12.746 --> 00:42:14.566 A:middle
of the world I actually
want to show in my snapshot.

00:42:14.566 --> 00:42:19.536 A:middle
So let's make a region.

00:42:19.536 --> 00:42:21.426 A:middle
What I do is I make a
list of my two points,

00:42:21.886 --> 00:42:23.166 A:middle
pass it to my helper method.

00:42:23.166 --> 00:42:24.296 A:middle
It's going to return a rectangle

00:42:24.296 --> 00:42:26.056 A:middle
and now I have a
CoordinateRegion

00:42:26.816 --> 00:42:29.066 A:middle
so I can specify what part
of the world I want to see.

00:42:29.596 --> 00:42:36.166 A:middle
Step two is create
my options object.

00:42:36.696 --> 00:42:38.416 A:middle
So I created my options object.

00:42:38.596 --> 00:42:44.296 A:middle
I give it the CoordinateRegion
I just decided to show.

00:42:45.386 --> 00:42:46.996 A:middle
Then I want to add
some rotation to that

00:42:47.486 --> 00:42:50.286 A:middle
and so what I do is I copy the
camera off my options object.

00:42:50.896 --> 00:42:53.506 A:middle
I add a heading which will
rotate the cardinal direction

00:42:53.506 --> 00:42:56.786 A:middle
of a map and I set it back
on the options object.

00:42:58.006 --> 00:42:59.446 A:middle
Then I chose the
size of the image.

00:42:59.446 --> 00:43:00.956 A:middle
Here is one that is
relatively large.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:59.446 --> 00:43:00.956 A:middle
Here is one that is
relatively large.

00:43:01.136 --> 00:43:04.286 A:middle
1680 points by 825 points.

00:43:05.566 --> 00:43:07.456 A:middle
Okay now I'm ready to
create a snapshotter.

00:43:08.066 --> 00:43:11.566 A:middle
So I created my snapshotter
object

00:43:11.566 --> 00:43:13.606 A:middle
and then I kick off
my async task

00:43:13.976 --> 00:43:16.986 A:middle
and I've got a block here
ready to receive the results.

00:43:16.986 --> 00:43:19.616 A:middle
So the first step is of
course handle an error

00:43:20.256 --> 00:43:22.666 A:middle
and I don't have an error
image to show you guys

00:43:22.666 --> 00:43:23.346 A:middle
so I'm just going to log

00:43:23.346 --> 00:43:25.096 A:middle
if there's an error
and I'll be very sad.

00:43:25.686 --> 00:43:30.456 A:middle
And otherwise we know we've got
the images so go ahead and pull

00:43:30.456 --> 00:43:32.706 A:middle
that image off that
snapshot object.

00:43:32.796 --> 00:43:35.776 A:middle
And now I'm going to draw a
couple pins on this and I want

00:43:35.776 --> 00:43:36.676 A:middle
to show you something neat here.

00:43:36.676 --> 00:43:41.806 A:middle
We can reuse the MKPinAnnotation
view API to draw the pin

00:43:41.806 --> 00:43:42.826 A:middle
on our static snapshot.

00:43:44.016 --> 00:43:47.846 A:middle
MKAnnotationViews all have
an image property on them

00:43:47.976 --> 00:43:51.046 A:middle
that you can use to specify
an image to show inside

00:43:51.046 --> 00:43:52.156 A:middle
of the MKAnnotationView.

00:43:52.736 --> 00:43:56.886 A:middle
MKPinAnnotation view uses that
property to set a pin image

00:43:56.886 --> 00:43:58.906 A:middle
and so you can just pull that
image right on out of there.

00:43:59.316 --> 00:44:06.976 A:middle
So here I am using the pin.image
property to get the pin image.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:59.316 --> 00:44:06.976 A:middle
So here I am using the pin.image
property to get the pin image.

00:44:08.026 --> 00:44:12.236 A:middle
Okay. Now I have a pin image
and I have a map image.

00:44:12.736 --> 00:44:15.186 A:middle
I need to figure out where
on the image to draw the pin

00:44:15.186 --> 00:44:17.086 A:middle
so that they sit right on
top of London and Paris.

00:44:18.396 --> 00:44:21.626 A:middle
So MKMapSnapshotter has an
API called pointForCoordinate:

00:44:21.626 --> 00:44:24.756 A:middle
which will convert a latitude
and longitude into a point

00:44:24.756 --> 00:44:27.166 A:middle
in the coordinate
system of your image.

00:44:28.296 --> 00:44:31.166 A:middle
So I call those methods
for both London and Paris

00:44:31.166 --> 00:44:33.056 A:middle
to get the point of the image
for both London and Paris.

00:44:33.776 --> 00:44:37.136 A:middle
And those points sit right
on top of London and Paris.

00:44:37.456 --> 00:44:39.456 A:middle
But pins are actually
a rectangular image

00:44:39.456 --> 00:44:42.306 A:middle
and I don't want the, you
know, top left part of the pin

00:44:42.306 --> 00:44:44.196 A:middle
to be sitting on London and
Paris because then it's going

00:44:44.196 --> 00:44:45.956 A:middle
to look like the bottom of
the pin is somewhere off

00:44:45.956 --> 00:44:47.636 A:middle
in those respective countries.

00:44:48.846 --> 00:44:53.236 A:middle
So what I need to do is offset
that projected point to take

00:44:53.236 --> 00:44:55.436 A:middle
into account the area of the pin

00:44:56.016 --> 00:44:57.336 A:middle
and not just the
area of the pin.

00:44:57.846 --> 00:45:00.746 A:middle
MKAnnotationView also
has an offset property

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:44:57.846 --> 00:45:00.746 A:middle
MKAnnotationView also
has an offset property

00:45:01.426 --> 00:45:04.866 A:middle
and MapKit normally uses this
to offset your annotation views

00:45:04.866 --> 00:45:07.066 A:middle
such that a particular
anchor point

00:45:07.066 --> 00:45:09.946 A:middle
in your annotation view
sits at the point of the map

00:45:09.996 --> 00:45:11.156 A:middle
that you're trying to annotate.

00:45:11.996 --> 00:45:14.256 A:middle
Now because you're doing
the drawing you need to take

00:45:14.256 --> 00:45:15.896 A:middle
into account the center offset.

00:45:16.916 --> 00:45:17.996 A:middle
So here we are.

00:45:17.996 --> 00:45:19.326 A:middle
We get the center
offset for a pin

00:45:20.256 --> 00:45:24.906 A:middle
and on OS X NSViews support
a flipped orientation.

00:45:25.636 --> 00:45:28.996 A:middle
That means the coordinate
system of the view can originate

00:45:28.996 --> 00:45:30.636 A:middle
in the top left instead
of the bottom left

00:45:30.636 --> 00:45:31.886 A:middle
which is what's normal in OS X.

00:45:32.356 --> 00:45:34.356 A:middle
So you need to account
for that as well on OS X.

00:45:34.606 --> 00:45:40.086 A:middle
If the view is in a flipped
coordinate system simply invert

00:45:40.086 --> 00:45:40.936 A:middle
that center offset.

00:45:41.146 --> 00:45:44.796 A:middle
So multiply y by negative
one and you're done.

00:45:45.006 --> 00:45:47.766 A:middle
Okay so now we adjust
our projected point

00:45:48.426 --> 00:45:49.246 A:middle
so that the center

00:45:49.246 --> 00:45:51.136 A:middle
of the annotation view
sits on top of that point.

00:45:51.846 --> 00:45:55.666 A:middle
Then we adjust for the
center offset property

00:45:55.666 --> 00:46:00.036 A:middle
on MKAnnotationView to make sure
that the bottom of that pin sits

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:45:55.666 --> 00:46:00.036 A:middle
on MKAnnotationView to make sure
that the bottom of that pin sits

00:46:00.036 --> 00:46:02.606 A:middle
on the point for
London and for Paris.

00:46:03.196 --> 00:46:06.856 A:middle
Okay now we're ready to draw.

00:46:07.746 --> 00:46:10.096 A:middle
So you can use your normal
system drawing APIs on OS X.

00:46:10.096 --> 00:46:12.356 A:middle
It looks a little bit
different that iOS.

00:46:12.696 --> 00:46:18.626 A:middle
We lock focus on the map image;
we draw a pin on top of London

00:46:19.416 --> 00:46:21.536 A:middle
and draw the same pin
again on top of Paris.

00:46:21.536 --> 00:46:24.056 A:middle
Then we unlock focus
and we're done.

00:46:24.056 --> 00:46:28.326 A:middle
Now I'm ready to write
this image out to a file.

00:46:29.046 --> 00:46:31.716 A:middle
Drop in some code here.

00:46:31.936 --> 00:46:34.056 A:middle
And let's run it and see
what the image looks like.

00:46:34.896 --> 00:46:38.466 A:middle
Hit play and its
running and it's done.

00:46:38.466 --> 00:46:39.066 A:middle
It's pretty quick.

00:46:39.756 --> 00:46:43.126 A:middle
And we can just open up
this file and preview.

00:46:43.736 --> 00:46:45.886 A:middle
Boom there you got it.

00:46:46.386 --> 00:46:51.936 A:middle
[ Applause ]

00:46:52.436 --> 00:46:52.916 A:middle
All right.

00:46:52.916 --> 00:46:53.756 A:middle
Now while we're here --

00:46:54.216 --> 00:46:56.466 A:middle
I mentioned that the APIs
exactly the same as the iOS

00:46:56.466 --> 00:46:59.256 A:middle
so I have this already
implemented on iOS

00:46:59.256 --> 00:47:00.736 A:middle
and I just want you
to take a look at it.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:46:59.256 --> 00:47:00.736 A:middle
and I just want you
to take a look at it.

00:47:01.116 --> 00:47:02.266 A:middle
It's almost exactly the same.

00:47:02.266 --> 00:47:03.596 A:middle
Here's that same helper method,

00:47:03.596 --> 00:47:05.286 A:middle
application did finish
launching.

00:47:05.816 --> 00:47:07.316 A:middle
I'm doing a little work
to show our window.

00:47:07.376 --> 00:47:10.536 A:middle
I started out with the same
London and Paris coordinate,

00:47:11.246 --> 00:47:15.116 A:middle
pick a region, set
up some options --

00:47:15.506 --> 00:47:20.756 A:middle
they're exactly the same --
create my snapshotter, same API,

00:47:21.526 --> 00:47:25.386 A:middle
start the asynch task,
same API, handle errors.

00:47:25.996 --> 00:47:28.106 A:middle
Now I'm using UIImage
instead of NSImage.

00:47:28.276 --> 00:47:29.686 A:middle
That's a platform difference.

00:47:30.086 --> 00:47:31.966 A:middle
But I can still use
MKPinAnnotation view

00:47:31.966 --> 00:47:33.116 A:middle
to drop pins on my image.

00:47:33.176 --> 00:47:35.606 A:middle
I still have to account
for offsets.

00:47:35.606 --> 00:47:38.556 A:middle
I don't have to worry about
flipped coordinate systems

00:47:38.556 --> 00:47:40.046 A:middle
because UIView has no notion.

00:47:40.616 --> 00:47:44.996 A:middle
I do the same math to
account for the offset.

00:47:44.996 --> 00:47:50.766 A:middle
I'm using UIKit's drawing APIs
to draw pins on top of my image

00:47:51.966 --> 00:47:54.836 A:middle
and then I'm using the same
APIs to write that out to a file

00:47:54.836 --> 00:47:56.526 A:middle
and I'm going to
get the same image.

00:47:57.756 --> 00:47:59.536 A:middle
So same API on both platforms.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:48:00.576 --> 00:48:03.276 A:middle
So that's creating a Snapshot.

00:48:03.776 --> 00:48:09.576 A:middle
[ Applause ]

00:48:10.076 --> 00:48:15.136 A:middle
So what did we see there?

00:48:15.366 --> 00:48:18.346 A:middle
As you saw iOS and OS X
share really similar APIs.

00:48:18.346 --> 00:48:20.226 A:middle
Primarily where the
differences are it's due

00:48:20.226 --> 00:48:24.006 A:middle
to the platform differences
like CGPoint on iOS

00:48:24.006 --> 00:48:25.536 A:middle
and use NSPoint on OS X.

00:48:26.036 --> 00:48:29.876 A:middle
We use UIImage on iOS
and use NSImage on OS X.

00:48:32.116 --> 00:48:35.056 A:middle
We saw that you can use
annotation view classes

00:48:35.056 --> 00:48:36.786 A:middle
to draw annotation
views on your maps.

00:48:36.786 --> 00:48:39.356 A:middle
So you don't have to rebuild
anything, you don't have

00:48:39.356 --> 00:48:41.016 A:middle
to go digging through
the iOS SDK trying

00:48:41.016 --> 00:48:42.386 A:middle
to find a pin image
to redraw it.

00:48:42.386 --> 00:48:44.536 A:middle
You can just use
MKPinAnnotation view

00:48:44.536 --> 00:48:46.436 A:middle
to draw pins on your snapshot.

00:48:50.096 --> 00:48:51.246 A:middle
So, to recap.

00:48:52.076 --> 00:48:53.276 A:middle
Why do you want to
use snapshots?

00:48:53.996 --> 00:48:55.276 A:middle
Well you want to use
them for performance.

00:48:55.276 --> 00:48:57.486 A:middle
We saw those videos at the
beginning where if you try

00:48:57.486 --> 00:49:00.766 A:middle
to stick an MKMapView inside
of a table view and then scroll

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:48:57.486 --> 00:49:00.766 A:middle
to stick an MKMapView inside
of a table view and then scroll

00:49:00.766 --> 00:49:03.136 A:middle
that table view it really
didn't perform like we liked.

00:49:03.866 --> 00:49:05.986 A:middle
Instead use snapshots; it's
going to be a lot better.

00:49:06.556 --> 00:49:09.326 A:middle
We saw that we want to use
snapshots for printing.

00:49:09.326 --> 00:49:11.896 A:middle
It's really the only reliable
way to generate a snapshot

00:49:11.896 --> 00:49:16.486 A:middle
of a map while blocking
the main thread.

00:49:16.786 --> 00:49:19.006 A:middle
And if you're use -- trying
to generate Snapshots today

00:49:19.006 --> 00:49:22.206 A:middle
by using the rendering concepts
API on CALayer just throw

00:49:22.206 --> 00:49:24.726 A:middle
that code away and
use snapshots instead.

00:49:25.326 --> 00:49:28.026 A:middle
So basically anytime
you want an image

00:49:28.026 --> 00:49:29.796 A:middle
of a map try using
snapshots first.

00:49:29.796 --> 00:49:31.036 A:middle
It's probably going
to do what you want.

00:49:31.526 --> 00:49:36.106 A:middle
So that's putting Map
Kit in Perspective.

00:49:36.756 --> 00:49:41.096 A:middle
We introduced Map
Kit on OS X this year

00:49:42.346 --> 00:49:43.856 A:middle
and the APIs pretty
much the same.

00:49:44.416 --> 00:49:48.566 A:middle
We saw that if you just
recompile your app you're going

00:49:48.566 --> 00:49:52.336 A:middle
to get pitching and rotation for
free and it mostly just works.

00:49:52.636 --> 00:49:54.146 A:middle
But there are some
changes to our API

00:49:54.146 --> 00:49:56.816 A:middle
that if you're really
using some corner

00:49:56.816 --> 00:49:59.566 A:middle
of Map Kit it may affect
you and so you just need

00:49:59.566 --> 00:50:04.726 A:middle
to change your app a little
bit to account for that.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:49:59.566 --> 00:50:04.726 A:middle
to change your app a little
bit to account for that.

00:50:04.726 --> 00:50:07.226 A:middle
Then make sure you
adopt MKMapCamera

00:50:07.226 --> 00:50:09.466 A:middle
to take full advantage
of 3D in your app.

00:50:10.956 --> 00:50:13.896 A:middle
Lastly, use MkMapSnapshotter
anytime you want an image

00:50:13.896 --> 00:50:16.326 A:middle
of a map but you don't
need the interactivity

00:50:16.326 --> 00:50:17.666 A:middle
of a full blown MKMapView.

00:50:18.256 --> 00:50:24.396 A:middle
We have a wonderful evangelist
to help answer your questions

00:50:24.436 --> 00:50:26.756 A:middle
if you need any help after WWDC.

00:50:26.756 --> 00:50:27.866 A:middle
His name is Paul Marcos

00:50:27.866 --> 00:50:29.206 A:middle
and there's his email
address up there.

00:50:29.306 --> 00:50:31.016 A:middle
We also have a whole bunch

00:50:31.016 --> 00:50:32.896 A:middle
of documentation you can
find inside of Xcode.

00:50:32.896 --> 00:50:35.866 A:middle
It's a long URL but if you just
go to Xcode help and search

00:50:35.866 --> 00:50:37.356 A:middle
for MKMapView you're
going to find that.

00:50:38.096 --> 00:50:40.106 A:middle
We also have a location
awareness programing guide

00:50:40.106 --> 00:50:42.986 A:middle
that's chalk full of
goodies on how to use Map Kit

00:50:42.986 --> 00:50:44.176 A:middle
and Core Location together.

00:50:44.176 --> 00:50:46.546 A:middle
And there's also the
developer forums.

00:50:46.546 --> 00:50:48.086 A:middle
I highly encourage
you to use those.

00:50:48.086 --> 00:50:49.946 A:middle
A lot of the Map Kit
engineers hang out in there

00:50:49.946 --> 00:50:55.446 A:middle
and we're there to answer
your questions and help you.

00:50:55.676 --> 00:50:57.006 A:middle
So we had a session
this morning.

00:50:57.006 --> 00:50:58.636 A:middle
It was a great session.

00:50:58.636 --> 00:50:59.906 A:middle
There's a lot of new
things in Map Kit

00:50:59.906 --> 00:51:01.086 A:middle
that I couldn't go
over here today.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:50:59.906 --> 00:51:01.086 A:middle
that I couldn't go
over here today.

00:51:01.466 --> 00:51:03.536 A:middle
We introduced a ton of
new APIs on overlays.

00:51:03.536 --> 00:51:07.026 A:middle
We also introduced search
APIs and directions APIs.

00:51:07.596 --> 00:51:10.296 A:middle
So if you missed that
session catch the video later.

00:51:10.296 --> 00:51:11.456 A:middle
It's really worth your time.

00:51:12.876 --> 00:51:13.456 A:middle
That's it.

00:51:13.666 --> 00:51:17.186 A:middle
Thank you for your time.

00:51:17.417 --> 00:51:19.417 A:middle
[ Applause ]

00:51:19.648 --> 00:51:21.648 A:middle
[ Silence ]