Adding interactive points on highcharter USA map that already includes state data

Question

I would like to add interactive map points on a map that I created using highcharter. Everything looks fine up to the point that I add those points.

While the points appear on the correct location, the colors and legend change completely.

Here's my example code.

These are the data frames for the reproducible example.

#Data frame with patients per state
abbr <- c("AK", "GA", "CA", "CT", "HI", "IA", "KY", "LA", "NJ", "NM", "WA", "UT")
fips <- c("02", "13", "06", "09", "15", "19", "21", "22", "34", "35", "53", "49")
V2 <- c(4, 22, 77, 16,  0,  5,  6,  9, 15,  3, 13, 22)
States<- data.frame(abbr, fips, V2)

#Data frame with center locations
name <- c("UCLA", "Stanford")
lon <- c(-118.26, -122.17)
lat <- c(34.04, 37.43)
VHL_centers <- data.frame(lon, lat, name)

This is the part of the code that works correctly.

hcmap("https://code.highcharts.com/mapdata/countries/us/us-all.js", #Construct map
                     data = States,
                     name = "Patient number",
                     value = "V2", 
                     joinBy = c("postal-code", "abbr"),
                     borderWidth = 1,
                     borderColor = "darkred",
                     dataLabels = list(enabled = TRUE, format = "{point.properties.postal-code}"),
                     tooltip = list()) |>
  hc_legend(layout = "horizontal",
            verticalAlign = "bottom",
            align = "center",
            valueDecimals = 0,
            valueSuffix = "") |>
  hc_title(text = "VHL patients per state") |> #Add title
  hc_subtitle(text = "Source: SEER database") |> #Add subtitle
  hc_colorAxis(stops = color_stops(colors = viridisLite::inferno(10, begin = 0.1)))

And the outcome

This is my code when I try to add the centers' locations.

hcmap("https://code.highcharts.com/mapdata/countries/us/us-all.js", #Construct map
                     data = States,
                     name = "Patient number",
                     value = "V2", 
                     joinBy = c("postal-code", "abbr"),
                     borderWidth = 1,
                     borderColor = "darkred",
                     dataLabels = list(enabled = TRUE, format = "{point.properties.postal-code}"),
                     tooltip = list()) |>
  hc_legend(layout = "horizontal",
            verticalAlign = "bottom",
            align = "center",
            valueDecimals = 0,
            valueSuffix = "") |>
  hc_title(text = "VHL patients per state") |> #Add title
  hc_subtitle(text = "Source: SEER database") |> #Add subtitle
  hc_colorAxis(stops = color_stops(colors = viridisLite::inferno(10, begin = 0.1))) |> #Change color scale
  hc_add_series(data = VHL_centers, 
                type = "mappoint")

As you can see the image is completely different. The legend now goes up to 7.5k, the centers have different colors and the color of the states has changed

Ideally I would like to have just the points with a single color (let's say black), with the names appearing only when I hover over them and not directly on the map.

Thanks for your help!

Answer 1

One option to fix your issue would be to assign a different colorAxis to your points, e.g. colorAxis=1, so that the first colorAxis (aka index 0) is still applied to your map.

library(highcharter)

hcmap("https://code.highcharts.com/mapdata/countries/us/us-all.js", # Construct map
  data = States,
  name = "Patient number",
  value = "V2",
  joinBy = c("postal-code", "abbr"),
  borderWidth = 1,
  borderColor = "darkred",
  dataLabels = list(
    enabled = TRUE,
    format = "{point.properties.postal-code}"
  ),
  tooltip = list(),
) |>
  hc_legend(
    layout = "horizontal",
    verticalAlign = "bottom",
    align = "center",
    valueDecimals = 0,
    valueSuffix = ""
  ) |>
  hc_title(text = "VHL patients per state") |> # Add title
  hc_subtitle(text = "Source: SEER database") |> # Add subtitle
  hc_colorAxis(stops = color_stops(
    colors = viridisLite::inferno(10, begin = 0.1)
  )) |> # Change color scale
  hc_add_series(
    data = VHL_centers,
    type = "mappoint",
    colorAxis = 1,
    color = "black"
  )