Custom Maps for SerCar10

January 21, 2013 — Leave a comment

TBD: Source Snippets will be inserted later, as first steps some screenshots and video

SerCar10 is a BlackBerry 10 APP for small medium sized companies to manage their service cars out there. One important part are Maps and Location: Drivers of Service Cars need to know where their next Jobs are located, how to drive to the locations and what to do there. Dispatchers also need to know the locations to decide which driver goes to which location. Following screenshots are from Car Drivers Module of SerCar10.

Thanks to Shadid Haque there’s a sample at GitHub demonstrating HowTo create a custom map with Cascades.

Navigate to the Map

There are two ways to get a custom Map of Work order – Locations (Job Sites)

Homescreen of SerCar10 shows Tabs from a TabbedPane from where you can go the most important parts of the app.

home screen

Tab on “Work Order” brings you the list of scheduled Work Orders for the day. Tap on Overview shows you a Map with all scheduled Jobs.

Here’s the list of scheduled Work Orders:

list of scheduled orders
The List of scheduled Work Orders is a ListView as root Page of a NavigationPane.

Tap on a row gives you the details od this specific Work Order:
From this page you can add “Positions of Work” (Labour Hours, Parts from Stock items, …)

But there are “More” Actions:

You can open a custom Map to see the location of this specific Job.

Actions of custom Map

At first take a look at the Actions available on this MapView:


  • GoTo Job Site: centers the Map to the Location of this Work Order (Image Overlay – a blue flag)  and automagically openes the details Overlay (short description of the work order). If the map is opened from “Overview” Tab you cycle through all jobs of the day: each tap jumps to the next job.
  • GoTo My Location: centers the map to my current location. If sensors are OFF, they are switched on automatically: Compass for the heading, Rotation for tilt angle and PositionSource to get the position. My current position is displayed as a green marker.
  • Follow Me / UnFollow Me: This is a toggle: follow me always centers the map to my current location – this is useful if you’re driving to the next job. Unfollow still gets your current location, but you’re free to drag the map where you want.
  • Get Route to Job: This action is only enabled if Sensors are ON and invokes the BlackBerry10 RouteMapInvoker to get the Route from your current location to the selected Job Site.
  • Hide Actions: This action hides the ActionBar from bottom of your screen to see as most as possible from your map. You can also do a long click to hide the Action Bar and you have to do a long click to get the Action Bar back.
  • Show Compass / Hide Compass: thios Toggle Action allows you to hide the Compass to free the space.
  • Use Demo Location / Use LIVE Location: a toggle to decide if your location should be the real one tracked from PositionSource or a fix Location (Rathaus of Rosenheim). If you’re running the app in demo mode (Try-before-you-buy) it makes no sense to track your live location to simulate a Car Drivers work.
  • Show My Location / Stop Sensors: a toggle to start or stop the sensors.
  • Reset Sensors: this action is only enabled if you stopped the sensors. Stopping the sensors leaves the map in the heading from compass and tilt angle from rotation. If you want to go bacjk to heading to North and tilt angle 0°, simple reset the sensors.

actions custom map 2

Map for a single location (Work Order)

Some screenshots from custom map for a single location:


Flags for the Location, details of order can be displayed:


show and hide the Action Bar (long-press on Map)


also in Landscape:


Landscape without ActionBar (Cinema effect)


Map for all scheduled Jobs (Overview)

Some screenshots from the Overview – Tab to get an overview of all scheduled jobs of the day. Different flags to show the order priority (regular, urgent, emergency):


Sensors for Heading (Compass) ant tilt angle °


easy cycling through all scheduled jobs:





Short Video to demo HowTo work with this custom map:

Attention: Please switch HD ON (Top Right Corner of Video)

(c) 2012 Creative Commons License 3.0 (BY-NC-SA) by ekkescorner

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s