Monthly Archives: November 2010

iPhone MkMapview and MKAnnotation, the beauty of them.


iphone mkmapview

iphone mkmapview with annotation upto v3.x

Ok. let’s start from iPhone mapview.  When iPhone first hit the market back in ’07, I wasn’t able to get my hands on one right away. But, one thing that struck me like a thunderbolt was the fact that *every iphone* on street had an ability to locate where its user was.

Back in ’05 when I hassled my ass around J2ME, GPS-equipped mobile phones were super rare and everyone just hoped in their sweetest dream that every mobile phone would one day have it. Then barely after 2 years, it happened on my naked eyes.  How shameless…

On top of it, iPhone was capable to display the beautiful Google map. When Steve casually called a Starbucks from his iphone map screen, I almost got an heart attack. What it meant was a wide, crazy amount of opportunity to do entirely insane things like never before.

When I finally start coding on MKMapView class this year, however, things aren’t so pretty. Not that I have a huge complain because I vividly recall what it was like to display a map on J2ME device.  Even black and white images with no means of scroll and multi-touch were God-send back then.  Now what, a colorful map as big as your palm leaps and bounds, and I call it “not so perdy”? I’m a whiny little baby, yeah I know.

Let’s look at a screen shot and get to the detail. The screen above is a typical MKMapView (map itself) and MKMapAnnotations (red pins). It’s quite useful and displays wherever place you feel worthy. But the issue is you only have red pins.  Ok, you can have a little info banner on top of them, but that is it.

Now in iOS 4, Apple enables map annotations to be an image icon such that prominent apps like Foursquare now displays places with icons. Things have evolved quite a bit here. Let’s take a look.

Foursquare "Places" screen

With just a few different simple icons, your iphone map becomes more visual and shortens the time to prioritize places according to your need. Just few icons do that.

Yet, it’s only 2D, and I don’t know about you but the world I live in is full of colorful 3D objects, not red pins, and white squares, damn it!

On top of that nothing animates; no movements, no color changes, no blinking arrows to show where hot events are happening right now, and many more.

Plus, when you zoom out, icons stack on top of each other so that you can’t see what’s what very clearly. Well, this isn’t likely impossible to solve, but requires different size of icons for each zoom level.

We can solve all these issues with OpenGL 3D. iPhone has a very powerful 3D graphic chipset as we all know, and OpenGLES 1.0 is supported by even the oldest hardware. (If you want to find out how powerful iPhone 3D graphics is, just look here, Unreal Epic Citadel. if you haven’t seen it, I’m sure your jaw will drop.)

In short, what I was aiming at was pretty much like Tomtom iphone GPS’ 3D map view with higher FPS. In Tomtom’s product, map scrolls underneath of 3D objects when you are navigating. Objects changes their sizes and all the road signs keep facing you as you move along. Imagine that happens on your Foursquare screen.

You see what I’m getting at, right?

I watched their video clips very carefully, and thought ‘ok, that’s easy, just overlap 3D view on top of MKMapView and we’re done!’ Well, if it was that easy, I wouldn’t write a blog about it, would I? :P

Anyway, here is a screen shot I rendered a few months ago, and I’ll continue from 3D rendering part next time.

3D stars on MKMapView.

Next : OpenGL on top of Mapview part 1

Rendering 3D objects on iPhone map view.

I’m going to post a series of topics about rendering 3D objects on iPhone map view.

I’ve been working on this for a good while,  and am finally ready to share what I have discovered.  Not everything is very fantastic since Apple has *THE* upper hand to control every aspects of how objects are shown on their device.  But, there are always way to get around that and I’ll cover that too.  So, stay tuned. (well, I know my blog does not have oh-so-many audiences, so if you find upcoming entries interesting, please share on twitter and facebook. :)

*Wordpress plugins for sharing on Twitter and Facebook are just installed and tested. Thanks awe.sm team for providing those! (sorry, I don’t use you guys’ service.)
  1. iPhone MkMapview and MKAnnotation, the beauty of them.
  2. OpenGL on top of Mapview part 1