Advanced Maps on Apps for Series 40

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

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

A Brief Overview of the NokiaMaps API for Java ME3 © Nokia 2012 Advanced Maps on Apps.pptx

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 :http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/ 4 © Nokia 2012 Advanced Maps on Apps.pptx

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

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

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

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

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

Storing, Obtaining andDisplaying Data for yourMap-based Application10 © Nokia 2012 Advanced Maps on Apps.pptx

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

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

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

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

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

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

Data Feeds and Formats17 © Nokia 2012 Advanced Maps on Apps.pptx

Data FeedsThere are currently two popular alternative data formats fortransmitting structured data over a network connection. Both arelanguage 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.18 © Nokia 2012 Advanced Maps on Apps.pptx

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

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

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

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

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

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

What is KML?KML http://www.opengeospatial.org/standards/kml/Keyhole 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

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

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

Parsing and Displaying KMLData or “Getting your map data on screen the easy way”28 © Nokia 2012 Advanced Maps on Apps.pptx

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

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

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

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

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

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

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/Maps36 © Nokia 2012 Advanced Maps on Apps.pptx

Advanced Maps on Apps for Series 40

by Nokia Developer on May 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Advanced Maps on Apps for Series 40 Presentation Transcript