add_bitmap is not rendering url source

[SL-itw]

Hi I want to render an image of a legend onto the mapdeck object output, however the image is not showing even though the code does not show any errors.

mapdeck(location = c(-75.9, 40.9), zoom = 4) %>%
  add_bitmap(
    image = 'https://raw.githubusercontent.com/sl4269/sl4269.github.io/master/zipsmap_UHF_Blackpct.svg'
    , bounds = c(-80.425, 37.936, -71.516, 46.437)
    , desaturate = 1
  )

[dcooley]

does it work if you use a different image format, like .png?

[SL-itw]

your example online works, however when I access a png file from google it does not work.

[dcooley]

Do you have an example of this .png?

[SL-itw]

This is the image I tried it with: http://www.pngmart.com/files/7/Red-Smoke-Transparent-Images-PNG.png

However I just tried it with this image (jpg) and it worked: https://sl4269.github.io/profile_picture.jpg

I may just export the legends as jpg and see if that works.

[SL-itw]

It was able to work! Unfortunately I tried to use a quick option to get a png to check and that made me not export the legend as a png. Thank you for your time.

Would you be able to share how to size it down?

mapdeck(location = c(-75.9, 40.9), zoom = 4) %>%
  add_bitmap(
    image = "https://sl4269.github.io/zipsmap_Blackpct.png"
    , bounds = c(-80.425, 37.936, -71.516, 46.437)
    , desaturate = 1
  )

[dcooley]

To change the size you just change the bounds values.

But it's interesting why some of your attempts worked and some didn't. I wonder if some formats aren't supported?

[SL-itw]

Ok great thank you.

Here is why it didn't work. I ran into this issue before but had forgotten. The issue is that Rstudio does not allow you to just access images from the web in a direct way as other files. The images have to be stored on a server that is secure. That's how I understand it; I ran into this when trying to render the same images on a leaflet plot.

As far as why svg file don't work, I guess that it is not supported however for png's they have to be stored on a server that allows Rstudio to access it safely I believe.

This is the link that helped me understand that https://stackoverflow.com/questions/40842180/image-not-displaying-in-html-string-for-addcontrol-from-leaflet-in-r

[dcooley]

yes that makes sense.

One point, it's not "RStudio" which can't access it, it's the javascript inside deck.gl (or leaflet in that other example) which can't access the image.

Thanks for solving this.

[SL-itw]

Ok I see, good to know.

No problem.

[SL-itw]

The image is stretching and relocating every time I change the bounds.

mapdeck(location = c(-75.9, 40.9), zoom = 4) %>%
  add_bitmap(
    image = "https://sl4269.github.io/zipsmap_Blackpct.png"
    , bounds = c(-80.425, 37.936, -71.516, 46.437)
    , desaturate = 1
  )

when I divide the bounds evenly by 100, it downsizes but also relocates to Africa.

Is there a way around this?

mapdeck(location = c(-75.9, 40.9), zoom = 4) %>%
  add_bitmap(
    image = "https://sl4269.github.io/zipsmap_Blackpct.png"
    , bounds = c(-80.425/100, 37.936/100, -71.516/100, 46.437/100)
    , desaturate = 1
  )

[dcooley]

The bounds are the coordinates on the map where the corners of the bitmap get anchored (bound), so dividing by 100 will move them to a different location.

You need to find the coordinates on the map which from the correct sized square for your use case.

[SL-itw]

These coordinates work really well: bounds = c(-80.425, 37.936, -71.516, 46.437); right near New York, however I am unable to resize the png. Do I need to resize it before accessing it in the add_bitmap function? I was hoping to be able to resize it in the function. I am able to do that with leaflet's function

addControl(

          html = "<img src = 'https://sl4269.github.io/zipsmap_UHF_Blackpct.svg' width = '200' height = '200'>",
          position = "topleft",
          className = "legend-bivar"
        ) 

Is there an option similar to that in mapdeck?

[dcooley]

If you are refering to actually changing the dimensions of the .png, then yes, you need to change its size before you access it through add_bitmap(). You can not rescale the image inside add_bitmap()

[SL-itw]

Ok I see.