Plotly.toImage scale factor does not work with maps

[jfnosa]

version 3.0.1

Using Plotly.toImage with scale factor 1 (700x450px):

Now with scale factor 10 (7000x4500px):

The only improvement is for the attribution annotation

[camdecoster]

Could you please provide an example to reproduce this issue?

[jfnosa]

Python code to produce a html file:

import plotly.graph_objects as go
import numpy as np

fig = go.Figure()
fig.add_trace(
    go.Scattermap(
        lat=[0],
        lon=[0],
        mode="markers",
        marker=dict(size=15, color="red"),
        name="Points",
        hoverinfo="skip",
        showlegend=False
    )
)

fig.update_layout(
    map=dict(style="carto-positron", zoom=2),
    margin=dict(l=0, r=0, t=0, b=0),
    legend=dict(orientation="h"),
    height=500,
    width=1000
)

html = fig.to_html( 
        full_html=False,
        include_plotlyjs=True    )

with open('map.html', 'w') as file:
    file.write(html)

The file is also attached: map.html

Now browser console, compare:

Plotly.toImage(
  document.querySelector(".plotly-graph-div"),
  { format: "png", scale: 10 }
).then(function(dataUrl) {
  window.open(dataUrl);
});

and

Plotly.toImage(
  document.querySelector(".plotly-graph-div"),
  { format: "png", scale: 1 }
).then(function(dataUrl) {
  window.open(dataUrl);
});

scale: 10 gives 10x more pixels, but the quality is the same as with scale: 1 (except for the attribution annotation)

[jfnosa]

While this gives me what i would expect:

function findMapLibreMapFromGd(gd) {
    const fl = gd?._fullLayout;
    if (!fl) return null;

    for (const k of Object.keys(fl)) {
        const v = fl[k];
        const map = v?._subplot?.map;
        if (map && typeof map.getCanvas === "function" && typeof map.setPixelRatio === "function") {
            return map;
        }
    }
    return null;
}

async function captureMapLibreCanvas(gd, ratio = 4) {
    const map = findMapLibreMapFromGd(gd);
    if (!map) {
        throw new Error("MapLibre map instance not found.");
    }

    const canvas = map.getCanvas();
    const originalRatio = window.devicePixelRatio || 1;

    map.setPixelRatio(ratio);
    map.resize();

    await new Promise(resolve => map.once("idle", resolve));

    const dataUrl = canvas.toDataURL("image/png");

    map.setPixelRatio(originalRatio);
    map.resize();

    await new Promise(resolve => map.once("idle", resolve));

    return dataUrl;
}

captureMapLibreCanvas(
  document.querySelector(".plotly-graph-div"), ratio=10
).then(function(dataUrl) {
  window.open(dataUrl);
});

That is ChatGPT code so can't vouch for it - but works in this case