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.
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')