Ariya Hidayat
WebKit
Graphics Dojo
Posted by Ariya Hidayat
 in WebKit, Graphics Dojo
 on Wednesday, July 29, 2009 @ 06:53

Google Maps, or any similar application, becomes very important in our digital life. Not surprisingly, it also becomes easier to integrate some map functionalities into our application. This is something that attracts the developer side of each and every one of us. The brand-new, work-in-progress Google Maps API v3, via the use of QtWebKit module, is the instant solution for embedding maps in your own beloved Qt-based application.

Since doing so would be almost trivial (you can even do it within Designer or Creator), I decided to raise the bar a bit. What if, when your press the mouse button and hold it for a while, a magnifying glass (remember Sherlock Holmes?) shows up and you can move it around? Thanks to Qt, surprisingly (again) implementing such a demo is easy, the result is less than 300 lines of code, and thus I am glad to share you how it looks like, in a static screenshot and a moving picture (watch in YouTube):



The code is checked in already to the Graphics Dojo repository, it is securely stashed under the mapzoom subdirectory. If you do not bother to digest the code, here is the trick. I keep a larger version of the map in a separate QWebPage. When the user press-and-hold the mouse button for a while, this hidden page is used to render the maps under the magnifying glass, clipped to the shape of a circle. Simple, isn’t it? Of course, you can still move the maps by dragging the mouse, just like in the normal use of Google Maps.

Now I am sure some of you are ready to throw the questions. What about Qt/S60 version? What about OpenStreetMap? Relax and be patient a bit. The combination of both will surely make a cameo, some time in the near future, in the form of another example (a successor to this one). Meanwhile, enjoy your maps, Sherlock!

8 Responses to “Maps with a Magnifying Glass”

» Posted by cbismuth
 on Wednesday, July 29, 2009 @ 08:59

A really great feature and a really nice look & feel!

Thank you for this one!
Chris

» Posted by Jozef Mlich
 on Wednesday, July 29, 2009 @ 09:21

What about openstreetmaps? You can try to improve my map widget..
http://www.fit.vutbr.cz/%7Eimlich/data/cpp/qtMapWidget.rar

» Posted by Nishant
 on Thursday, July 30, 2009 @ 00:28

Just the perfect thing for my application!! i was just about to start on this module where the user can choose any lat/long easily using the map. My work is so much reduced!! Thanks again to the master ariya!

» Posted by Anonymous
 on Thursday, July 30, 2009 @ 06:50

It’s not properly centred. In the zoomed image, either the point below the mouse or the centre of the circle should be the same as the point clicked.

» Posted by ariya
 on Thursday, July 30, 2009 @ 08:39
Ariya Hidayat

Centering the point is a matter of commenting a line of code in mapzoom.cpp. A trivia: why did I decide to offset the magnifying glass? Hint: with a touch device, you pan around with a finger, not a mouse cursor.

» Posted by Hiral
 on Thursday, July 30, 2009 @ 13:22

Hi ariya,

How can we apply this mechnisam of ‘Mangifying glass’ to QGLWidget, can you please share some ideas?

Thank you.

» Posted by ariya
 on Thursday, July 30, 2009 @ 15:09
Ariya Hidayat

@Hiral: As I wrote in the blog text, just keep a larger version in a separate place and superimpose it when the glass pops up. Also, if you paint some vector graphics, better take a look at our Vector Deformation demo: http://doc.trolltech.com/4.5/demos-deform.html

» Posted by Scorp1us
 on Thursday, August 06, 2009 @ 15:02

I was thinking about this and came up with this:
for my iPhone, I just pinch. its nice, but not always ideal. It would be cool to have a button that places the magnifying glass and a slider that controls the zoom factor while the glass is active. This would allow me to inspect parts of a map (think: turns on a route) much more easily.



© 2008 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners.