Nokia Mobile HTML5 Framework
Interactive map
Search
Place details
Routing
Simple
Integrate with ready-built
compo-nents using only a few lines of code.
Integrate YUI, jQuery Mobile,
Sen-cha and many other JS FWs.
Use UI components for Maps,
Places, Search, Route, Favorites,...
Built–in HTML5 and optimized for
mobile and tablet.
Customize our components with the
look–and–feel thats right for you.
Design and integrate components
that suit your branding best.
Wrap your app in web view for
access to native features.
Then you can put your app in an
app store or marketplace.
Rich
Customizable
Submit ready
for cross-platform and cross-device development
Supported platforms
Mobile
Tablet
Now:iOS 4.x, iOS 5.0
Android 2.2, 2.3, 3.1, 3.2 (4.0)
Meego
Blackberry Touch devices OS6, OS7
(experimental)
Coming H2 2012:
Symbian
Windows Phone 8.0
WebOS 2+
And more out of the box
Take advantage of included features
Chrome hiding
Smooth transitions
Back history behavior
Reverse/Geocoding
m.ma ps.nokia
Detail: components
The following slides explain each
component’s functionality and
customizable elements.
Map
Search
Place details
+ sharing
Routing
Elements in this component
Map with different map schemes Places of interest
Marker
Info bubble (customisable)
Map position button and user’s position on map Map settings button
Optional zoom control, when pinch–zoom is not available The map component contains a fully interactive map with pinch zoom (or additional zoom buttons), clickable places of interest (POIs) and long–press info buttons for every street area. In additon there are options to show the user’s position on the map and different map schemes to choose from.
page 08 page 15 page 16 page 17 search component map views custom colors custom elements
Map component
01 02 03 04 05 06 07 07 05 05 04 06 02 03 01Elements in this component
page 09 page 16 search result views
custom colors
Search bar with placeholder text Search history and search suggestions
You can use our place database which contains millions of items and provides address and location search.
Or you can insert your own search back end and take advantage of our UX features, such as search history.
Search component
01 02 01
Elements in this component
Search results on map* > mobile Search result list > mobile Search result pin
Search result combined view (map* & list) > tablet
Search results on the map show where places are located. Linking the map and the search results is very easy to do. Clicking on a search result pin opens an info bubble that contains the place name. Clicking the info bubble links to place details.
On mobile, there are two results views – map and list. On a tablet, the map and list view are combined to give more information at once.
Search component – result views
page 04 page 15 page 16 page 17 responsive web design
map views custom colors custom elements
* part of map component 01 02 03 04 01 02 03 03 04
Elements in this component
Contact card
Place actions: Call / Share / Route / Web Images
Owner information
Map with different map schemes
The place details component contains rich information on the places in our database. The Minimap on top shows the place and what’s in its vicinity.
Next to the basic place information - such as address, owner information and images - there is an interactive bar that offers multiple place interactions.
Place details component – top
page 11 page 16 page 17 place details bottom
custom colors custom elements
Elements of other components
01 02 03 04 05 01 05 02 03 04
Elements in this component
Guides section Reviews section Nearby section Legal note
To add more content to place detail pages, multiple reviews and guides are available from well–known services such as qype, trip advisor and WCities.
The ‘Nearby’ section shows a list of places in the vicinity and pro-vides incentive to explore further.
Place details component – bottom
page 10 page 16 page 17 page 18 place details top
custom colors custom elements embedding 01 02 03 04 01 02 03 04
Elements in this component
Information about the place to be shared Different sharing services
Users can share the places they find with others using the most popular social networking services.
Integration with mail or SMS is included, and social network services can be added or removed.
Share a place (coming soon)
page 10 place details top
01 02 01
Elements in this component
Elements of other components
Start and destination form Change method of travel
Map / list toggle
Map with Route on map, start and end point List with instructions
Users can navigate from their current location (or anywhere else) to the places they found from searching or while browsing place details.
Routes are available for walk, drive or public transport and can be viewed on a map or in a list.
Routing component
page 10 page 16 page 17 page 18 place details top
custom colors custom elements embedding 01 02 03 04 05 01 03 03 02 04 05
Detail: customizations
Customize further with different
map schemes, custom elements
and custom colors and embed
your app into your website or
mobile application.
There are a lot of different map schemes to choose from: map, satellite, public transport, live traffic, grey, terrain, hybrid – and more to come.
Adding optional map settings functionality enables users to change between those map schemes.
In this screen the user can change the map scheme and the measurement units for distances.
Additonal: Map settings
...
Map schemes
Color slots
Custom colors
bright background dark background
all backgrounds
secondary primary
primary secondary
text input bg
header
There are two color sets available, one for bright and one for dark backgrounds (bg). Each set contains two color slots for a primary and a secondary color.
In addition, you can change the color of the header bar as well as the text input background color.
01 01 03 02 04 03 02 04 01 05 06 06 05 01 01
Almost every icon color and element shape can easily be changed to suit your needs.
Just open the file full of customizable icons and shapes and change them to your liking.
Custom elements
When you’re done creating and customizing, you’re ready to embed the components into your website or mobile application. This embeddable version integrates easily and seamlessly with your existing components.
Custom header
Customized components and content
Embedding example
Embedding
01 01 02 02GIG-Finder
So, ready to build your own mobile HMTL5,
cross–platform location–based apps?
Just drop me a line at
