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!
No related posts.
8 comments
A really great feature and a really nice look & feel!
Thank you for this one!
Chris
What about openstreetmaps? You can try to improve my map widget..
http://www.fit.vutbr.cz/%7Eimlich/data/cpp/qtMapWidget.rar
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!
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.
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.
Hi ariya,
How can we apply this mechnisam of ‘Mangifying glass’ to QGLWidget, can you please share some ideas?
Thank you.
@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
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.
Comments on this entry are closed.