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
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:
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:
bubble.png - A text bubble for a location on the map
clearpin.png - An icon for the action to clear all pins on the map
pin.png - An icon for the action to drop a pin on the map
url.png - An icon for the action to center the URL of a pin on the map
compass.png - An image for the compass on the main UI
me.png - A different icon for the location of your device
on_map_pin.png - A pin on the map
To import the images into your project:
- Download the assets.zip file.
- Extract the images folder into the assets folder of your project.
- Refresh your project in the Project Explorer view.
Last modified: 2014-09-30