Highcharter/Highmaps - how to use TiledWebMap?

I am trying to build a map with highcharter/highmaps which includes a topographical map via a tiled web map.

As a test, I would like to replicate the OpenStreetMap demo (JSFiddle) as provided by highcharts in their API documention. However, I am unsuccessful. All I get is a white page with the title, but no map.

I've tried two variants in R - using the highcharter functions and direct JS (within the highcharter functions).

Variant A)

library(highcharter)

highchart(type = "map") %>%
  hc_add_dependency("modules/map.js") %>%
  hc_add_dependency("modules/tiledwebmap.js") %>%
  hc_title(text = "Highcharts Maps basic TiledWebMap Series") %>%
  hc_mapNavigation(
    enabled       = TRUE,
    buttonOptions = list(alignTo = "spacingBox")
  ) %>%
  hc_legend(enabled = FALSE) %>%
  hc_chart(
    mapView = list(
      center     = c(10, 50),
      zoom       = 4
    )
  ) %>%
  hc_add_series(
    type     = "tiledwebmap",
    provider = list(type = "Esri", theme = "WorldTopoMap")
  )

Variant B)

library(highcharter)
library(htmlwidgets)
library(htmltools)

hc_lib       <- system.file("htmlwidgets/lib/highcharts", package = "highcharter")
map_js       <- paste(readLines(file.path(hc_lib, "modules/map.js"),       warn = FALSE), collapse = "\n")
tiled_js     <- paste(readLines(file.path(hc_lib, "modules/tiledwebmap.js"), warn = FALSE), collapse = "\n")

highchart() %>%
  hc_chart(
    type = "map",
    events = list(load = JS(
      "
      function () {
        this.mapView = new Highcharts.MapView(this, {
          center: [10, 50],
          zoom: 4
        });

        this.addSeries({
          type: 'tiledwebmap',
          provider: { type: 'Esri', theme: 'WorldTopoMap' }
        });
      }
      "
    ))
  ) %>%
  
  hc_title(text = "Highcharts Maps basic TiledWebMap Series") %>%
  hc_mapNavigation(
    enabled     = TRUE,
    buttonOptions = list(alignTo = "spacingBox")
  ) %>%
  hc_legend(enabled = FALSE) %>% 
  htmlwidgets::prependContent(tags$script(HTML(map_js))) %>%
  htmlwidgets::prependContent(tags$script(HTML(tiled_js)))

I am using the most recent highcharter version 0.9.4.9000, installed from the highcharter GitHub repo, which uses HighchartsJS 12.2.0.

Has someone managed to get TiledWebMap to work with highcharter?

Thanks and best regards, Martin

You can do a full web-approach like this: Use htmltools to build a html page that resembles your JSFiddle example. Use tags$script to load the required scripts in the head. I then created a div myDiv and used JS to add the highchart tiled map to it.

library(htmltools)

html <- tags$html(
  tags$head(
    tags$script(src = "https://code.highcharts.com/maps/highmaps.js"), # load scripts
    tags$script(src = "https://code.highcharts.com/maps/modules/tiledwebmap.js")
  ),
  tags$body(
    div(
      id = 'myDiv', style = "background-color: coral;",
      'map'
    )
  ),
  tags$script(
    "
    Highcharts.mapChart('myDiv', {  // just copy the script
        chart: {
            margin: 0
        },
    
        title: {
            text: 'Highcharts Maps basic TiledWebMap Series'
        },
    
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                alignTo: 'spacingBox'
            }
        },
    
        legend: {
            enabled: false
        },
    
        mapView: {
            center: [10, 50],
            zoom: 4
        },
    
        series: [{
            type: 'tiledwebmap',
            provider: {
                type: 'Esri', theme: 'WorldTopoMap'
            }
        }]
    });

    "
  )
)
# browse page 
browsable(html)
# or save
save_html(html, "Map.html")

giving

Looking into your code

I tried a lot of things to make your code work. Let's look at your first example V1 in Dev Tools:

## V1
remotes::install_github("jbkunst/highcharter")
library(highcharter)

highchart(type = "map") |>
  hc_add_dependency("modules/map.js") |>
  hc_add_dependency("modules/tiledwebmap.js") |>
  hc_title(text = "Highcharts Maps basic TiledWebMap Series")|>
  hc_mapNavigation(
    enabled       = TRUE,
    buttonOptions = list(alignTo = "spacingBox")
  ) |>
  hc_legend(enabled = FALSE) |>
  hc_chart(
    mapView = list(
      center     = c(10, 50),
      zoom       = 4
    )
  ) |>
  hc_add_series(
    type     = "tiledwebmap",
    provider = list(type = "Esri", theme = "WorldTopoMap")
  )

Open in browser, click F12 and you will see an error

highcharts.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'dataLabels')
    at S.setOptions (highcharts.js:2:156489)
    at S.setOptions (map.js:1:53473)
    at S.init (highcharts.js:2:154433)
    at tW.initSeries (highcharts.js:2:199255)
    at highcharts.js:2:215008
    at Array.forEach (<anonymous>)
    at tW.firstRender (highcharts.js:2:214986)
    at tW.<anonymous> (highcharts.js:2:199089)
    at U (highcharts.js:2:2580)
    at tW.init (highcharts.js:2:198311)

I do not know how to fix this, so this is all I can give you for now.