advanced maps on apps for series 40
DESCRIPTION
Performance and usability are critical to successful mobile apps; this webinar shows you how to improve both when creating a location-based application for Series 40 phones. The webinar discusses techniques and architectural choices you can use to minimise the latency of your application when combining the Nokia Maps API for Java ME with other web services. Understand the correct use of the API, and the pitfalls to avoid, through the discussion of real world examples of web services providing KML and JSON feeds. An in-depth discussion of how to increase the complexity of information displayed without compromising usability by using custom overlays is also included.TRANSCRIPT
Application Development and Design with the Nokia Maps API for Java ME on Series 40 phones
Nokia Series 40
1 © Nokia 2012 Advanced Maps on Apps.pptx
Jason Fox Technical Support Engineer Maps Platform
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
Agenda
2 © Nokia 2012 Advanced Maps on Apps.pptx
What is Nokia Maps API for Java ME?
4 © Nokia 2012 Advanced Maps on Apps.pptx
Full details at : http://www.developer.nokia.com/Develop/Maps/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
What Features does the API have?
5 © Nokia 2012 Advanced Maps on Apps.pptx
• 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?
6 © Nokia 2012 Advanced Maps on Apps.pptx
or
“Why your S40 Map App should use the Nokia Maps API for Java ME”
What problems does the API solve? (1)
7 © Nokia 2012 Advanced Maps on Apps.pptx
• 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
What problems does the API solve? (2)
8 © Nokia 2012 Advanced Maps on Apps.pptx
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
What problems does the API solve? (3)
9 © Nokia 2012 Advanced Maps on Apps.pptx
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
10 © Nokia 2012 Advanced Maps on Apps.pptx
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
The Generic Use Case for a Map Based Application
11 © Nokia 2012 Advanced Maps on Apps.pptx
What design does this indicate? (1)
12 © Nokia 2012 Advanced Maps on Apps.pptx
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”
What design does this indicate? (2)
13 © Nokia 2012 Advanced Maps on Apps.pptx
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.
What design does this indicate? (3)
14 © Nokia 2012 Advanced Maps on Apps.pptx
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?
15 © Nokia 2012 Advanced Maps on Apps.pptx
Data can be conveniently split into two types:
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
Static Data • Fixed, unchanging • Can be bundled with the App • No need for a data connection
How dynamic is your dynamic data?
16 © Nokia 2012 Advanced Maps on Apps.pptx
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
18 © Nokia 2012 Advanced Maps on Apps.pptx
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
19 © Nokia 2012 Advanced Maps on Apps.pptx
Data received will be a consistent format which may contain • key-value pairs - “name” • arrays of elements - “coordinates” • complex types - “geo”
XML Data Format
20 © Nokia 2012 Advanced Maps on Apps.pptx
• 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
21 © Nokia 2012 Advanced Maps on Apps.pptx
or
“Getting your map data on screen the hard way”
Parsing JSON Data
22 © Nokia 2012 Advanced Maps on Apps.pptx
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.
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…
Parsing XML Data
23 © Nokia 2012 Advanced Maps on Apps.pptx
An Ideal Data Format
24 © Nokia 2012 Advanced Maps on Apps.pptx
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?
25 © Nokia 2012 Advanced Maps on Apps.pptx
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
26 © Nokia 2012 Advanced Maps on Apps.pptx
• 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
27 © Nokia 2012 Advanced Maps on Apps.pptx
Many MapObjects have a direct equivalent in KML 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.
Nokia Maps API for Java ME
KML Feature
KML Geometry
KML Style
MapStandard Marker
<Placemark> (with <styleUrl>)
<Point>
MapMarker <Placemark> <Point> <IconStyle>
MapPolyline <Placemark> <LineString> <LineStyle>
MapPolygon <Placemark> <Polygon> <PolyStyle>
MapContainer <Folder> or <Document>
Parsing and Displaying KML Data
28 © Nokia 2012 Advanced Maps on Apps.pptx
or
“Getting your map data on screen the easy way”
Parsing and Displaying a KML File (1)
29 © Nokia 2012 Advanced Maps on Apps.pptx
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)
30 © Nokia 2012 Advanced Maps on Apps.pptx
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
31 © Nokia 2012 Advanced Maps on Apps.pptx
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().
How Map Providers and Overlays Work
33 © Nokia 2012 Advanced Maps on Apps.pptx
• For the base map providers, the globe is divided into individual map tiles. These are retrieved online from Nokia’s map tile service.
• 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.
• 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. • Use PNG tiles to support transparency, so underlying map can be seen
beneath your data.
+
=
Base Map Tiles
Overlay Tiles
Result
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 a MapURLProvider (1)
34 © Nokia 2012 Advanced Maps on Apps.pptx
Implementing MapURLProvider (2)
35 © Nokia 2012 Advanced Maps on Apps.pptx
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.