'Highcharts bubble map does not always render properly
I have created a shiny app, which displays a highchart Map. With a select input, one can choose specific countries that one wants to be displayed.
Most of the time the map renders correctly, but sometimes the bubbles only stay small dots and zooming is not possible. Here is an image that shows the problem. On top one can see the problematic map, where the "letters" are not displayed correctly. At the bottom map is depicted, as it is supposed to look like.
Here is also the code to the app:
library(shiny)
library(shinyjs)
library(highcharter)
library(dplyr)
library(shinyWidgets)
name=c("a", "b", "c", "d", "e", "f",
"g", "h", "i", "j", "k")
# Define UI for application that draws a histogram
ui <-
fluidPage(
useShinyjs(),
tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"),
tags$script(src="https://code.highcharts.com/mapdata/custom/world-lowres.js"),
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
selectInput("name","",name,multiple=F),
pickerInput("name1","",name,multiple=T)
),
# Show a plot of the generated distribution
mainPanel(
highchartOutput("map")
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
myrf <- data.frame(
name=c("a", "b", "c", "d", "e", "f",
"g", "h", "i", "j", "k"),
lat = c(-7.1871, 36.95733, 17.9356, -20.4379, 30.2496, -54.9593,
18.0365, 17.9688, 18, 18.005, 17.9538),
lon = c(129.3989, -121.576, -66.6961, -68.773, 138.6162, -128.3548,
-66.8143, -66.9705, -66.7603, -66.7765, -66.8265),
z = c(4.5, 2.77, 4.1, 5.2, 4.5, 5.1, 2.52, 3.7, 2.68, 2.71, 2.88),
part = c(10,15,8,20,30,12,5,17,21,9,11)
)
mydf=reactive({
myrf%>%subset(name%in%input$name |name%in%input$name1)
})%>%debounce(500)
output$map= renderHighchart({
mapdata <- JS("Highcharts.maps['custom/world-lowres'];")
mat=mydf()
hc=highchart(type = "map") %>%
hc_size(height ="500px")%>%
hc_add_series(mapData=mapdata, showInLegend = F)%>%
hc_add_series(data = mat, type = "mapbubble", name = "EarthQuake",
sizeBy="area",
minSize = "1%",
maxSize = "10%",
sizeByAbsoluteValue=T,
showInLegend=F) %>%
hc_tooltip(useHTML = T,headerFormat='',pointFormat = paste('Location :{point.place}<br> Part: {point.part} <br> Magnitude : {point.z}')) %>%
hc_title(text = "Global Seismic Activity") %>%
hc_plotOptions(series=list(states=list(hover=list(enabled=TRUE),inactive=list(enabled=FALSE))))%>%
hc_mapNavigation(enabled = T)
hc=hc%>%hc_add_series(data = mat, type = "mapbubble", name = "EarthQuake",color="red",minSize = "1%",
maxSize = "10%",
#marker=list(fillOpacity=0.7),
sizeByAbsoluteValue=T,
showInLegend=F,
bubble=list(opacity=0.8,marker=list(fillOpacity=0.95,hover=list(enabled=TRUE))))
hc
})
}
# Run the application
shinyApp(ui = ui, server = server)
It is very difficult to reproduce the error, since it seems to occur randomly. I believe it might have something to do with the'%>%debounce(500)'. Amongst others I can trigger the error by picking several letters from the second dropdown menu quickly after each other (before the debounce is over). If I zoom in on the map before it has finished re-rendering the error occurs sometimes. I think it depends on the exact timing, so one might have to try it 3-4 times to get the error.
If the app is started in the shiny/App environment, shiny does not give out an error. Only the console output does throw the following JS error:
map.js:formatted:1679 Uncaught TypeError: Cannot read property 'setAttribute' of undefined
at a.step (map.js:formatted:1679)
at a.update (highcharts.js:formatted:1097)
at a.step (highcharts.js:formatted:1148)
at Array.l (highcharts.js:formatted:1104)
at w (highcharts.js:formatted:1111)
if I click on the error's link it leads me to following line in map.js
c.element.setAttribute("stroke-width", m / a)
If the App is opened in the browser the console error is the following:
Uncaught TypeError: c.element is undefined
step http://127.0.0.1:3402/highcharts-9.3.1/modules/map.js:81
update http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:49
step http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:51
l http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:49
w http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:50
w http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:50
w http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:50
map.js:81:181
step http://127.0.0.1:3402/highcharts-9.3.1/modules/map.js:81
update http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:49
step http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:51
l http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:49
w http://127.0.0.1:3402/highcharts-9.3.1/highcharts.js:50
(Async: FrameRequestCallback)
The error occured in the R-App-Output, as well as in the Firefox- and Edgebrowser. I have not tried any other browsers.
I have also found this old post that seems to have at least a similar problem. The issue was closed because it could not be reproduced.
Since the error seems to have something to do with the stroke-width, I have also specified the stroke with in the highchart, but it did not prevent the error from happening.
Does anyone have some kind of idea, where the issue lies or how to prevent this from happening? I know this is not a lot to go from, since I do not know what exactly triggers the error. If there is any additional information you might need,please let me know!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|