I’m still trying to find a workaround for this question: https://stackoverflow.com/questions/78813014/inserting-text-on-either-side-of-coloraxis-in-gvisgeochart-instead-of-numbers-fo

As far as I can tell, it is not possible to (1) add a title to the color bar, or (2) remove the numbers on either side of the color bar. As a workaround, I’m trying to place annotation above it separately. My issue is that it moves drastically depending on the size as screen.

Is there a way I can fix the text to be above the color bar regardless on the size of screen? For now I’ve positioned it so it kind of works on all but it’s not as tidy as I’d like…

Very big screen: enter image description here

13 inch laptop: enter image description here

Cell phone: enter image description here

The relevant code is:

library(shiny)
library(googleVis)
library(dplyr)
library(DT)

# Load your data
combined_vul_data <- 
  structure(list(ISO3 = c("AF", "AL", "DZ", "AD", "AO", "AG", "AR", 
                          "AM", "AU", "AT", "AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", 
                          "BJ", "BT"), Name = c("Afghanistan", "Albania", "Algeria", "Andorra", 
                                                "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", 
                                                "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", 
                                                "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan"
                          ), vul_capacity_Rank_2021 = c(0.709035449, 0.511126182, 0.523332101, 
                                                        NA, 0.740026186, 0.621133795, 0.446088596, 0.462491218, 0.296565054, 
                                                        0.26689445, 0.47917568, NA, 0.453936004, 0.649876424, 0.398904506, 
                                                        0.386808093, 0.27763708, 0.547525366, 0.763503499, 0.635633065
                          )), class = "data.frame", row.names = c(NA, -20L))


# Define UI for the map
ui <- fluidPage(

tags\(head( tags\)style(HTML(” .color-scale-label { position: absolute; bottom: 35px; left: 20%; transform: translateX(-25%); background: rgba(255, 255, 255, 0.3); padding: 5px; z-index: 1000; pointer-events: none; } @media (max-width: 768px) { .shiny-input-container { width: 100%; .main-panel, .content { height: calc(100vh - 56px) !important; overflow: auto; } .main-panel { height: 100vh; } } “)) ), titlePanel(div(span(”Country Rankings”), style={‘padding-top: 15px’})), tabsetPanel( tabPanel(“Vulnerability Map”, sidebarLayout( sidebarPanel( selectInput(“year”, “Select Year”, choices = 2021, selected = 2021), selectInput(“category”, “Select Category”, choices = list(“Adaptive Capacity” = “vul_capacity”), selected = “vul_vulnerability”) ), mainPanel( tags$div(class=“color-scale-label”, “Least to Most Vulnerable”), htmlOutput(“map”) ) ) ) ) )

# Define server logic for the map
server <- function(input, output) {
   output$map <- renderGvis({
    year <- input$year
    category <- input$category
    
    # Create the column name for the selected year and category
    rank_column <- paste(category, "_Rank_", year, sep = "")
    
    # Filter and prepare the data
    map_data <- combined_vul_data %>%
      select(ISO3, Name, Rank = !!sym(rank_column)) %>%
      mutate(Tooltip = ifelse(is.na(Rank), paste(Name, "- Insufficient data"), paste(Name)))
    
    # Update locationvar column
    map_data <- map_data %>%
      mutate(Location = ifelse(Name %in% c("Congo (Brazzaville)", "Congo (Kinshasa)"), ISO3, Name))
    
    # Determine the range of the Rank values
    min_rank <- min(map_data$Rank, na.rm = TRUE)
    max_rank <- max(map_data$Rank, na.rm = TRUE)
    
    # Create the map
    gvisGeoChart(map_data, locationvar = "Location", colorvar = "Rank",
                 hovervar = "Tooltip",  
                 options = list(colorAxis = paste0("{minValue:", min_rank, ", maxValue:", max_rank, ", colors:['#00FF00', '#FFFF00', '#FF0000']}"),
                                backgroundColor = '#81d4fa', datalessRegionColor = '#f5f5f5',
                                defaultColor = '#f5f5f5',
                                tooltip = "{isHtml: true}",
                                width = "100%",
                                height = "500px"))  
  })
  
}

shinyApp(ui = ui, server = server)