Interactive Map

In this guide you will learn how to get user input and pass it to the SDK touch handler in order to make the map interactive. After completing this guide, you will be able to pan and zoom the map.

Prerequisites

It is required that you complete the Environment Setup - CPP Examples guide as well as the Create a Project - CPP Examples guide before starting this guide.

Touch event listener

Open the file CenterMap.cpp and define a touch event listener class, that is, add the following code before the main() function:

class CTouchEventListener : public ITouchEventsListener
{
  public:
  void setMapViewPointer(std::shared_ptr<gem::MapView> pMapView)
  {
    m_mapView = pMapView;
    lastXpos = 0; lastYpos = 0;
  }
  void handleTouchEvent(int eventType,int pointerId,int x,int y) override
  {
    lastXpos = x; lastYpos = y;
    gem::Xy mousePos(x,y);
    if(m_mapView.get()!=nullptr)
      m_mapView->getScreen()->handleTouchEvent((gem::ETouchEvent)eventType,pointerId,mousePos);
  }
  void handleMouseScrollEvent(int delta,int x,int y) override
  {
    gem::Xy mousePos(x,y);
    if(m_mapView.get()!=nullptr)
      m_mapView->getScreen()->scrollEvent(delta,mousePos);
  }
  void getCursorPosition(int &x, int &y) override
  {
    x = lastXpos; y = lastYpos;
  }
  private:
  std::shared_ptr<gem::MapView> m_mapView;
  int lastXpos, lastYpos;
};

The touch event listener instance keeps a pointer to the MapView instance, which is used to pass the user touch inputs to the SDK. The pointer to the MapView instance is set via setMapViewPointer()

The main function to pass touch inputs to the SDK is handleTouchEvent(), whereas handleMouseScrollEvent() is used to pass mouse scroll events to the SDK.

The function getCursorPosition() is a necessary convenience, to get the current x,y mouse cursor position in pixels, as this position must be passed to the SDK with all touch events, however, not all input callbacks contain the x,y position, so for those events that do not have an explicit x,y position, the last x,y position is stored and then retrieved using this funtion.

Replace the following line:

auto oglContext = env.ProduceOpenGLContext("centerMap");

with this code, to add the touch event listener:

CTouchEventListener pTouchEventListener;

auto oglContext = env.ProduceOpenGLContext("centerMap", &pTouchEventListener);

After the mapView = gem::MapView::produce() line, add this line:

pTouchEventListener.setMapViewPointer(mapView);

to save a pointer to the mapView in the touch event listener.

Environment.cpp

Open the file Environment.cpp and add the touch event listener to the ProduceOpenGLContext() function so that the function looks as follows:

gem::StrongPointer<OpenGLContext> Environment::ProduceOpenGLContext(
  std::string windowName, ITouchEventsListener* pTouchEventListener)
{
  if (!m_openGLContext.get())
    m_openGLContext = OpenGLContext::Produce(windowName, pTouchEventListener);
  return m_openGLContext;
}

Environment.h

Open the file Environment.h and add the touch event listener to the ProduceOpenGLContext() function signature so that it looks as follows:

gem::StrongPointer<OpenGLContext> ProduceOpenGLContext(std::string windowName = "",
  ITouchEventsListener* pListener = nullptr);

OpenGLContext.cpp

Open the file OpenGLContext.cpp and add the touch event listener to the initialize() function so that it looks as follows:

bool OpenGLContext::initialize(GLFWwindow* pWindow, float nDPI,
  ITouchEventsListener* pEventTouchListener = nullptr)
{
  m_window = pWindow;
  m_dpi = nDPI;
  m_initialized = true;
  m_pTouchEventListener = pEventTouchListener;
  glfwSetWindowUserPointer(pWindow,this);
  return true;
}

Also add a get function as shown, to return a pointer to the touch events listener: GetTouchEventHandler()

ITouchEventsListener* OpenGLContext::GetTouchEventHandler()
{
  return m_pTouchEventListener;
}

Add the 3 mouse/touch input event callback functions which receive the input events from the GLFW library and then pass them to the SDK via the touch events listener.

