R, rMaps, datamaps: Moving the legend of a choropleth map

Question

I'm attempting to center the legend below a choropleth map of the United States ( an example of a generic map similar to what I've created ). I'm not very familiar with JS or CSS, but I poked around in the datamaps.all.min.js file located in the R-3.2.1\\library\\rMaps\\libraries\\datamaps\\js directory hoping to be able to locate the tag for the legend and its default values. I found this:

.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;

}

I changed it to this and included it in my header.html file:

.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;

}

It appears that these changes are either wrong or ineffective possibly because there is some other .css file taking precedence over these instructions. Currently, the relevant portion of the map looks like this:

The problems include 1) what to me seems like an inexplicable bold and italic treatment of the text edit: fixed that in my .css file and 2) although "position: absolute" , the graphic flows over onto the tables below.

Answer 1

You should be able to add some CSS to override the default styles, like so:

.datamaps-legend {
  position: static;
}

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
}

Answer 2

So what I ended up doing, following the advice of @markmarkoh , was to amend the template script chart.html located in ~\\R-3.2.1\\library\\rCharts\\libraries\\datamaps\\layouts and change the very end of it from

<style>
.datamaps {
  position: relative;
}
</style>

to

<style>
.datamaps {
  position: relative;
  display: inline-block;
  text-align: center;
}
.datamaps-legend {
  position: static;
}

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
}
</style>

then save the modified copy to my working directory and change the template location of the figure like this:

map1$setTemplate(script = 'chart.html')