Scattermapbox fill plotting jagged lines

Issue

I'm plotting filled polygons on a map using Scattermapbox. It successfully plots the corner markers, but doesn't show a straight line between the two points, seen in the first image. When zooming in on the map, it makes even more jagged lines on all the polygons, seen in the second image.

I tried running the code and opening the .html file on both a windows and linux machine, with the same results.

Specifications

• Windows 10
• Chrome 92.0.4515.131
• python 3.8.11
• plotly 5.1.0

Issue also appears with:

• Ubuntu 18.0.45
• Firefox 91.0 / Edge 91.0.864.64
• python 3.6.9
• plotly 4.14.3

Code to produce the images

import numpy as np
import plotly.graph_objects as go

corners1 = np.array([[5.5, 13.6, 6.2, -2.1], [27.2, 25.9, -5.1, -3.9]])
corners2 = np.array([[-12.9, -2.0, -17.3, -25.9], [30.9, 27.9, 9.9, 16.2]])
corners3 = np.array([[27.8, 35.2, 32.3, 24.9], [25.0, 24.0, 1.4, 2.5]])

sat_corners = [corners1, corners2, corners3]

fig = go.Figure()
for corners in sat_corners:
    fig.add_trace(go.Scattermapbox(
        fill="toself",
        lat=corners[:][1],
        lon=corners[:][0],
        marker={'size': 5, 'color': 'royalblue'}))

fig.update_layout(
    mapbox={
        'style': "stamen-terrain",
        'center': {'lat': 11.547231, 'lon': -5.885243},
        'zoom': 3.5},
    showlegend=False,
    margin_t=20, margin_r=20, margin_b=20, margin_l=20
)

fig.show()
fig.write_html('test_map.html')
fig.write_image('test_map.png', width=1000, height=1000, engine='kaleido')

Resulting Images

These images are screengrabs from Chrome:

Dog leg is visible in the lower left corner of the center polygon.

Here, jagged lines are visible on all polygons. Lines stay like this as far as you can zoom in.

These images are the .png files with different zoom parameters given in fig.update_layout:

zoom=4:

zoom=3:

zoom=2:

Commencez par exécuter l’exemple Scattermapbox fourni avec les coordonnées de polygone indiquées et comparez la sortie HTML interactive avec le PNG généré à différents niveaux de zoom. Étudiez le chemin de rendu du remplissage Scattermapbox et vérifiez le résultat avec les versions de navigateur et de Plotly signalées. Le travail est terminé lorsque les bords du polygone sont rendus sous forme de lignes droites, sans les artefacts dentelés signalés.