Advanced Maps on Apps for Series 40

Nokia Series 40

Application Development and
Design with the Nokia Maps API
for Java ME on Series 40 phones

Jason Fox
Technical Support Engineer
Maps Platform
1 © Nokia 2012 Advanced Maps on Apps.pptx

Agenda
1. Brief Overview of the Nokia Maps API
for Java ME.
2. Where to store your Geographic data
3. Data Feeds (JSON + XML)
4. Parsing Data from a Web Service
5. KML
6. Overlays


A Brief Overview of the Nokia
Maps API for Java ME


What is Nokia Maps API for Java ME?
• API aimed at Series 40 Phones. Allows you to
develop mobile applications based on Nokia
Maps.

• Façade Pattern - hides all the “plumbing” code -
the low level connection calls, image
manipulation etc.

• Targets devices supporting MIDP 2.0 or higher.

• Not currently part of the SDK

• Single downloadable JAR around 150 kB.

• Faster App development. Better App performance

Full details at :
http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/


What Features does the API have?
• Interactive Maps on Series 40
phones
• Multiple map types
• Multiple languages available

• Markers, Images, Polygons,
Polylines, Pan and Zoom.

• Search, routing and POI information
services.

• Open to extension


What problems does the API
solve?
or

“Why your S40 Map App should use
the Nokia Maps API for Java ME”


What problems does the API solve? (1)
• Series 40 Phones
• Small Screen Size
• Typical phone does not have onboard maps.

• Nokia Maps are Mobile Optimised
• Reduced clutter on screen
• Large Fonts Readable on Small Display
• Lower Colour Saturation
• Pan and Zoom Pass control to the User to get Context on the
Map
• Map tiling and caching for low latency and reduced network
traffic


Opportunities
• Introduce geographic context to your information.
• Displaying an interactive Map

You have :
• Geographical Information that you wish to show in context.

You want:
• A convenient front-end Presentation Layer for displaying your
information.
• MapDisplay to get the right Map on the screen
• MapObjects to overlay this Map with your information
• MapComponents to extend and interact with your
information


Opportunities
• The ability to enhance your application through
accessing additional API services
• Search
• Places
• Routing

• Able to display complex data sets whilst
reducing development time
• Overlays
• KML Support


Storing, Obtaining and
Displaying Data for your
Map-based Application


The Generic Use Case for a Map Based
Application
A typical Map-based application will:
• Obtain application data from somewhere (e.g. a Web service)
• Display a map with associated Map Markers
• When the user clicks on a map marker the app will a display more
information associated with that location on a separate screen.

Why use a map-based interface?
• Familiar Paradigm
• Intuitive
• Easy to use


What design does this indicate? (1)
In the generic use case:
• the data could come from anywhere
• the data could be in any format.

Hence none of this is wired up automatically. You have to plug it in
yourself.

But there is one constant across the data for every map based
application:

“Every datum point will consist of both
geographic and non geographic information”


From the geographic information:
• Create a GeoCoordinate from the longitude/latitude associated with
each datum point.
• Add a marker to the map to highlight the location of the GeoCoordinate
using either a MapStandardMarker or a MapMarker

From the non-geographic information:
• Use a Hashtable to associate the MapMarker with the non-geographic
information.


Whenever interaction occurs, the app needs to :

• Check if a marker has been “clicked”

• Retrieve the associated non-geographic
information from the Hashtable

• Do any necessary additional operations


Where does the app get its data from?
Data can be conveniently split into two types:
Static Data
• Fixed, unchanging
• Can be bundled with the App
• No need for a data connection

Dynamic Data
• Volatile, unreliable
• Keeps the App relevant
• Needs to be requested from
a web service

Avoid the overhead of dynamic data wherever possible, but you will
need to go online anyway since the maps require a data connection


How dynamic is your dynamic data?
Completely Static Data e.g. Quiz App - “Capitals of the World”
• Bundle data with app

