×
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
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Add ArticleMetaData)
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor subedit - still needs a lot of work)
Line 1: Line 1:
 +
[[Category:Series 40 Web Apps]][[Category:Nokia Maps]][[Category:JavaScript]][[Category:Series 40]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 6: Line 7:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|dependencies= http://api.maps.nokia.com/2.0.0/
 
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
Line 21: Line 22:
 
|author= [[User:R60600]]
 
|author= [[User:R60600]]
 
}}
 
}}
[[Category:Series 40 Web Apps]]
+
 
 
{{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 64: Line 66:
 
</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 82: Line 84:
 
[[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 95: Line 97:
 
</code>
 
</code>
  
The TypeSelector doesn't appear first  
+
The {{Icode|TypeSelector}} doesn't appear first  
  
 
[[File:TypeSelectorDisappear.JPG]]
 
[[File:TypeSelectorDisappear.JPG]]
Line 103: Line 105:
 
[[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 110: Line 112:
  
 
[[File:TypeSelectorDragRight.JPG]]
 
[[File:TypeSelectorDragRight.JPG]]
 
<!-- [[Asha Touch Competition 2012Q3]] -->
 

Revision as of 08:51, 27 July 2012

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

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

205 page views in the last 30 days.
×