title: Add Legend to jVectorMap
body: <p>I am updating our application to use jVectorMap instead of a Flash. Some of the maps need the countries to be colored differently. This is pretty simple to create.</p>
  
  <pre><code>&lt;div id="world-map-color" style="width: 900px; height: 600px;"&gt;&lt;/div&gt;
  &lt;script&gt;
      var myData = {
                    "AF": 36.63,
                    "RU": 11.58,
                    "US": 158.97
                   };
  
      $('#world-map-color').vectorMap({
          backgroundColor: "#FFFFFF",
          regionStyle: {
              initial: { fill: "#7C96A1" },
              hover: { fill: "#A0D1DC" }
          },
          series: {
              regions: [{
                  values: myData,
                  scale: ['#B0ADF7', '#0D0885'],
                  normalizeFunction: 'polynomial'
              }]
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The resulting map:</p>
  
  <p><img src="https://i.stack.imgur.com/BLWLy.png" alt="Color Map"></p>
  
  <p>However, I'd like to add some kind of legend/key to say what the scale of the colors are. Something like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/9aHvq.png" alt="Example Lengend"></p>
  
  <p>Additionally, that example legend (from Flash) allowed the user to change the scaling for the colors using those arrows on the top. So it'd be nice if that was possible as well.</p>
  
  <p>Does anyone know if any parts of these are possible?</p>