Tutorial: Maps, pins, and bubbles

This tutorial shows you how to create an app that lets users drop pins and bubbles on a map to mark locations.

You will learn to:

  • Use a MapView and handle the signals that are emitted when the user interacts with the map
  • Change the map using sensors and MapView functions
  • Customize your MapView with pins and bubbles
Screen showing the MapView sample app on a device.

Before you begin

You should have the following things ready:

  • The BlackBerry 10 Native SDK
  • A device or simulator running BlackBerry 10

If this is your first app, you can download the tools that you need and learn how to create, build, and run your first Cascades project.

Downloading the full source code

This tutorial uses a step-by-step approach to build a maps app. If you want to look at the complete source code for the MapView sample app, you can download the complete project and import it into the Momentics IDE for BlackBerry. To learn how, see Import an existing project.

Set up your project

Before we start creating our application, create an empty Cascades project in the Momentics IDE using the standard empty project template. To make it easier to follow along, this tutorial assumes that you name your project mapview.

We need to add the following line to our mapview.pro file to allow our app to access location services:

LIBS += -lbb -lQtLocationSubset -lbbcascadesmaps -lGLESv1_CM

To use some of the classes in these libraries, your project must use an API level of 10.2 or later. For more information, see API levels.

We also need to add the Location permission to our bar-descriptor.xml file so that we can get the current location of the device:

access_location_services

There are several graphical assets that our app uses, such as background images and custom bubbles and pins. We need to import the following images:

MapView tutorial bubble

bubble.png  - A text bubble for a location on the map

MapView tutorial clear pin

clearpin.png  - An icon for the action to clear all pins on the map

MapView tutorial pin

pin.png  - An icon for the action to drop a pin on the map

MapView tutorial URL

url.png  - An icon for the action to center the URL of a pin on the map

MapView tutorial compass

compass.png  - An image for the compass on the main UI

MapView tutorial me

me.png  - A different icon for the location of your device

MapView tutorial on map pin

on_map_pin.png  - A pin on the map

To import the images into your project:

  1. Download the assets.zip file.
  2. Extract the images folder into the assets folder of your project.
  3. Refresh your project in the Project Explorer view.

Last modified: 2014-09-30



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus