custom image and tmap output

[ShinyFabio]

Hi, I've found I think a bug when using a custom image. I have an animated gif in the www folder and I want to use it for the spinner of a tmap object. So I have a code like this: withSpinner(tmapOutput("mappa2"), image = "www/running_olive.gif")

The spinner works and also the gif is correctly shown, but the tmap legend is distorted if I use the custom image. Look at this picture. In the upper map I've used the default spinner, while in the lower map I've used the custom gif. Look at that legend!

And if I change the variables it gets worse! I tested also with plotly and ggplot but it doesn't seem to have this bug. Only with the tmap output. Maybe a conflict?

[daattali]

I notice in the screenshot that you're using the RStudio Viewer -- have you tested in a real browser like Chrome?

I'm not familiar with tmap objects, but if it doesn't work with a custom made output such as tmap, Unfortunately this is not something I would be likely to fix.

[ShinyFabio]

I've just tested with Chrome and I have the same bug. So maybe I can open an issue on the tmap github page. Thanks anyway!

[ShinyFabio]

Hi I think that I found the issue.

If I uncheck this line the legend is correctly shown.

This is the option in the html code

.shiny-spinner-custom {
    text-align: center;
}

By default is checked but if I unchecked it, the problem disappears.

Edit: I also noticed that I have this text-align only in the custom image option: with the default spinner there isn't.

[ShinyFabio]

I've found an half solution. In your package I had to remove that code from the spinner.css file in the assets folder. Removing that code the legend is correctly shown but than the spinner is not centered anymore.

[daattali]

If that's the issue, I think another less hack solution is: instead of removing the css rule, add a css rule for the tmap output.

It looks like the tmap output needs text-align to be "left", so you can add such a CSS rule yourself, and also ask the tmap author to add that by default to its outputs

[ShinyFabio]

I've found an option inside tmap functions where I can choose the text.align but doesn't work anyway. I think that the spinner css rule overrides the tmap css rule. Unfortunately I'm not an expert of css. Is there maybe another way for that spinner css rule?

[daattali]

This is not an issue to fix on the {shinycssloaders} side. This package sets a CSS rule that isn't overly aggressive (I'm not using the !important override modifer) - it will play nicely with any other CSS, as long as the other CSS exists. It looks like the tmap legends just don't have any css for this. I imagine you'll also run into a similar issue if you place a tmapoutput inside a div(style="text-align: right", ...). The tmap object should be in charge of making itself look correctly, it can't make assumptions about the alignment of its parents. This needs to be fixed in the other package.

[ShinyFabio]

I reopened the issue on the github page of the tmap package. I've just a question. Why for the custom spinner we need that css code while for the default spinners we don't? Or at least it's not used. Is there like a different option inside the default spinners? I'm asking it because maybe I can use my custom gif as a "default spinner".

[daattali]

Every spinner uses some css. You can look inside the package to see the exact css rules for each type of spinner. All spinners are centered as you know, but each type needs a different mechanism for that to happen. It's a technical reason.

[ShinyFabio]

Ok thanks I will try to understand inside the code. Maybe I can find a solution. Howeverthey answered on tmap github page and it seems that this bug occurs in others similar conditions. So it's definitely a tmap bug. Thanks for your help! Maybe I will update this post if there are some news.