Edit: I was asked for code, and so to offer some code and an example of the map I made that I like the design of but that does not have the needed mobile interactivity (pinch-zoom):

Map prototype: https://transformationsproject.github.io/static/widgets/map_test.html

Code (a note: I know it's messy):

tf_usa_map <- us_map(regions = "states")

# Joining so can be used 
tf_current_map <- left_join(tf_usa_map, tf_airtable_state_by_year, by=c("abbr" = "state_abb"))

# Removing DC          
tf_current_map <- tf_current_map %>%
  filter(abbr != "DC")

# Getting total count of bills for 2024
updated_total_bills <- sum(tf_current_map$`2024`)

# Building Map ----
# Setting up geometry
geo_test <- list(
  scope = 'usa',
  projection = list(type = 'albers usa'),
  lakecolor = toRGB('white')
  )

# Setting up border
state_border <- list(color = toRGB("#2d0016"), width = 2)

# Setting up custom color scale/breaks
custom_colors <- c("white", "#ed7fa1", "#DB0044", "#740024", "#410014")
custom_breaks <- c(0, 5, 20, 30, 60)


fig3 <- plot_geo(tf_current_map) %>%
  add_trace(
    z = ~tf_current_map$`2024`, 
    #text = ~paste(State, "has had\n", tf_current_map$`2024`, "bills introduced"), 
    span = I(0),
    locations = ~abbr, 
    locationmode = 'USA-states',
    colorscale = list(
      list(0, custom_colors[1]),
      list(custom_breaks[2] / max(custom_breaks), custom_colors[2]),
      list(custom_breaks[3] / max(custom_breaks), custom_colors[3]),
      list(custom_breaks[4] / max(custom_breaks), custom_colors[4]),
      list(1, custom_colors[5])),
    zmin = min(custom_breaks),
    zmax = max(custom_breaks),
    # State border colors/thickness
    marker = list(line = state_border),
    # To do: list min/max
    colorbar = list(
      tickvals = list(custom_breaks[1], custom_breaks[5]),
      ticktext = list(custom_breaks[1], custom_breaks[5])),
    hovertext = ~paste0(`State`),
    showscale = FALSE
    ) %>%
  colorbar(title = "Bills") %>%
  layout(geo = geo_test, 
         font = alexandria,
         title =  list(
           text = ~paste0(updated_total_bills, 
                          ' Anti-Trans Bills Have Been', 
                          "<br>", 
                          'Introduced in 2024'),
           font = list(size = 20)),
         margin = list(l = 50, r = 50, b = 100, t = 50),
         annotations = list(
      list(
        text = 'Data From: Trans Formations Project, LegiScan',
        font = list(size = 10),
        margin = list(l = 10, r = 10, b = 10, t = 20, pad = 4),
        #height = 200,
        showarrow = FALSE,
        xref = 'paper', x = 0.5,
        yref = 'paper', y = -0.2,
        xanchor = 'left', yanchor = 'top'))
  )