×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Optimize HERE Map Type Selector for Asha 305, Asha 306 and Asha 311

From Nokia Developer Wiki
Jump to: navigation, search
kiran10182 (Talk | contribs)
hamishwillee (Talk | contribs)
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Series 40 Web Apps]]
+
[[Category:Series 40 Web Apps]][[Category:Nokia Maps]][[Category:JavaScript]][[Category:Series 40]]
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= http://api.maps.nokia.com/2.0.0/
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20120712
 +
|author= [[User:R60600]]
 +
}}
 +
{{SeeAlso|
 +
* [http://developer.here.net/java Maps API for Java ME]
 +
* [http://developer.here.net/rest_api RESTful Maps API]
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [[Creating_a_Map_Type_Selector_for_the_Maps_API_for_Java_ME|Creating a Map Type Selector]]
 +
}}
 +
 
 +
{{Archived|timestamp=20130201151019|user=[[User:Jasfox|Jasfox]]|
 +
This article uses a deprecated version of the Nokia Maps API for JavaScript to display a Map on a Java ME device. The  Nokia Maps API for JavaScript  is not considered to be an appropriate API to use in the Java ME environment, as a large JavaScript library would need to be regularly downloaded onto a memory constricted device, and un-cached Map tiles would need to be regularly requested which would result in a large amount of data traffic.
 +
 
 +
Nokia offers two alternative APIs which are more suitable for Java ME development
 +
* For a simple '''static''' map using the  [http://developer.here.net/rest_api RESTful Maps API] within a web widget is considered to be a reasonable lightweight solution.
 +
* For '''dynamic''' mapping use cases, the  [http://developer.here.net/java Nokia Maps API for Java ME] is a Native API which would be preferred more complex development.
 +
 
 +
* '''Static''' mapping services  do not cache or tile the images when requested, therefore '''each''' request involves a round trip to the server. If the map on a mobile application needs to be refreshed at any time, using a caching library will result in a reduction in network traffic after around '''three''' maps have been displayed. An explanation of this can be found  [http://www.developer.nokia.com/Community/Wiki/Using_the_RESTful_Map_API_with_Java_ME#Comparision_of_Network_traffic_generated_by_the_RESTful_Map_API_and_Maps_API_for_Java_ME here]
 +
 
 +
An article with the same functionality, written using the native Java ME API  can be found in the  [[Creating_a_Map_Type_Selector_for_the_Maps_API_for_Java_ME|Creating a Map Type Selector Example]]
 +
}}
 +
 
 
{{Note|This is an entry in the [[Asha Touch Competition 2012Q3]]}}
 
{{Note|This is an entry in the [[Asha Touch Competition 2012Q3]]}}
  
[https://www.developer.nokia.com/Devices/Device_specifications/Asha_305/ Asha 305], [https://www.developer.nokia.com/Devices/Device_specifications/Asha_306/ Asha 306], [https://www.developer.nokia.com/Devices/Device_specifications/Asha_311/ Asha 311] are S40 devices with new full touch UI which will provide a better user experience for map operation.And developers may not construct ScaleBar and ZoomBar for user.But these devices only support HTML 4.0,Developers can only use Nokia Map API for Web to display map in Browser or Widget.
+
[http://www.developer.nokia.com/Devices/Device_specifications/Asha_305/ Asha 305], [http://www.developer.nokia.com/Devices/Device_specifications/Asha_306/ Asha 306], [http://www.developer.nokia.com/Devices/Device_specifications/Asha_311/ Asha 311] are Series 40 devices with new full touch UI which will provide a better user experience for map operation. And developers may not construct {{Icode|ScaleBar}} and {{Icode|ZoomBar}} for user. But these devices only support HTML 4.0, Developers can only use Nokia Map API for Web to display map in Browser or Widget.
This is a simple Nokia map example with TypeSelector.
+
 
 +
This is a simple Nokia map example with [http://api.maps.nokia.com/2.0.0/apireference/symbols/nokia.maps.map.component.TypeSelector.html TypeSelector].
 
<code javascript>
 
<code javascript>
 
<html>
 
<html>
Line 42: Line 84:
 
</code>
 
</code>
  
After run,the TypeSelector may extend un-completely.  
+
After run,the {{Icode|TypeSelector}} may extend un-completely.  
  
 
[[File:TypeSelectorUncomplete.JPG ‎]]
 
[[File:TypeSelectorUncomplete.JPG ‎]]
  
Because these 3 Asha devices's portrait screen width is less than width of horizontal extending TypeSecector.Maybe many developers don't think it's a question because user can rotate to landscape screen which has full width and is fit for 2 hands hold.But I think developers had better provide users another convenience way which let them operate map when only can use single hand.
+
Because these 3 Asha devices's portrait screen width is less than width of horizontal extending {{Icode|TypeSelector}}. Maybe many developers don't think it's a question because user can rotate to landscape screen which has full width and is fit for 2 hands hold. But I think developers had better provide users another convenience way which let them operate map when only can use single hand.
  
So the newer [http://api.maps.nokia.com/en/versions.html version of Nokia Map API for Web] is introduced to settle this question,only alter another Javascript file.
+
So the newer [http://api.maps.nokia.com/en/versions.html version of Nokia Map API for Web] is introduced to settle this question, only alter another Javascript file.
 
<code javascript>
 
<code javascript>
 
...
 
...
Line 60: Line 102:
 
[[File:TypeSelector2.1.0.jpg]]
 
[[File:TypeSelector2.1.0.jpg]]
  
which is not only fit for 3 Nokia Asha devices but also for many other limited screen devices .
+
which is not only fit for 3 Nokia Asha devices but also for many other limited screen devices.
  
 
Way above is good but I prefer next which via increasing the width of the map container.
 
Way above is good but I prefer next which via increasing the width of the map container.
Line 73: Line 115:
 
</code>
 
</code>
  
The TypeSelector doesn't appear first  
+
The {{Icode|TypeSelector}} doesn't appear first  
  
 
[[File:TypeSelectorDisappear.JPG]]
 
[[File:TypeSelectorDisappear.JPG]]
Line 81: Line 123:
 
[[File:TypeSelectorDragLeft.JPG ‎ ]][[File:TypeSelectorAppear.JPG]]
 
[[File:TypeSelectorDragLeft.JPG ‎ ]][[File:TypeSelectorAppear.JPG]]
  
The TypeSelector can extend horizontal completely,
+
The {{Icode|TypeSelector}} can extend horizontal completely,
  
 
[[File:TypeSelectorComplete.JPG ‎ ]]
 
[[File:TypeSelectorComplete.JPG ‎ ]]
Line 89: Line 131:
 
[[File:TypeSelectorDragRight.JPG]]
 
[[File:TypeSelectorDragRight.JPG]]
  
<!-- [http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3 Asha Touch Competition 2012Q3] -->
+
Please read [http://www.developer.nokia.com/Community/Wiki/Update_Nokia_Online_Maps_Style_for_Asha_Full_Touch Update Nokia Online Maps Style for Asha Full Touch] for better map services on Asha full touch.

Revision as of 04:31, 16 January 2013

Article Metadata
Compatibility
Platform(s):
Series 40
Article
Created: r60600 (12 Jul 2012)
Last edited: hamishwillee (16 Jan 2013)

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

This article uses a deprecated version of the Nokia Maps API for JavaScript to display a Map on a Java ME device. The Nokia Maps API for JavaScript is not considered to be an appropriate API to use in the Java ME environment, as a large JavaScript library would need to be regularly downloaded onto a memory constricted device, and un-cached Map tiles would need to be regularly requested which would result in a large amount of data traffic.

Nokia offers two alternative APIs which are more suitable for Java ME development

  • For a simple static map using the RESTful Maps API within a web widget is considered to be a reasonable lightweight solution.
  • For dynamic mapping use cases, the Nokia Maps API for Java ME is a Native API which would be preferred more complex development.
  • Static mapping services do not cache or tile the images when requested, therefore each request involves a round trip to the server. If the map on a mobile application needs to be refreshed at any time, using a caching library will result in a reduction in network traffic after around three maps have been displayed. An explanation of this can be found here
An article with the same functionality, written using the native Java ME API can be found in the Creating a Map Type Selector Example

Note.pngNote: This is an entry in the Asha Touch Competition 2012Q3

Asha 305, Asha 306, Asha 311 are Series 40 devices with new full touch UI which will provide a better user experience for map operation. And developers may not construct ScaleBar and ZoomBar for user. But these devices only support HTML 4.0, Developers can only use Nokia Map API for Web to display map in Browser or Widget.

This is a simple Nokia map example with TypeSelector.

<html>
<head>
<script type="text/javascript" charset=UTF-8"
src="http://api.maps.nokia.com/2.0.0/jsl.js?"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
</head>
<body >
<div id="mapContainer"></div>
<script type="text/javascript">
var mapContainer = document.getElementById("mapContainer");
var map = new nokia.maps.map.Display(mapContainer, {
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector()
]
});
</script>
</body>
</html>

After run,the TypeSelector may extend un-completely.

TypeSelectorUncomplete.JPG

Because these 3 Asha devices's portrait screen width is less than width of horizontal extending TypeSelector. Maybe many developers don't think it's a question because user can rotate to landscape screen which has full width and is fit for 2 hands hold. But I think developers had better provide users another convenience way which let them operate map when only can use single hand.

So the newer version of Nokia Map API for Web is introduced to settle this question, only alter another Javascript file.

...
<script type="text/javascript" charset=UTF-8"
src="
http://api.maps.nokia.com/2.1.0/jsl.js?"></script>
...

And the TypeSecector will extend vertical,

TypeSelector2.1.0.jpg

which is not only fit for 3 Nokia Asha devices but also for many other limited screen devices.

Way above is good but I prefer next which via increasing the width of the map container.

...
<script type="text/javascript" charset=UTF-8"
src="
http://api.maps.nokia.com/2.0.0/jsl.js?"></script>
...
#mapContainer {
width: 150%;
...

The TypeSelector doesn't appear first

TypeSelectorDisappear.JPG

before user drag mapcontainer from right to left.

TypeSelectorDragLeft.JPGTypeSelectorAppear.JPG

The TypeSelector can extend horizontal completely,

TypeSelectorComplete.JPG

and be dragged,selected or closed.

TypeSelectorDragRight.JPG

Please read Update Nokia Online Maps Style for Asha Full Touch for better map services on Asha full touch.

190 page views in the last 30 days.
×