Setting mapbox size

In order to set the size of the mapbox, you can add a width=x and height=y to the <mapbox> element:

<mapbox map-id="your-id" width=x height=y lat="37.78" lng="-122.43" zoom="12">

However, width and height are not set in traditional css format. Adding height="250px" will not work, because in angular-mapbox.js, the following modifications are added to the attributes:

    var mapWidth = attrs.width || 500;
    var mapHeight = attrs.height || 500;
    element.css('width', mapWidth + 'px');
    element.css('height', mapHeight + 'px');

Here, whatever value is given for the width/height attribute, 'px' is added. Therefore, you define your height/width values without the "px", such as:

<mapbox map-id="your-id" width="300" height="300" lat="37.78" lng="-122.43" zoom="12">

In Chrome, you can still use relative sizes with percentages ( width="100%"), as it seems to be prioritized over the px value. (Untested in other browsers)