advanced maps on apps for series 40

36
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

Upload: nokia-developer

Post on 01-Nov-2014

2.334 views

Category:

Technology


1 download

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

A Brief Overview of the Nokia Maps API for Java ME

3 © 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 and Formats

17 © Nokia 2012 Advanced Maps on Apps.pptx

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().

Displaying Complex Datasets

32 © Nokia 2012 Advanced Maps on Apps.pptx

An Introduction to Overlays

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.

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

36 © Nokia 2012 Advanced Maps on Apps.pptx