Advanced Maps on Apps for Series 40


Published on

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.

Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Which data feed to use?
  •çade Pattern - hides all the “plumbing” code - the low level connection calls, image manipulation etc. leaving a simple and consistent interface so you don’t need to reinvent the wheel.
  • Does all the hard bits so you don’t have to bother.
  • Typical Screen Size 320 x 240 pixels, 2.6 inchesAppropriate Map
  • Scale Bar, tool tip animator
  • Typcial Multi-tier architecture.MIDP – Good user experience but ….. …..Network connection setup is slow.Data rates are slow.The processor is slow.Memory is scarce.Because of these constraints, MIDP client applications should be designed to be as small as possible. Do as much as possible server side.
  • The “What” and the “Where”
  • The associoation is probably better implemented as a Map Component.
  • Note that the SAMEDATA can be easily displayed in a multitude of ways.UX design course stated that.GIVE THEM THE OPTION
  • Static dataHow dynamic is your dynamic data?For an application to remain relevant you need to be able t1) On device:2)How dynamic is your dynamic data?Since maps are not offline will require a web connection anyway
  • in-app purchasing
  • JSON used with WEBsites e.g. JavaScript will typically consume JSON feeds – use for cross platform.XML
  • 40.0191219,-105.2746654 - Where does this place me? I’m apparently on 16th Street in Boulder, Colorado, USAArbitrary names for elements.
  • The title of this slide is slightly misleading as the Display bit has already been covered previously (mainly basic maps webinar)Why do hard first - The discussion for the next couple of slides serves to show the purpose fulfilled by an on-board KML parser.
  • Parser will read ALL the data first and then start processing.DEVELOPER will need to know data structure Will vary app to app.e.g. that a geo contains a coordinates which is an array.Also Need to know the keys of all the items – re-implement for each app.
  • SAX not DOM – reduces memory overhead, but can’t jump around the fileNeed to read the whole tag – tag before processing. Could use this to deserialize data
  • Benefits of KML – everything XML has plus well defined Geo-based structure. In common use. E.g. Earth Viewers.See benefits of Mobile Optimized on screen –compare web and mobile screens – mobile less cluttered and clearer.Ensure Icons are a minimal size 9x9 pixels.Tooltip here is non-standard – give minimal info prior to details. Avoid key press. Man City – nokia blue will be default.
  • Same as the XML Example –just that the tag names have changed. Well defined NAMESPACE We are still in Boulder Colorado lat/long alt
  • Use features to associate non-geographic data. Extended Data is a Map ObjectUse Geometries to define the Where on the screenUse Styles to alter the look-and- feel (StyleMap can do highlighting). Styles are MORE EFFICIENT when loading data than Inline Styles,.
  • parseKML also handles URL connection.Document, Feature,PlaceMark– every class within the kml package have same name as associated KML element (Means there are two POINT classes.)parser.parse(getClass().getResourceAsStream("/premiership.kml"), this);  obtain data from bundled resource.createResultSet can also Scale (if necessary) – if you have control do this server side, avoid overhead.
  • The MapContainer from the ResultSet separates the View of the data on the MapDisplay from the underlining Data ModelAfter 3) you will get markers on the map. They won’t do anything though When d
  • Why bother? – could use alternate maps – e.g. small text “Standard Web” versions.Easter Egg maps – e.g. Low Glare “Night Mode”. Recommendation – have a fallback.
  • e.g. Weather, traffic sales data.
  • has a useful tool which explains various url addressing systems.Niothing wrong with providing small tiles and expanding them to fit Keep data overhead a munimumConsider adding a MApComponent which overrides paint to display small tileo
  • Advanced Maps on Apps for Series 40

    1. 1. Nokia Series 40Application Development andDesign with the Nokia Maps APIfor Java ME on Series 40 phonesJason FoxTechnical Support EngineerMaps Platform1 © Nokia 2012 Advanced Maps on Apps.pptx
    2. 2. Agenda1. Brief Overview of the Nokia Maps API for Java ME.2. Where to store your Geographic data3. Data Feeds (JSON + XML)4. Parsing Data from a Web Service5. KML6. Overlays2 © Nokia 2012 Advanced Maps on Apps.pptx
    3. 3. A Brief Overview of the NokiaMaps API for Java ME3 © Nokia 2012 Advanced Maps on Apps.pptx
    4. 4. 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 performanceFull details at : 4 © Nokia 2012 Advanced Maps on Apps.pptx
    5. 5. 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 extension5 © Nokia 2012 Advanced Maps on Apps.pptx
    6. 6. What problems does the APIsolve? or “Why your S40 Map App should use the Nokia Maps API for Java ME”6 © Nokia 2012 Advanced Maps on Apps.pptx
    7. 7. 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 traffic7 © Nokia 2012 Advanced Maps on Apps.pptx
    8. 8. What problems does the API solve? (2)Opportunities• Introduce geographic context to your information.• Displaying an interactive MapYou 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 information8 © Nokia 2012 Advanced Maps on Apps.pptx
    9. 9. What problems does the API solve? (3)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 Support9 © Nokia 2012 Advanced Maps on Apps.pptx
    10. 10. Storing, Obtaining andDisplaying Data for yourMap-based Application10 © Nokia 2012 Advanced Maps on Apps.pptx
    11. 11. The Generic Use Case for a Map BasedApplication 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 use11 © Nokia 2012 Advanced Maps on Apps.pptx
    12. 12. 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 inyourself.But there is one constant across the data for every map basedapplication: “Every datum point will consist of both geographic and non geographic information”12 © Nokia 2012 Advanced Maps on Apps.pptx
    13. 13. What design does this indicate? (2)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 MapMarkerFrom the non-geographic information:• Use a Hashtable to associate the MapMarker with the non-geographic information.13 © Nokia 2012 Advanced Maps on Apps.pptx
    14. 14. What design does this indicate? (3)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 operations14 © Nokia 2012 Advanced Maps on Apps.pptx
    15. 15. 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 serviceAvoid the overhead of dynamic data wherever possible, but you willneed to go online anyway since the maps require a data connection15 © Nokia 2012 Advanced Maps on Apps.pptx
    16. 16. How dynamic is your dynamic data?Completely Static Data e.g. Quiz App - “Capitals of the World”• Bundle data with appLong 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 deviceDaily Data e.g. “Deals for Today …”• Read online summary once on start up.• May need to request more details laterReal Time Updates e.g. “Social Media”• Poll online for limited data summaries 16 © Nokia 2012 Advanced Maps on Apps.pptx
    17. 17. Data Feeds and Formats17 © Nokia 2012 Advanced Maps on Apps.pptx
    18. 18. Data FeedsThere are currently two popular alternative data formats fortransmitting structured data over a network connection. Both arelanguage independent and text based.JSON• 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• 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.18 © Nokia 2012 Advanced Maps on Apps.pptx
    19. 19. JSON Data FormatData received will be a consistent format which may contain• key-value pairs - “name”• arrays of elements - “coordinates”• complex types - “geo”19 © Nokia 2012 Advanced Maps on Apps.pptx
    20. 20. 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> elements20 © Nokia 2012 Advanced Maps on Apps.pptx
    21. 21. Parsing and Displaying Datafrom a Web Service or “Getting your map data on screen the hard way”21 © Nokia 2012 Advanced Maps on Apps.pptx
    22. 22. Parsing JSON DataNo 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 stepStill have to know the data structure, names of entries and so on.… and then create your MapMarkers, and data associations etc.22 © Nokia 2012 Advanced Maps on Apps.pptx
    23. 23. Parsing XML DataA Standard SAX parser implementation of JSR 172 comes as part of theJava ME Web Services Optional package. It will fire events as the XML isprocessed. 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 soon … and finally create your MapMarkers, and data associations etc…23 © Nokia 2012 Advanced Maps on Apps.pptx
    24. 24. An Ideal Data FormatWouldn’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 KML24 © Nokia 2012 Advanced Maps on Apps.pptx
    25. 25. What is KML?KML Markup Language (KML) is an standardized XML notation forgeographic 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 featuresMost 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 andinteract with your data. 25 © Nokia 2012 Advanced Maps on Apps.pptx
    26. 26. 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.26 © Nokia 2012 Advanced Maps on Apps.pptx
    27. 27. The Relationship between MapObjectsand KML ElementsMany 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 giveaccess to the parsed KML data in the Feature interface.27 © Nokia 2012 Advanced Maps on Apps.pptx
    28. 28. Parsing and Displaying KMLData or “Getting your map data on screen the easy way”28 © Nokia 2012 Advanced Maps on Apps.pptx
    29. 29. 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 Document2) Handle Success and Failure. If successful, convert the KML Document into a KMLResultSet by calling KMLFactory.createMLResultSet()passing in the received KML Document. 29 © Nokia 2012 Advanced Maps on Apps.pptx
    30. 30. 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 necessary4) 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.30 © Nokia 2012 Advanced Maps on Apps.pptx
    31. 31. Interacting with KML File Data5) To receive onFocusChanged()events and interact with the <Placemark> elements, you will need to implement a KMLEventListener6) 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 iteratethrough KMLResultSet.getFeatures(). 31 © Nokia 2012 Advanced Maps on Apps.pptx
    32. 32. Displaying Complex DatasetsAn Introduction to Overlays32 © Nokia 2012 Advanced Maps on Apps.pptx
    33. 33. 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.33 © Nokia 2012 Advanced Maps on Apps.pptx
    34. 34. Implementing a MapURLProvider (1)1) To create your own overlay provider, create a subclass of MapURLProvider2) Implement the necessary abstract methods.3) Then add the overlay to the MapDisplay4) Don’t forget Overlay attribution if necessary. 34 © Nokia 2012 Advanced Maps on Apps.pptx
    35. 35. 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.35 © Nokia 2012 Advanced Maps on Apps.pptx
    36. 36. For More Information Download the latest Nokia SDK for Java Consult the Nokia Developer Library Nokia Maps API © Nokia 2012 Advanced Maps on Apps.pptx