This webinar is for developers who want to use maps in their applications and extend the user interaction beyond basic pan and zoom functionality. You can extend the user’s interaction with a map canvas beyond basic panning and zooming by using the Maps API for Java ME to create custom map components. This webinar is for you if you’re looking to use maps in your applications and extend the UI in an intuitive manner to do what you want it to do. The Maps API for Java ME includes a framework through which your custom component can respond to standard mapCanvas events. In the presentation, Jason Fox of Nokia’s Location and Commerce team in Berlin will describe a series of intermediate and advanced situations where custom map components provide solutions to problems, and he’ll share a checklist of considerations for designing map components to be responsive to your users.

1. Architecture and Design of Event Driven Map
Components
Jason Fox
Technical Support Engineer
Maps Platform
© Nokia 2013 Event-driven map components for Series 40.pptx

2. Agenda
1. API Architectural review
• Basic Architectural Design
• Event Driven Map Components
2. Deep-Dive Code Examples
• Touch driven - Dragging a Marker
• Timer driven - Adding Animation
• Gesture driven - Pinch Zoom Control
• Key press driven - Key Logging
• Map State driven - Server-side Marker Clustering
© Nokia 2013 Event-driven map components for Series 40.pptx

3. Nokia Maps API for Java ME
Architectural Review
© Nokia 2013 Event-driven map components for Series 40.pptx

4. Basic Architectural Design
• MapCanvas - a concrete instantiation of the
javax.microedition.lcdui.Canvas class.
Handles the low-level graphics painting the map
and the delivery of events .
• MapDisplay – defines the part of the World to be
displayed, and encapsulates the details of any
custom points of interest. That is it contains
MapObjects
• MapObjects may be also be placed within a
MapContainer
• Use the MapFactory to create MapObjects and add them to the MapDisplay.
• Both the MapDisplay and MapContainers are themselves MapObjects
© Nokia 2013 Event-driven map components for Series 40.pptx

5. Event Driven Map Components
© Nokia 2013 Event-driven map components for Series 40.pptx

6. Deep-Dive Code Examples
© Nokia 2013 Event-driven map components for Series 40.pptx

7. Touch-Driven Component
e.g. Marker Dragger Component
Used for Marker location correction
How does it work?
Interaction between Canvas Touch and Canvas Paint
EventListener pointerPressed() Hide Marker
EventListener pointerDragged() Drag Mask location
EventListener pointerReleased() Move Marker
MapComponent paint() Draw/Redraw Mask
Key Points
• Updating Markers is slow.
• Never update a MapMarker on a MapCanvas unless you are forced
to do so.
© Nokia 2013 Event-driven map components for Series 40.pptx

8. Timer-Driven Component
e.g. Marker Bouncer Component
Used for drawing attention to a marker
How does it work?
Interaction between Canvas repaint()requests and painting the
MapComponent
MapListener onContentUpdated() Request Repaint
MapComponent paint() Draw the markers
Key Points
Understand the correct usage of Point and GeoCoordinate
• Hold/Calculate locations using Geocoordinates
• Draw using pixel Points.
• Never update a MapMarker on a MapCanvas unless you are forced
to do so.
© Nokia 2013 Event-driven map components for Series 40.pptx

9. Gesture-Driven Component
e.g. Pinch Zoom Component
© Nokia 2013 Event-driven map components for Series 40.pptx

10. Pinch Zoom Component
How does it work?
Reacts to the pinch()event of the Gesture Framework
ExtendedEvent pinch() Alter Zoom Level
Listener
EventListener pointerReleased() Fix zoom focus point
Key Points
• Separate your MapComponents from your MIDlets for backward
compatibility and re-use
• Even though you may think you don’t need a MapComponent, you
probably do.
© Nokia 2013 Event-driven map components for Series 40.pptx

11. Key Press-Driven Component
e.g. Key Logger Component
Used for adding/amending data associated with a MapMarker
How does it work?
Interaction between Canvas Key Press and Canvas Paint.
EventListener keyPressed() Update FocalObserver Data
FocalEvent onFocusChanged() Update Tooltip text
Listener
Tooltip paint() Display updated text
Key Points
• A well designed MapComponent does just one job
• Use Interfaces to ensure MapComponents are loosely coupled
© Nokia 2013 Event-driven map components for Series 40.pptx

12. Map State-Driven Component
e.g. Marker Clustering Component
Used for displaying large datasets on screen
How does it work?
Interaction between Canvas Completed and Canvas Paint.
MarkerClusterer mapUpdated() Decide if clustering required
MapCanvas onMapContentComplete() Start Clustering – request XML
data
MarkerClusterer onParseComplete() Update MapMarkers
FocalEvent onFocusChanged() Update Tooltip text
Listener
Tooltip paint() Display updated text
© Nokia 2013 Event-driven map components for Series 40.pptx

13. Conclusion
• Complex interactions can be
achieved through passing
events between a series of
simple MapComponents
• Application of Hoare's law for
big problems
“Inside every big problem there is a small problem
struggling to get out.”
© Nokia 2013 Event-driven map components for Series 40.pptx

14. For More Information
Download the latest Nokia SDK for Java
http://developer.nokia.com/Develop/Series_40
Consult the Nokia Developer Library
http://library.developer.nokia.com
HERE Developer Site
http://developer.here.com
Download the Map Components
https://projects.developer.nokia.com/mapcomponentdemos
© Nokia 2013 Event-driven map components for Series 40.pptx