void mouseButtonCallback(GLFWwindow* window, int button, int action, int mods)
{
  OpenGLContext* pOpenGLContext = (OpenGLContext*)glfwGetWindowUserPointer(window);
  if (pOpenGLContext && pOpenGLContext->GetTouchEventHandler())
  {
    int xpos, ypos;
    //get the stored cursor position because a button event does not include it
    pOpenGLContext->GetTouchEventHandler()->getCursorPosition(xpos, ypos);
    if (button == GLFW_MOUSE_BUTTON_LEFT)
    {
      if (action == GLFW_PRESS)
      {
        pOpenGLContext->GetTouchEventHandler()->handleTouchEvent(gem::ETouchEvent::TE_Down, 0, xpos, ypos);
      }
      else if (action == GLFW_RELEASE)
      {
        pOpenGLContext->GetTouchEventHandler()->handleTouchEvent(gem::ETouchEvent::TE_Up, 0, xpos, ypos);
      }
    }
  }
}
void cursorPositionCallback(GLFWwindow* window, double xpos, double ypos)
{
  OpenGLContext* pOpenGLContext = (OpenGLContext*)glfwGetWindowUserPointer(window);
  if (pOpenGLContext)
  {
    if (pOpenGLContext->GetTouchEventHandler())
    {
      pOpenGLContext->GetTouchEventHandler()->handleTouchEvent(gem::ETouchEvent::TE_Move, 0, (int)xpos, (int)ypos);
    }
  }
}
void mouseScrollCallback(GLFWwindow* window, double xoffset, double yoffset)
{
  OpenGLContext* pOpenGLContext = (OpenGLContext*)glfwGetWindowUserPointer(window);
  if (pOpenGLContext && pOpenGLContext->GetTouchEventHandler())
  {
    int xpos, ypos;
    pOpenGLContext->GetTouchEventHandler()->getCursorPosition(xpos, ypos);
    if (pOpenGLContext->GetTouchEventHandler())
    {
      pOpenGLContext->GetTouchEventHandler()->handleMouseScrollEvent((int)yoffset, (int)xpos, (int)ypos);
    }
  }
}

The mouseButtonCallback() captures mouse button up or down events.

The cursorPositionCallback() captures mouse motion events, regardless if a mouse button is up or down.

The mouseScrollCallback() captures mouse scroll events, used for zooming the map.

Change the Produce() function signature by adding the touch event listener, so it looks like this:

gem::StrongPointer<OpenGLContext> OpenGLContext::Produce(std::string windowName, ITouchEventsListener* pEventTouchListener)

Set the 3 touch input GLFW callback functions defined above:

glfwSetMouseButtonCallback(pDisplayWindow, mouseButtonCallback);
glfwSetCursorPosCallback(pDisplayWindow, cursorPositionCallback);
glfwSetScrollCallback(pDisplayWindow, mouseScrollCallback);

Also update the initialize() function call at the bottom so it looks like this:

m_pOpenGLContext->initialize(pDisplayWindow, nDPI,pEventTouchListener);

OpenGLContext.h

Open the file OpenGLContext.h and add the following include directive:

#include <API/GEM_Canvas.h> //gem::ETouchEvent

Add the touch events listener interface:

class ITouchEventsListener
{
  public:
  virtual void handleTouchEvent(int eventType,int pointerId,int x,int y) = 0;
  virtual void handleMouseScrollEvent(int delta,int x,int y) = 0;
  virtual void getCursorPosition(int& x, int& y) = 0;
};

Update the initialize() public function signature so it looks like this:

bool initialize(GLFWwindow* pWindow, float nDPI,ITouchEventsListener* pEventTouchListener);

Update the Produce() public function signature by adding the touch event listener, so it looks like this:

static gem::StrongPointer<OpenGLContext> Produce(std::string windowName = "", ITouchEventsListener* pTouchEventListener = nullptr);

Add this public function signature:

ITouchEventsListener* GetTouchEventHandler();

Add this private member variable:

ITouchEventsListener* m_pTouchEventListener;

Try it out!

Click the green arrow play button at the top to compile and run the project. You can now pan the map and zoom in/out using the mouse scroll wheel.