Add API for background images

[Omnieboer]

As in this plotly behaviour.

This would be greatly helpful, as I can see no other way at the moment to display a map behind a set of coordinates. If there is such a method in PlotlyKt, please tell me and feel free to close the issue.

Thank you.

[altavir]

Hi, @Omnieboer we did not add this feature because we believed it is rarely used. We will add it in the future (reference API page: https://plotly.com/javascript/images/). Meanwhile, you do not have to wait for it. You can use our "unsupported feature" feature and add a block, describing the image model directly.

Here is a working the code sample:

Plotly.plot {
    trace{
        x(1,2,3)
        y(1,2,3)
    }
    layout{
        config["images"] = listOf(
            Meta{
                "source" put "https://images.plot.ly/language-icons/api-home/python-logo.png"
                "xref" put "paper"
                "yref" put "paper"
                "x" put 0
                "y" put 1
                "sizex" put 0.2
                "sizey" put 0.2
                "xanchor" put "right"
                "yanchor" put "bottom"
            },
            Meta{
                "source" put "https://images.plot.ly/language-icons/api-home/js-logo.png"
                "xref" put "x"
                "yref" put "y"
                "x" put 1.5
                "y" put 2
                "sizex" put 1
                "sizey" put 1
                "xanchor" put "right"
                "yanchor" put "bottom"
            }
        )
    }
}

And here is the result:

You have to enter at least two elements, otherwise, the block is reduced to a single element and is not recognized by Plotly. If you need only one image, you can use Meta.EMPTY as second.

[Omnieboer]

Thanks very much! I love the addition of a unsupported feature feature :D
Is there a way to make this work with local images, or would I have to host the wanted image such that a url can reach it?

Thanks for adding the image feature on the todo list!

[altavir]

It depends on where do you host the image. The image is not uploaded, so it must be accessible in the environment, where you plot your image. Local files should be OK for file plots. For a notebook, I am not sure, they could be blocked by browser security, but you can try.

[Omnieboer]

For future reference, for a local file this works.

I ended up encoding the local image to Base64 like this:

"source" put "data:image/png;base64,${
Base64.getEncoder().encodeToString(File("src/main/resources/BigMap.PNG").readBytes())                                        
}"

Any other way didn't seem to load the image from an offline source.