Long Period Data e.g. “Festival 2012”
• Bundle data with app, update app version next year.

Short Period Data e.g. “Tourist Guide for …”
• Read once then store and retrieve from device

Daily Data e.g. “Deals for Today …”
• Read online summary once on start up.
• May need to request more details later

Real Time Updates e.g. “Social Media”
• Poll online for limited data summaries


Data Feeds and Formats


Data Feeds
There are currently two popular alternative data formats for
transmitting structured data over a network connection. Both are
language independent and text based.

JSON http://json.org
• Syntax is derived from JavaScript
• Structure is defined through the use of brackets [{]}
• Objects are mapped as key-value pairs separated by a colon :

XML http://www.w3.org/TR/REC-xml
• Syntax is defined by the World Wide Web Consortium
• Structure consists of nesting elements with matching start and end tags.
• Objects are defined as the content between the tags and any attributes
(key-value pairs) associated to the element.


JSON Data Format

Data received will be a consistent format which may contain
• key-value pairs - “name”
• arrays of elements - “coordinates”
• complex types - “geo”


XML Data Format

• Simple key-value pairs are held within a single pair of tags - <name>

• Complex elements may have attributes - <geo>

• Arrays may be build up from multiple elements with the same name.
Conventionally array elements are given plural names - for example,
the <results> element contains a series of <result> elements


Parsing and Displaying Data
from a Web Service
or

“Getting your map data on screen
the hard way”


Parsing JSON Data
No standard JSON parser library available. Need to write your own.
Hint: An Example JSON parser can be found bundled with the API examples

• Parser will typically place all JSON objects into a Hashtable , need to
extract the entries you require by either:

• casting directly (for simple types) e.g. key-value pairs

• building up more complex element step by step

Still have to know the data structure, names of entries and so on.
… and then create your MapMarkers, and data associations etc.


Parsing XML Data
A Standard SAX parser implementation of JSR 172 comes as part of the
Java ME Web Services Optional package. It will fire events as the XML is
processed. Override these events to process your data.

• startElement() fired whenever the parser encounters an opening <tag>

• characters() occurs for all text within the <tag>…</tag>

• endElement() fired whenever the parser encounters a closing </tag>

Still have to know the data structure, element qnames, attributes and so
on … and finally create your MapMarkers, and data associations etc…


An Ideal Data Format
Wouldn’t it be more convenient if there existed a data format that:

• Used a standard on-board parsing library like XML?

• Had a standardised data structure so that I wouldn’t need to modify my
parsing code for each implementation?

• Created and styled MapObjects directly from the data feed?

• Automatically associated each MapObject with its
non-geographic data?

• Worked just as well on the web as on the
device?

This is KML

What is KML?
KML http://www.opengeospatial.org/standards/kml/

Keyhole Markup Language (KML) is an standardized XML notation for
geographic applications.

KML is able to:
• Specify icons and labels to identify locations.
• Specify additional information (e.g. address, phone number) associated with a specific
location.
• Define other elements such as polygons and polylines and attach them to the map.
• Define styles to specify feature appearance.
• Write HTML descriptions of features, including hyperlinks and embedded images
• Use folders for hierarchical grouping of features

Most importantly a KML Parser already exists within the Maps API for Java ME.
No need to write your own parser. No need to write custom code to display and
interact with your data.


KML Data Format

• Exactly the same structure as any XML document
• KML is a subset of XML

• The names of each element in the KML feed are strictly defined
• the longitude/latitude must be a value held in a <coordinates> tag.
• for a point of interest this is enclosed in a <Point> tag.
• Every item on the map is defined inside a <Placemark> tag.


The Relationship between MapObjects
and KML Elements
Many MapObjects have a direct equivalent in KML

Nokia Maps API KML KML KML
for Java ME Feature Geometry Style
MapStandard <Placemark> <Point>
Marker (with
<styleUrl>)
MapMarker <Placemark> <Point> <IconStyle>

