Q:

Changing the position of components

I can add components to the map via initial settings as below:
map = new nokia.maps.map.Display(
    document.getElementById( "map-canvas" ), {
        // Zoom level for the map
        zoomLevel: 6,
        // Map center coordinates
        center: [ 0, 0 ], // not real values
        components: [
             // ZoomBar provides an UI to zoom the map in & out
             new nokia.maps.map.component.ZoomBar(), 
             // We add the behavior component to allow panning / zooming of the map
             new nokia.maps.map.component.Behavior(),
             new nokia.maps.map.component.Traffic()
        ]
    }
);

However, it adds Traffic component to the top-left of the page, I have a fixed top bar so I cannot see the component.
I want to change the position of that component let's say bottom-right. I couldn't find anything related in neither documentation nor Internet (or maybe I'm missing some points). 
Does the API have a feature like that or do I have to use CSS to change?
EDIT: My Solution:
I ended up playing with CSS although I'm curious about other type of solutions.
$( ".nm_MapSettingsWrap" )
      .removeClass( "nm_right" )
      .css( "position", "absolute" )
      .css( "bottom", "20px" )
      .css( "right", "5px" )
   .parent()
   .css( "bottom", "-7px" )
   .removeClass( "nm_top" );

I'm not using HERE maps anymore, so my solution is a bit old and I might make mistake about class removals as I don't remember very well, but the idea is to play with CSS of nm_MapSettingsWrap class and its parent.

A:

If you look inside the DOM generated by the map you will find the following elements:
<div class="ovi_mp_mapScheme_normal ovi_mp_hover" style="z-index: 0;"><div class="ovi_mp_controls" style="z-index: 0; font-size: 1em;">
...
   <div class="nm_arrangeableAnchor nm_right">
...
      <ul class="nm_mapSettingsWrap nm_left nm_layout_horizontal" aria-role="menubar" aria-expanded="false">
...
        <li class="nm_trafficIncidents nm_wrap" aria-hidden="true" aria-role="menuitemradio">
            ... etc.
        </li>
        <li class="nm_traffic nm_wrap" aria-hidden="false" aria-role="menuitemradio" title="Traffic conditions" tabindex="0" aria-disabled="false" aria-pressed="false" style="position: relative; overflow: hidden;">
                    ... etc
      </li>

You should be able to use something like jQuery to obtain the node and alter the CSS classes from nm_left to nm_right and nm_middle to nm_top etc. Further adjustments can be made by adding custom styling to these elements.
Alternatively add a custom button component yourself and CSS style it to the position you want as in this question here and switch map types programmatically as described here

