WWDC2015 Session 206

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> SUMIT LONKAR: Good
afternoon, everyone.
Welcome to Session 206.
This is What's New
In the MapKit.
My name is Sumit Lonkar.
I am a software engineer
on the Maps team.
So, we have got a jam-packed
session for you this afternoon.
So without further
ado, let's get started.
Before we begin,
first take a look
at today's session's agenda.
Our first topic of today
is going to be improvements
to existing MapKit API.
Here, I will mainly talk
about new features --
sorry, here, I'll mainly talk
about our new APIs that we added
to support our existing
features.
After that, I'll talk about
Transit and we'll mainly focus
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
After that, I'll talk about
Transit and we'll mainly focus
on Transit in MapKit's
perspective.
And finally we will
have a Flyover.
Flyover is a brand
new MapType to MapKit.
It's been available to iOS
applications since iOS 6,
and now we are bringing
it to you guys.
And along with this topic we
will have various demos for you.
So you can see all these
newly added API in action.
So with that outline,
let's jump right
into our first topic today,
Improvements to Existing API.
Based on comments and requests
from developers like you,
this year we have taken some
serious effort to make sure
that you and your application
get best out of MapKit.
These newly added
API will help you
to customize your MapKit
experience in your application
as well as enable great user
experience, and for developers
like you, it means way
less code on your side.
So, let's look at
these API one by one.
To start with, Pin
Color Customization.
So, MapKit pins, are also
known as MKAnnotationView,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So, MapKit pins, are also
known as MKAnnotationView,
has been an integral part of
MapKit since the very beginning.
They provide very
concrete behavior
to denote any singular
point on a map.
And when it comes
to customization,
there is not much you
can do about with them.
So, you can make them red
or you can make them green.
Or purple.
And that's it.
That's all you get, all you
get is only three choices.
And it's been like
that since iOS 3.
And now we are bringing
you a new API
that lets you customize this.
So we are introducing
it as a property
on MKPinAnnotationView,
called pinTintColor.
On iOS it takes UIColor and
on OS X it takes NSColor.
Now, as underneath, it's
UIColor and NSColor,
that means you have
millions of different colors
that you can put on your Map.
I would like to take
this opportunity to point
out that we are deprecating
our old API called pinColor.
So, if your application
is using this API,
make sure that you
update it to the new API
that we are providing.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that we are providing.
That's all about Pin
Color Customization.
Let's move on to go to
Callout Customization.
And before we dive into
callouts, I'll first take
up some time to talk
about callout.
For those who have been
using it for a long time,
it is just going to
be a refresher course.
So, what is this callout, the
callout is the white bubble
that pops up when you
tap on an annotation.
Primarily it has four
different components.
One, the title.
Second, you get a subtitle that
goes right below the title,
and you have a right accessory
view and a left accessory view.
Normally, these four
components are good enough
to provide us enough, good
enough to give a little bit
of information about the point
or the coordinate
they are representing,
but the problem arises when
the content size increases.
For example, in this
callout, all right,
in this callout you can see
the subtitle is getting clipped
at one point.
So what do you have to do
to customize these callouts
to fit your application needs?
Well, it turns out, there
are a couple of work-arounds
that developers have
been trying.
Sometimes they run into
issues, like, to start with,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Sometimes they run into
issues, like, to start with,
we have something like
this in a map view
where you tap -- a
maps application.
So, when you tap on
annotations you get a POI
and a callout with
a Yelp review.
And in order to implement
a similar kind
of behavior we have seen
developers do something
like this, where they put
Emojis in their subtitle.
I mean, it's fine for
something like this.
But what happens when you go
implement something complex
like this?
Well, it turns out it
is not a good solution.
And in order to solve this
problem we are introducing a new
way, in terms of a
property that will help you
to customize the callout.
The property we are
introducing is called
detailCalloutAccessoryView.
On iOS it takes a UIView,
and on OS X it takes NSView.
Again, it's a UIView and NSView.
That means you can customize
it to a greater length.
So, even if you want
to use, like, a --
you can do it and it will open
up the endless possibilities
of customizing these callouts.
Again, these callouts
support auto layout,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Again, these callouts
support auto layout,
right to left languages.
That means everything
is in there for you,
and all you need is one
single line of code.
Let's quickly take a
look at a sample code
and how one would use
it in their application.
So, here, I have a callback
method that gets fired
when you tap on an annotation.
I'll start off with just setting
up detailCalloutAccessory
property,
detailCalloutAccessoryView
property to be a UIImageView.
As you can see I'm just placing
an image of the Taj Mahal
in that callout, and that's
it, that's all you need to do
to customize this callout.
Isn't that great?
As I mentioned earlier, it
is just a UIView and NSView.
We are really excited to
give it out to you guys
and see what you guys can
achieve with this thing.
Hopefully we will see
those results coming soon.
So that's all about
Callout Customization.
Let's move on to
Map Customizations.
In this particular topic we will
be talking about new handy APIs
that will let you control
what goes on your Map View.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that will let you control
what goes on your Map View.
Like, you have a map unit
inside your application,
how can you control the
content of this Map View?
These APIs have been
available to maps applications
for a couple of years now
and now we are bringing
it to you guys.
Let's start off with traffic.
Now you have an ability
to show any high traffic
on your Map View and all you
have to do is put a flag, like,
set a flag on the Map
View called showsTraffic.
Similar to the traffic,
we're also providing a way
to show or hide a scale.
So you can either
show or hide a scale
in your left top
corner of your Map View.
And similar to a scale, you
can also show and hide compass.
You might have noticed that
these APIs are very similar
to our existing APIs
like showsPointsOfInterest
or showsBuildings.
We believe with the use of
these APIs, you will be able
to customize Map View
inside your application
and provide a great
user experience.
So that's Map Customization.
Other than maps, other than
these APIs we talked about,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Other than maps, other than
these APIs we talked about,
we have various other
improvements to MapKit as well.
First of all, a time
zone support.
We have added a time zones
property on our MK map item.
You can use that property to
get the associated time zone.
You can use it with CLGeocoder.
So you can find out a
time zone associated
with a particular coordinate.
Or you can also use it
with MKLocalSearch, so,
you can search an area for a
point of interest or anything
that you would like to search.
And you can find out a time
zone associated with that.
Besides that, we have also done
various improvements to MapKit
for better Swift compatibility,
and we also added
a WatchKit support
to launch maps applications
on your watch
from your own application.
So that's it, so that's all the
improvements that we have done
to existing features in MapKit.
Let's move on to the next topic
and personal favorite
of mine, Transit.
We were pretty excited
about yesterday's keynote,
with the moment we
announced the new feature
for maps application Transit.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
for maps application Transit.
And today we will mainly focus
on what it means to MapKit.
We have worked really
hard on this feature.
And while designing this feature
we kept our user at the center
of the development process.
And in order to provide a
similar kind of experience
in your application,
we would like you
to leverage maps application to
provide a similar experience.
And the way we are
going to do that is
by providing you a
distinct entry point
to a Maps Transit feature.
Let's look at this
point one by one.
First one, ability to
request a Transit ETA.
If you use MKDirections
protocol, MKDirections class
and related APIs before, then
you know, you might be aware
of these two TransportType
that we already support,
automobile and walking.
You can request directions
and ETAs
for these two transport types.
And this year we are
adding a new TransportType,
MKDirectionsTransportType,
Transit.
With this TransportType, you
will be able to request ETAs.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
With this TransportType, you
will be able to request ETAs.
And I would like to point
it out, you will only,
as of now you will only
request ETAs for Transit.
You won't get a Transit
direction.
So, let's see how you can --
before we move on to a sample
code, let's see how you can,
what you get besides ETA.
Well, you get expected
arrival timing
and expected departure timing.
Given the frequency, given
the nature of the frequency
of our transit varies based on
the time of the day and a place,
it is really important that
we provide this information.
We believe with this
information, you will be able
to give out a great
user experience
to your application user base.
Let's take a look
at a sample code,
how can we request
these Transit ETAs.
Here, I have a helper
function called getTransitETA.
So, I'll start off with
creating an MKDirectionsRequest.
After that I'll set a source
and a destination on it,
and once I have that, I'll set
our transport type to be Transit
because we are interested
in getting our Transit ETA.
Once, after that I will create
MKDirections object using the
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Once, after that I will create
MKDirections object using the
request that we just created,
and I'll call it calculate ETA
With Completion Handler
on that direction object,
and in CompletionHandler
I will handle the response
that is coming back
from the server.
So, that's a Transit ETA.
Now, once we have
the Transit ETA,
in order to provide a complete
experience we are giving you a
way to launch maps applications
into a Transit mode.
As of now you can launch maps
using various different launch
options on a map,
along with a map item,
and the
MKLaunchOptionsDirectionsModeKey
helps you to point out which
maps application mode you would
like to launch in.
So as of now, we are
supporting a Driving mode
and a Walking mode, and now
with iOS 9 we are also
introducing a Transit mode.
By using this mode, you will be
able to launch maps application
from your application.
Let's quickly take a look
at a sample code here.
So, here, I have a
helper function called
openInMapsTransit, which
takes a coordinate.
And I will just basically start
off with creating an MK map item
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And I will just basically start
off with creating an MK map item
with that parsing coordinate.
After that I'll create a
dictionary launch options
with the mode set to be Transit.
And once I have that, all I have
to do is call
openInMapsWithLaunchOptions
on that map item.
It will basically launch our
maps application in Transit mode
with the mapped item
to be a destination.
So that is enough
of our talking.
Let's see all these
APIs in action.
All right.
So for this demo purpose I have
created a city tour application
for San Francisco.
It is basically just
a simple map view
with various different
annotations in it.
I'm just going to quickly run it
so you can see what
I have so far.
So, as you can see, we
have a map of San Francisco
and I plotted various different
annotations with the landmarks,
like we have Sutro
Tower over here,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
like we have Sutro
Tower over here,
we have Golden Gate
bridge, and all that,
and I have also taken
the liberty
to set the pin colors on these.
So if I scroll down to the
viewForAnnotation callback,
you can see I have set in
a pin tint color property
to customize these pin colors.
This is okay.
As the demo progresses
we will try
to customize this more and more.
To begin with, what I'm
going to do is I'm going
to add a Transit
ETA into a subtitle.
So in order to do so I
have created a simple
helper function.
I am going to drag
and drop that in here.
So I have this helper function
that basically takes
our annotation,
which is a landmark
class for local object.
And then I will create a
MKDirectionsRequest in there.
So you can see I have created
an MKDirectionsRequest.
After that I'm just
setting a source
and a destination
on that request.
And finally I'm setting a
transport type to be Transit
because we are interested
in a Transit ETA.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
because we are interested
in a Transit ETA.
Once I have that,
I'm going to go
and create an MKDirections
object.
So in here I have created an
MKDirections object using the
request and in CompletionHandler
I'm just setting an
annotation.subtitle to be our
estimated time of arrival.
And I am quickly going to call
this function before I drop my
annotation on a map view.
So let's call that
function here LandMarkPin.
So, all right, let's run it.
There we go, so city
hall is about 22 minutes
from Moscone West by
using a public transport.
Let's check out some other pins.
Ferry Building, it's 17 minutes.
So this is nice.
I mean, this gives initial
information to your user
like how long will it take to go
to this destination using
Transit, but in order
to provide a complete Transit
experience we have to find
out a way to bring them
to a maps application.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
out a way to bring them
to a maps application.
And for this demo purpose,
what I am going to do is,
I'm going to put a right callout
accessory view on my callout,
and when I tap it, I will take
the user to a maps application.
So we quickly stop it, and let's
go back to our callback method.
And in here I am going to set
a rightCalloutAccessoryView
on my AnnotationView.
I added my
rightCalloutAccessoryView.
Let's run it.
All right.
So you can see a right
callout accessory view.
We have added a bus icon here.
Nothing is happening because we
haven't implemented the callback
method that gets called every
single time a callout accessory
control is tapped.
So let's quickly go and
add that method down here.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So this is the callback method
that gets called every time
a callout control accessory
is pressed.
Once I have this, I am
going to add my code
to launch a given map item
into a maps application.
So here I start off with
creating a dictionary object
with the mode Key, and the
mode key set to be Transit.
After that by getting
a coordinate
from the past annotation I'm
going to create an MKMapItem.
And once I have that, I am going
to use open in launch options
on mapItem to launch this
map item into a Transit mode.
Let's quickly go ahead and
run our application again.
All right.
Let's see, Ferry Building.
Tap on it and there we go.
We have a maps application
into a Transit mode
and you can see it takes 18
minutes by bus number 40.
And let's go back to
our sample app again
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And let's go back to
our sample app again
and try something else.
Let's see if we got
a response for Sutro.
Yeah, there we go.
That's our response.
Again 45 minutes by Transit.
That's fairly long.
Oh, I see.
It is something wrong.
Oh, bus stops moved, so probably
that's the reason, long time.
Anyway, that's a Transit
experience in a MapKit.
Now I would like to talk
about how we previously talked
about the callout customization.
Now let's go and see how
can we use those callouts
in this, our sample app.
All right.
So, again, we are going to go
back to our callback method
that gets called every single
time the annotation is tapped.
And down here I'm just going
to set a detailed callout
accessory property on this view.
For the data that I'm getting
for these landmarks I
have some of the images.
So let's set a UIImageView
in a detailCallout
and see how they look
in our annotation.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and see how they look
in our annotation.
So, here I'm just
reading my image data,
I'm reading my image name
from a plist that I'm parsing,
and then I'm creating a UIImage,
and after that I'm creating
a UIImageView and setting it
on a detailCalloutAccessoryView.
So let's run this thing.
Okay. All right.
So I think I have an image
for Golden Gate Bridge.
So let's go and take
a look at it.
So there we go.
That's a nice image of
the Golden Gate Bridge.
Let's see what else I have.
I have the Ferry
Building as well.
Okay, that's current location.
All right.
Okay. So, Transamerica
Pyramid doesn't have a,
Transamerica Pyramid
doesn't have an image.
So you can see when we set a
detail callout accessory view
on a callout, a detail
callout accessory,
we will always get
precedence or a subtitle.
For Golden Gate Bridge
we did add a detail,
we did have a subtitle,
but as soon as we set a detail
callout accessory view on it,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
but as soon as we set a detail
callout accessory view on it,
it got a precedence
or a subtitle.
So, for some of these other
landmarks, I don't have images.
So, let's add text in there.
So, I have also created
a text view that will --
so here I have a
custom text view
that basically I just have set
some height and weight on it.
And that will allow
me to show the content
in our detail callout
accessory view.
Similar to the images, I'm
reading data from my plist
that I have been using
to plot these landmarks.
I just set it that
detailTextView
to be a
detailCalloutAccessoryView.
All right.
So I'm quickly going
to run it again.
Okay. All right.
So let's see.
As you can see now we have
a nice text view down here
in Sutro Tower callout.
Let's check on something else.
Same thing, for City Hall
we also have a nice text.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Same thing, for City Hall
we also have a nice text.
So here I have like a one
callout with a subtitle,
one callout with a UIImageView
and one callout with a TextView.
That's all the beauty
of this API.
We are really excited to offer
it to you and I am damn sure
that you guys will come
up with something amazing.
(Applause.)
So what we learn from this demo,
we learn how we can
customize our pin colors,
we learn how we can
customize our callouts.
We also learn how to
request Transit ETAs
and we also learn how to bring
users to a maps application
to provide a rich
transit experience.
That's all from my end.
To talk about Flyover, I would
like to call upon Elisabeth.
(Applause.)
>> ELISABETH LINDKVIST: Okay.
Right, let's talk about Flyover.
My name is Elisabeth Lindkvist,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
My name is Elisabeth Lindkvist,
and I'm also an engineer
on the maps team.
And these are the things
that I will be talking
to you about today.
So, first of all,
what is Flyover?
How will it work in
your application?
How do you set the right
region and handle the camera
when you are using Flyover?
And I will also discuss how
Flyover will work together
with some of our
existing MapKit API.
But to start with, what do
we actually mean by Flyover?
For example, this is Flyover.
It's photo-realistic 3D models
of various cities and landmarks.
They are available in
many different places all
around the world.
And they have been available
in the maps application
since iOS 6.
And we are now giving
you the opportunity
to show these interactive
3D views to your users.
As you might have noticed
in the maps application
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
As you might have noticed
in the maps application
where satellite imagery is not
available you will instead see
flat satellite imagery
being displayed on top
of a 3D height map which
represents the terrain.
And this will also be
the case in your apps.
Another important aspect
of Flyover is this:
it is being displayed on a globe
rather than being projected
into 2D like our
other map types are.
This one has some implications
for how you handle
your region setting.
And this is something that I
will be returning to shortly.
So, what do you need to do
to get a Flyover view
in your application?
If you used MapKit before,
I'm sure you are familiar
with MK map type, which
is the property you set
on an MK map view, in
order to choose which type
of data you will be displaying.
We have standard,
which is a regular map.
We have satellite, which is
a top-down satellite view.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We have satellite, which is
a top-down satellite view.
And we have hybrid, which adds
things like roads and labels
and points of interest
to the satellite view.
And we are now introducing
two new map types,
Satellite Flyover
and Hybrid Flyover.
So in order to display
something like this in your app,
what you would do is
just set the map type
of your map view to
Satellite Flyover.
If you want to add things such
as labels, points of interest,
roads, and borders, you would
instead use the Hybrid Flyover
map type.
Now, as I mentioned, there are
some things you really need
to consider when using Flyover.
One of the most important ones
is how you set the visible
region of your map.
You might be familiar with
the several methods in MapKit
that use rectangles such as
MKCoordinateRegion and MKMapRect
in order to set and get the
visible region of your map.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in order to set and get the
visible region of your map.
However, the visible area
of your map view is
not always a rectangle.
In iOS 7 we introduced
the possibility
to view a pitched map view
where you are viewing
the map at an angle.
And when you do that,
the visible area will not
actually be a perfect rectangle,
and this will also be
the case in Flyover
as you can view pitched
map views there as well.
Now, if we take a look
at this region and zoom
out a bit we can see the actual
shape of the visible area.
And what we do in this case is
that we define the
visible region of this map
as the rectangle which is
enclosing what you are actually
seeing on screen.
So it will be the blue
rectangle in this case.
And this will work exactly
in the same way in Flyover.
The visible region will be
defined as the rectangle
that is enclosing
whatever you see on screen.
Now, in Flyover, a view does not
necessarily have to be pitched
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, in Flyover, a view does not
necessarily have to be pitched
in order to not be rectangular.
If you have a region such as
this, which is fairly large,
and you try to set the visible
region to the blue rectangle
in this case you end up
with something like this.
And the point here is
that a rectangular
representation will always be an
approximation since Flyover
is being shown on a globe.
And, also, if you have a very
large region there will be some
areas that are not
actually displayed.
So, in this case, parts
of the visible region are
actually behind the globe.
So, the recommended way, even
though there are some cases
where rectangular region setting
works just fine in Flyover
and with pitched map
views, for example,
if you have a top-down view
where if you're very zoomed in,
the recommended way to make sure
that you are really
displaying exactly the part
of the world you want to
is to use MKMapCamera.
MKMapCamera was also
introduced in iOS 7 in 2013.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
MKMapCamera was also
introduced in iOS 7 in 2013.
And for more detailed
information about MKMapCamera,
and also about region setting
in general, I really recommend
that you check out Putting
MapKit in Perspective,
which is a talk from 2013.
But I will briefly recap
a bit about MKMapCamera.
It has four basic properties.
The center coordinate, which
is the position in the world
that you want to be shown in
the middle of your screen.
The heading which is the
direction the camera will be
looking in.
The pitch, how tilted
the view is,
at what angle you are looking
at the map, and the altitude,
which is the height in
meters above the map
where you want your
camera to be positioned.
There is also a convenience
initializer for MKMapCamera,
which takes the center
coordinates
and the eye coordinates,
where you want the camera
to be positioned,
and the eye altitude,
how high up you want
the camera to be,
and gives you back the
camera which is looking
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and gives you back the
camera which is looking
at that center coordinate
from the eye coordinate.
So, however, in Flyover there
is terrain and buildings
and all other sorts
of interesting things.
And that means that the
altitude is actually not
as straightforward
as you might think.
For example, is it the
height above the buildings?
The height above the terrain?
Or some sort of sea level?
So instead the distance
between the center coordinates
and the camera is actually
a much better measure
for this case.
And this is where we're adding a
new initializer to MKMapCamera.
And let me go through
quickly what this does.
You will start with
the center coordinates,
the position you want to be
in the middle of the screen.
And you will then specify a
distance in meters, how far away
from the center coordinate
you want the camera
to be positioned.
And notice how this
differs from the altitude.
You will also specify the pitch,
how angled you want the camera
to be, and the heading,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to be, and the heading,
the direction you
want to be looking in.
And using this initializer
you can get a camera
which is looking precisely
where you want to without having
to worry about what sort of
terrain or buildings happens
to be beneath your camera.
And I will now give a
short demo to show some
of the cool things you
can do with Flyover.
Okay. So Sumit was showing you
a tour application earlier.
And I have a similar application
here running on my Mac.
You can see the landmarks here.
For example here, Cliff House.
And as you might remember there
were some of these locations
that we did not actually
have any images for.
And I thought we
could use Flyover
in order to correct that.
So what I will be doing is,
that I will be adding a
detail callout accessory views
to my callouts here.
And I will use the
MKMap snapshot in order
to generate images from
Flyover, to set as the image
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to generate images from
Flyover, to set as the image
of the detail callout
accessory view.
The MKMap snapshot
is very useful
when you only really need
a static image of a map,
when you don't need
it to be interactive.
So I'm going to add a few
options for the snapshotter,
and the most important
one here being
that I'm setting the
mapType to Satellite Flyover.
I will then create an
MKMapCamera using our new
initializer to look at the
coordinates of the annotation.
And I will then use
these options
to create an MKMap snapshotter.
I'll start the snapshotter
and if it completes
without any error, I will use
the resulting image as the image
on my detail callout
accessory view.
Let's of course,
call this function.
Okay. Let's take a look
at what it looks like now.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Okay. Let's take a look
at what it looks like now.
So if I recall correctly,
Cliff House was one of those
that we didn't have
an image for.
And look at that, now we do.
(Applause.)
>> ELISABETH LINDKVIST:
And yeah,
I think we have a
few other ones here.
Like City Hall, for example.
Now, that's was pretty
cool, but Flyover views are
of course also interactive,
so I'm thinking we can add a
little animation to this view.
And I created a new
ViewController
which doesn't really do much
yet but it has an MKMapView.
And I will add some constants
that I think will be useful.
And then I will set
up the map view.
And so as we can note here
I'm also setting my map type
to Satellite Flyover.
I'm hiding the compass
and the zoom controls
that are visible in OS X.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I'm also creating an MKMapCamera
which initially looks
at the coordinates
of the landmark.
And that's about all
the setup I need.
Then I'm going to
create a couple
of additionally MKMapCameras.
First of all I have one
which is a bit tilted down,
my pitched camera.
And I'm also adding
a rotation here.
So it will do a little
spin around.
And as MKMapCamera is
an animatable property
in MKMapView, I will do a
little animation in order
to switch between these.
So here I am adding first
a little short animation
which will set the camera
to my pitched camera,
and we will tilt
the view down a bit,
and I am then adding a
little longer animation
which will do a little
spin around.
In my main View Controller
I have added a little right
callout accessory view here
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
which will open my
new View Controller.
So let's add that
button as well.
Okay. Let's take another
look at Cliff House.
There we go.
And I have my little button
here, and we are tilting down.
And spinning around.
(Applause.)
This was fun.
We'll just look at
this one, too,
because I think it
looks really cool.
There we go.
Transamerica Pyramid, too.
(Applause.)
Okay. So now we have
seen some of the things
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Okay. So now we have
seen some of the things
that you can do with Flyover.
So let's get back
to the presentation.
As I said at the beginning
there are also some parts
of the existing MapKit API that
I would like to talk about,
how they would work
together with Flyover.
And I'll start with
MK annotations.
MK annotations are used to
annotate a single coordinate
of the map and the most
common use case is the pins
that we have been
working with today.
If you are showing buildings
on the standard map type,
annotations will be
placed on top of those.
And this will also be the case
when you are using
the Flyover map types.
Annotations will be placed on
top of any buildings, trees,
large boats, statues,
whatever you may find
when you are exploring Flyover.
And next, MKOverlays.
Overlays are used to highlight
areas of the map rather
than just a single coordinate.
And if you are showing
buildings on a 3D map
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And if you are showing
buildings on a 3D map
in the standard map
type, you will notice
that overlays are being
occluded by the buildings.
This will work precisely
in the same way in Flyover.
Any overlays you
have will be occluded
by Flyover buildings and trees.
Something like that.
However, overlays will be
drawn on top of the terrain
so that they will
follow the ground.
Something like that.
So I think that's about
everything you need to know
in order to get started with
using Flyover in your apps
and I can't wait to see what
you will be doing with it.
To summarize a bit what we
have been talking about today,
we have added some new ways
for you to customize your pins,
your callouts, and the way you
display your map with traffic,
and compass, and scale.
We've added Transit ETA requests
and ways for you to launch
into the maps apps to
show Transit directions.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And we've also added
the Satellite Flyover
and Hybrid Flyover map types
so that you can show
photo-realistic 3D models
and satellite imagery
on terrain in your apps.
For more information,
please take a look
at the MapKit documentation
and the Developer Forums.
Thank you so much for coming.
(Applause.)