MapPolyline <Placemark> <LineString> <LineStyle>

MapPolygon <Placemark> <Polygon> <PolyStyle>

MapContainer <Folder> or
<Document>
For parsed elements such as <description>, <phoneNumber> and
<extendedData> where no direct equivalent object exists, the API will give
access to the parsed KML data in the Feature interface.


Parsing and Displaying KML
Data
or

“Getting your map data on screen
the easy way”


Parsing and Displaying a KML File (1)
1) Implement a KMLParserListener and a KMLFactoryListener, create a
KMLManager and call parseKML()- This will create a KML Document

2) Handle Success and Failure.
If successful, convert the KML Document into a KMLResultSet by
calling KMLFactory.createMLResultSet()passing in the received
KML Document.


Parsing and Displaying a KML File (2)
3) Handle Success and Failure.
If successful, the KMLResultSet.getContainer() will hold a
MapContainer which has all your map data as MapObjects. You can
add it to the MapDisplay in the usual manner, and zoom as necessary

4) Add Interactive KMLMapComponent as necessary.
The KMLResultSet.getKMLMapComponent()
will highlight styled <Placemark> elements
when they are at the center of the screen, the
KMLMapComponent needs to be added to the
MapDisplay to do this.


Interacting with KML File Data
5) To receive onFocusChanged()events and interact with the <Placemark>
elements, you will need to implement a KMLEventListener

6) Attach the KMLEventListener to the KMLMapComponent of your result set.
This obtained from KMLResultSet.getKMLMapComponent()

7) An onFocusChanged()event is fired whenever a <Placemark> is moved
onto or away from the center of the MapDisplay.

If you want to interact with other <Placemark> elements, you will have to iterate
through KMLResultSet.getFeatures().


Displaying Complex Datasets
An Introduction to Overlays


How Map Providers and Overlays Work
• For the base map providers, the globe is divided into
individual map tiles. These are retrieved online from
Nokia’s map tile service.
Base Map Tiles
• At minimum zoom, the world is contained in a single 128x128 pixel tile.
• At the next zoom level up, the world is 2 tiles wide and 2 tiles high. Then
4x4, 8x8, 16x16 etc. +
• Each zoom level splits the tiles in two, doubling the number of tiles across
the width and height
• Each Map is based on the Normalized Mercator projection.

Overlay Tiles
• Overlays work in the same fashion - using your own map
tile server complex visual data can be displayed at =
different zoom levels.
• One tile at minimum zoom, then 2x2, 4x4 and so on.
• Must be based on the Normalized Mercator projection.
Result
• Use PNG tiles to support transparency, so underlying map can be seen
beneath your data.


Implementing a MapURLProvider (1)
1) To create your own overlay provider, create a subclass of MapURLProvider

2) Implement the necessary abstract methods.

3) Then add the overlay to the MapDisplay

4) Don’t forget Overlay attribution if necessary.


Implementing MapURLProvider (2)
Necessary Overrides

• String getTileUrl()
• Used to create the URL in order to download an overlay map tile.
• Map tile service requests are typically of the format:
http://map_tiler_url/x_tile/y_tile/zoom_level/format.png

• boolean isTileSupported()
• Decides whether to make an http request to download the tile.
• The API will throw onMapUpdateError()if a tile cannot be downloaded.

Optional Overrides

• Image decode(byte[] data)
• May be used for image post processing (e.g. scaling up images)

• String getMimeType()
• Default is PNG - override if Map tile service is not returning PNG images.


For More Information

Download the latest Nokia SDK for Java
http://developer.nokia.com

Consult the Nokia Developer Library
http://library.developer.nokia.com

Nokia Maps API
http://developer.nokia.com/Maps


Advanced Maps on Apps for Series 40

More Related Content

Similar to Advanced Maps on Apps for Series 40 (20)

More from Microsoft Mobile Developer (20)

Recently uploaded (20)

Advanced Maps on Apps for Series 40

Editor's Notes