Drawing 3D OpenGL Graphics on Google Maps

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

1. Introduction

OpenGL 3D drawing on Google Maps is a concept of fetching a Google map on a separate window application (rather than on a browser) and extend the functionality of the window in such a way that it would provide feasibility to get 3D drawings possible on it. This concept opens the door to powerful and versatile OpenGL drawings on ubiquitous Google maps.

2. Scenario

In a flight simulator or radar flight detection kind of scenario, a moving air craft is required to be drawn on a map. The air craft has to be independent of the map type. Here, the map type can be many: Road Map Satellite map, Terrain map, Hybrid map, and so forth. The exact position of the air craft with respect to the map latitude, longitude, and its height from the ground are required to be drawn. Sometimes, air craft pitching or rolling movements also need to be drawn.

3. Issues

Google Map and OpenGL both need a windowing system. Qt(5.2), an operating system independent windowing system, has been used.

4. Solution

4.1 Design

Flight- and Google map-related information has been provided through a conf file, where there is an entity called Controller that reads the file and uses another entity, Drawer, to draw it on a window. Drawer is responsible for drawing the Google map and OpenGL primitives. The conf file is a multiple line entry, with each line formatted as <LATITUDE>, <LONGITUDE>, and <ALTITUDE>. The air craft follows each line and shifts its position accordingly. Rolling, pitching, and heading are calculated as per changes in these three parameters.

Figure 1: The three parameters of positioning

Further, Drawer can be divided into three different parts:

  • Window
  • Web Drawer
  • OpenGL Drawer

In order for the Controller to use the three modules in Drawer, a mediator is introduced. It mediates between the Controller and the three components of Drawer.

Figure 2: Adding a mediator

Here, the drawing engine and view relation is better described in Qt as Graphics View architecture which follows an Observer pattern or MVC architecture. Here, QGraphicsScene with QGraphicsItem behave as data (subjectee) and QGraphicsView behaves as view (observers).

Figure 3: The drawing engine and view relation

Here, the mediator (QMainWindow) plays an important role to make the Controller interact with the drawing engine and vice versa.

Figure 4: The mediator makes the Controller interact with the drawing engine

4.2 Class Diagram

  • Controller: Airplane, which is a type of flight device, extends the device. The device contains the mediator pointer.
  • View: QGraphicsView (uses QGLWidget as viewport)
  • Data: QGraphicsScene with item as ngrpahicswebview (extends QGraphicsWebView). ngraphicswebview contains the mediator pointer.
  • Mediator: nmainwindow extends QMaiWindow and contains device, ngraphicswebview, QGraphicsView, and QGrahpicsScene.

Figure 5: Class diagram

5. How It Works

In Graphics View design, QGraphicsScene is the entity that manages graphics items (QGraphicsItem) that need to be drawn on the graphics view (widget). QGLWidget, being a subclass of QWidget, is made as a widget of the graphics view. QGraphicsWebView, a QGraphicsItem, is sub classed.

QGraphicsScene calls each registered graphics item’s paint method, passing QPainter, Style options, and the widget to be drawn on as arguments.

Sub classed QGrahpicsWebView, being a graphics item (QGraphicsItem), also gives its paint method a chance where it first calls the parent (QGrahpicsWebView) paint method for 2D Web view painting, followed by enabling QGLWidget current context and then calling OpenGL functions.

Thus, 3D is drawn on top of a 2D Web view painting.

6. Program

void ngraphicswebview::paint(QPainter *p, const
QStyleOptionGraphicsItem *options, QWidget *widget){

nmainwindow::nmainwindow(QWidget *p):QMainWindow(p){
   gs=new QGraphicsScene(0,0,1024,768);
   gview = new QGraphicsView(gs,this);
   glwidget=new QGLWidget(QGLFormat(QGL::SampleBuffers));
   gwv=new ngraphicswebview(this);

7. Experimental Data

Experimental data is provided on the Google map where the 3D item is an aircraft. It is tried with static images of the Google map and aircraft and later followed by animation.

Figure 6: Aircraft, OpenGL 3D drawing

7.1 Static Drawing

Now, a drawing of an 3D OpenGL item on Google Map (ROAD MAP).

Figure 7: A Google Map (ROADMAP) with an 3D OpenGL drawing

7.2 Animation

Animation can be tried on a Google map where a 3D image changes its orientation on moving across the Google map making believe that the 3D entity is actually moving. This technique can use the flight simulator programs running on top of Google Map.

Figure 8: Air craft climbing, Google Map (SATELLITE)

Figure 9: Air Craft descending, Google Map (ROADMAP)

8. Summary

This article is about drawing 3D items on a Google map. At the beginning, the article discussed the possible design that can make the implementation exist in the easiest possible fashion. This article also discussed the MVC and mediator design pattern. A little about Qt Graphics View was also discussed. This article includes two kinds of experimental data—one for static graphics on a Google map and other is animation. Complete source code with conf.txt has been provided.

9. References

  • OpenGL Programming Guide, Version 1.4. Dave, Jackie, Mason, and Tom.
  • Qt 5.2 documentation.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read