Nokia here maps api

Question

I'm using nokia here maps. I've seen that the controls button on the map(toggle button to show/hide traffic,toggle button to show/hide public transport) desappear if the map is inside a small div container. Is there a way to avoid this behaviour, (for example by moving/resizing the control)?

I've used the standard example code for a basic map with components: https://developer.here.com/javascript-apis/enterprise-api-explorer

and put the map inside a div wich resizes itself according to the screen width (Here's my javascript)

<script>
    window.onload=window.onresize=function(){
    $("#bigMapContainerTraff").width($(window).width()-50);
    $("#bigMapContainerTraff").height($(window).height()-50);};
</script>

Answer 1

The standard controls are just that - standard controls that don't offer much in terms of flexibility, but provide consistency across applications. If you are looking to do something else, you would be much better off writing a custom component from scratch:

function extend(B, A) {
    function I() {}
    I.prototype = A.prototype;
    B.prototype = new I();
    B.prototype.constructor = B;
}

var myCustomComponentSimple = function (callback) {
    var myNode = document.createElement("div"); 
    this.callback = callback;   
    this.getId = function() { return "MySimpleCustomComponent"; };  
    this.attach = function(display) {

var myHTML = '<div  id="myCustomComponentButton" style="position: absolute; left: 5px; top: 5px;' +
          'background: #ccc; border: 1px solid #000; padding: 10px;" />';

        myNode.innerHTML = myHTML;

        display.getUIContainer().appendChild(myNode);
        if(!this.button) {
            this.button =  nokia.maps.dom.EventTarget(
                             document.getElementById(
                                     "myCustomComponentButton"));
        }

        this.button.addListener("click", this.callback);
    };
    this.detach = function(display) {
        display.getUIContainer().removeChild(myNode);
        this.button.removeListener("click", this.callback);
    };

    // Call the "super" constructor to initialize properties
    nokia.maps.map.component.Component.call(this);

};
extend(myCustomComponentSimple, 
            nokia.maps.map.component.Component);


var customControl = new myCustomComponentSimple(function(){ 
  alert("doSomething");

    });
    map.components.add(customControl);

The simple control injects a single <DIV> into the DOM and provides a callback function for the click event - since you have control over the styling of this element you can place it or style it as you want. You can easily replicate the behavior of the buttons by adding a toggle for the state of the map as described here