title: Highmaps Map Scale
body: <p>How can I adjust the size of the map shape within a give chart div container?
  I do not see any method to set scale. I am trying to do something similar to the <a href="http://www.highcharts.com/maps/demo/map-drilldown" rel="nofollow">demo</a> but using only a few states (that are bordered to each other). When I remove the unused states the remaining states still appear small within the given chart area. Upon drilling down to a state you can see a zoomed-in version that fits the container size. Now, when you click the "drill up" button you see the map paths now fill the chart container. Here is a rough <a href="http://jsfiddle.net/wergeld/9Fk3a/" rel="nofollow">example</a>.
  Here is the div container:</p>
  
  <pre><code>&lt;div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the code used to generate the chart (see jsfiddle for test data):</p>
  
  <pre><code>    // Set drilldown pointers
      $.each(Highcharts.maps['US-FL'], function () {
          this.drilldown = this.id;
      });
  
      // Add some real data
      $.each(Highcharts.maps['US-FL'], function () {
          //this.value = Math.round(Math.random() * 100);
          var theID = this.id.toString();
              var theData;
              data1.some(function (arrayItem) {
                  var x = arrayItem[0];
                  console.log(x);
                  if (x == theID) {
                      theData = arrayItem[1];
                      return theData;
                  }
              });
              this.value = theData;
      });
  
      $.each(drilldownSeries, function () {
          $.each(this.data, function () {
              var theID = this.id.toString();
              var theData;
              data1.some(function (arrayItem) {
                  var x = arrayItem[0];
                  //console.log(x);
                  if (x == theID) {
                      theData = arrayItem[1];
                      return theData;
                  }
              });
              this.value = theData;
          });
      });
  
      // Some responsiveness
      var small = $('#container').width() &lt; 400;
  
      // Instanciate the map
      $('#container').highcharts('Map', {
          chart: {
              events: {
                  drilldown: function (e) {
                      this.setTitle(null, {
                          text: e.point.name
                      });
                      e.seriesOptions.name = e.point.name;
                  },
                  drillup: function (e) {
                      this.setTitle(null, {
                          text: 'Florida'
                      });
                  }
              }
          },
  
          title: {
              text: 'Highcharts Map Drilldown'
          },
  
          subtitle: {
              text: 'Florida',
              floating: true,
              align: 'right',
              y: 50,
              style: {
                  fontSize: '16px'
              }
          },
  
          legend: small ? {} : {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle'
          },
  
          colorAxis: {
              min: 0
              //max: yMaxVal,
              //minColor: '#E6E7E8',
              //maxColor: '#005645'
          },
  
          mapNavigation: {
              enabled: true,
              buttonOptions: {
                  verticalAlign: 'bottom'
              }
          },
  
          plotOptions: {
              map: {
                  states: {
                      hover: {
                          color: '#EEDD66'
                      }
                  }
              }
          },
  
          series: [{
              data: Highcharts.maps['US-FL'],
              name: 'State of Florida',
              dataLabels: {
                  //enabled: true,
                  formatter: function () {
                      return this.point.id.substr(3, 2);
                  },
                  format: null
              }
          }],
  
          drilldown: {
              series: drilldownSeries,
              activeDataLabelStyle: {
                  color: 'white'
              },
              drillUpButton: {
                  relativeTo: 'spacingBox',
                  position: {
                      x: 0,
                      y: 60
                  }
              }
          }
      });
  });
  </code></pre>