R-Maps/Datamaps/AngularJS: Как добавить заголовок легенды на мою карту.

Question

В настоящее время я работаю над проектом, который просматривает относительный поисковый трафик для термина "brexit" за последние 2,5 года. Я сделал карты, но борюсь с некоторыми проблемами качества жизни. Я использую R-карты и карты данных. Первым из них является добавление заголовка легенды к моим картам. Я понимаю, что заголовок, вероятно, следует добавить на этом этапе:

#Data maps base map.
options(rCharts.cdn = TRUE)
map <- Datamaps$new()  
map$set(
  dom  = 'chart_1',
  scope = 'world',
  fills = fills,
  data = datm3[[1]],
  legend = TRUE, 
  labels = FALSE
)

map

Что нужно добавить сюда, чтобы создать легенду с надписью "Относительный ежемесячный поисковый трафик".

Моя вторая проблема связана с интерактивным компонентом. В качестве текущей работы вокруг ползунка используются значения в диапазоне от 1 до 30, но в действительности эти значения должны быть ежемесячными приращениями в диапазоне с января 2017 года по июнь 2018 года. Как мне добавить код в раздел angularjs, чтобы изменить значения от 1-30 на ползунке до символов с "январь-2016" по "июнь-2018"? Относительный раздел кода для этого раздела находится здесь:

#Interactive slider component. 
map2 = map$copy()
map2$set(
  bodyattrs = "ng-app ng-controller='rChartsCtrl'"
)
map2$addAssets(
  jshead = "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"
)

map2$setTemplate(chartDiv = "
  <div class='container'>
                 <input id='slider' type='range' min = 1 max = 30 ng-model='Year' width=500>
                 <span ng-bind='Year'></span>
                 <div id='chart_1' class='rChart datamaps'></div>  
                 </div>
                 <script>
                 function rChartsCtrl($scope){
                 $scope.Year = 1;
                 $scope.$watch('Year', function(newYear){
                 mapchart_1.updateChoropleth(chartParams.newData[newYear]);
                 })
                 }
                 </script>"
)

map2$set(newData = datm3)
map2

Мои данные можно скачать здесь: https://drive.google.com/open?id=1xBqApmzAzzYHwDIEuxYiksO5bw5N7EBp

Полный код здесь:

#Packages for install.
install.packages("reshape2")
install.packages("Quandl")
install.packages("plyr")
install.packages("rMaps")
install.packages("datamaps")
install.packages("rgdal")
install.packages("kableExtra")
install.packages("funModeling")
install.packages("discretization")
install.packages("sf")
install.packages("maptools")
install.packages("RColorBrewer")
install.packages("countrycode")
install.packages("AngularJS")
#Packages for run. 
library(reshape2)                 
library(Quandl)
library(plyr)
library(rCharts)
library(rMaps)
library(datamaps)
library(kableExtra)
library(funModeling)
library(discretization)
library(rgdal)
library(sf)
library(maptools)
library(RColorBrewer)
library(countrycode)
library(ggplot2)

#Find Brexit data set.Obvisouly set your own WD here. 
Brexit.Data <- read.csv("E:/MSc Disso/Transposed Brexit.csv", check.names = FALSE)
#Melt Brexit data set.
datm <- melt(Brexit.Data, 'Year',
             variable.name = 'Country',
             value.name = 'Search Frequency',
             check.names = FALSE

)

#Add breaks to data.                             
datm2 <- transform(datm,
                   Country = countrycode(datm[,2], origin = "country.name", destination = "iso3c"),
                   fillKey = cut(datm[,3],breaks = c(-Inf,0,9,19,49,Inf),labels = c("0","1-9","10-19","20-49","50+"))
)

datm2 <- subset(na.omit(datm2))

#Define CB pallet.
fills = setNames(
  c(RColorBrewer::brewer.pal(5, 'PuBu'),'black'),
  c(c("0","1-9","10-19","20-49","50+"))
)

#Payload creation for data maps. 
datm3 <- dlply(na.omit(datm2), "Year", function(x){
  y= toJSONArray2(x, json = F)
  names(y) = lapply(y, '[[', 'Country')
  return(y)
})

datm3

#Data maps base map.
options(rCharts.cdn = TRUE)
map <- Datamaps$new()  
map$set(
  dom  = 'chart_1',
  scope = 'world',
  fills = fills,
  data = datm3[[1]],
  legend = TRUE, 
  labels = FALSE
)

map

#Interactive slider component. 
map2 = map$copy()
map2$set(
  bodyattrs = "ng-app ng-controller='rChartsCtrl'"
)
map2$addAssets(
  jshead = "http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"
)

map2$setTemplate(chartDiv = "
  <div class='container'>
                 <input id='slider' type='range' min = 1 max = 30 ng-model='Year' width=500>
                 <span ng-bind='Year'></span>
                 <div id='chart_1' class='rChart datamaps'></div>  
                 </div>
                 <script>
                 function rChartsCtrl($scope){
                 $scope.Year = 1;
                 $scope.$watch('Year', function(newYear){
                 mapchart_1.updateChoropleth(chartParams.newData[newYear]);
                 })
                 }
                 </script>"
)

map2$set(newData = datm3)
map2



#Autoplay function. 
map3 = map2$copy()
map3$setTemplate(chartDiv = "
  <div class='container'>
    <button ng-click='animateMap()'>Play</button>
    <div id='chart_1' class='rChart datamaps'></div>  
  </div>
  <script>
    function rChartsCtrl($scope, $timeout){
      $scope.year = 1;
      $scope.animateMap = function(){
        if ($scope.year > 30){
          return;
        }
        mapchart_1.updateChoropleth(chartParams.newData[$scope.year]);
        $scope.year += 1
        $timeout($scope.animateMap, 1000)
      }
    }
  </script>"
)

map3

Заранее благодарю за любую помощь!