title: R, rMaps, datamaps: Moving the legend of a choropleth map
body: <p>I'm attempting to center the legend below a choropleth map of the United States (<a href="http://rmaps.github.io/blog/posts/animated-choropleths/fig/simplechoro.html" rel="nofollow noreferrer">an example of a generic map similar to what I've created</a>). I'm not very familiar with JS or CSS, but I poked around in the <code>datamaps.all.min.js</code> file located in the <code>R-3.2.1\library\rMaps\libraries\datamaps\js</code> directory hoping to be able to locate the tag for the legend and its default values. I found this:</p>
  
  <pre><code>.datamaps-legend dt, .datamaps-legend dd { 
    float: left; 
    margin: 0 3px 0 0;
  
  } .datamaps-legend dd {
    width: 20px; 
    margin-right: 6px; 
    border-radius: 3px;
  
  } .datamaps-legend {
    padding-bottom: 20px; 
    z-index: 1001; 
    position: absolute; 
    left: 4px; 
    font-size: 12px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  }
  </code></pre>
  
  <p>I changed it to this and included it in my <code>header.html</code> file:</p>
  
  <pre><code>.datamaps-legend dt, .datamaps-legend dd { 
    float: left; 
    margin: 0 3px 0 0;
  
  } .datamaps-legend dd {
    width: 20px; 
    margin-right: 6px; 
    border-radius: 3px;
  
  } .datamaps-legend {
    padding-bottom: 20px; 
    z-index: 1001; 
    position: absolute; 
    left: 40px; 
    font-size: 10px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  }
  </code></pre>
  
  <p>It appears that these changes are either wrong or ineffective possibly because there is some other <code>.css</code> file taking precedence over these instructions. Currently, the relevant portion of the map looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/YfhJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YfhJJ.png" alt="enter image description here"></a></p>
  
  <p>The problems include <em>1) what to me seems like an inexplicable bold and italic treatment of the text</em> <strong>edit: fixed that in my <code>.css</code> file</strong> and 2) although <code>"position: absolute"</code>, the graphic flows over onto the tables below.</p>