When working on yet another location app I wanted to try out the pin float method used
in Apple Maps app. Press and hold pin. See it hover. Move and drop it. Digging through
documentation I could not any inbuilt method to achieve this…
Let’s dig in - MKAnnotationView is extending UIView. This means I can show there anything?
Simple rect with image in center should be enough to test the theory.
Standard code to show annotation view on map:
And here is custom annotation we will be using:
Making the pin draggable is just one line of code
Now to make it ‘hover’… First we need to figure out in what dragging state pin currently
is. For this we need to override ‘setDragState’ in our custom annotation view.
Let’s also add some room for annotation image to ‘float’ in. And we position image at
the bottom of annotation.
Here comes the magic:
When annotation dragging is started (Line 5), then image is animated
to the top of annotation view. When dragging has ended (Line 11), then
image is moved back to bottom of animation view. Thus giving the illusion of floating.
Note: there is some code in view controller to reset annotation dragging state. Otherwise
animations would have stayed in odd state.
Here we have the effect animated:
So there actually is no magic…
Where to go from here
To improve tap detection, annotation view should be made also wider.
When lifting pin under the users finger, it would be better to use top position of drag
end for new annotation location, instead of moving it back under user finger. That would
allow for more precise location selection. And would avoid multiple failed move attempts :)