Fix bad default zoom in Plotly Express map functions

[emilykl]

Link to issue

Closes #5450

Description of change

• Remove hard-coded default zoom of 8 from px.scatter_map(), px.line_map(), px.density_map() and px.choropleth_map() functions
  • 8 is a very high zoom level and not appropriate for most circumstances
• Remove Plotly Express code which computes a center based on the data. This is no longer needed now that plotly.js automatically computes zoom and center by default
  • Note: auto-fit for choropleth is not yet supported by plotly.js, but it didn't work in Plotly Express either since px.choropleth_map() has no lat or lon arguments
• Remove zoom argument from px.scatter_map() Percy test to visually verify auto-fit behavior

Demo

The following screenshots show the plots produced without passing any center or zoom settings to the px function.

Before	After

Code:

Details

import json
from urllib.request import urlopen

import pandas as pd
import plotly.express as px

# px.scatter_map()
df = pd.DataFrame(
    {
        "city": ["San Marino", "Chicago", "Nairobi", "Istanbul", "Trondheim"],
        "lat": [43.9360958, 41.85003, -1.28333, 41.01384, 63.43049],
        "lon": [12.4417702, -87.65005, 36.81667, 28.94966, 10.39506],
    }
)
fig = px.scatter_map(df, lat="lat", lon="lon")
fig.update_layout(
    title_text="px.scatter_map()",
    title_font_size=18,
    margin={"r": 0, "t": 35, "l": 0, "b": 0},
    width=800,
    height=400,
)
fig.show()

# px.line_map()
us_cities = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv"
)
us_cities = us_cities.query("State in ['New York', 'Ohio']")
fig = px.line_map(us_cities, lat="lat", lon="lon", color="State")
fig.update_layout(
    title_text="px.line_map()",
    title_font_size=18,
    margin={"r": 0, "t": 35, "l": 0, "b": 0},
    width=800,
    height=400,
)
fig.show()

# px.density_map()
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv"
)
df = df[:10]
fig = px.density_map(
    df,
    lat="Latitude",
    lon="Longitude",
    z="Magnitude",
    radius=10,
    map_style="open-street-map",
)
fig.update_layout(
    title_text="px.density_map()",
    title_font_size=18,
    margin={"r": 0, "t": 35, "l": 0, "b": 0},
    width=800,
    height=400,
)
fig.show()

# px.choropleth_map()
with urlopen(
    "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json"
) as response:
    counties = json.load(response)
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
    dtype={"fips": str},
)

fig = px.choropleth_map(
    df,
    geojson=counties,
    locations="fips",
    color="unemp",
    color_continuous_scale="Viridis",
    range_color=(0, 12),
    map_style="carto-positron",
    opacity=0.5,
    labels={"unemp": "unemployment rate"},
)
fig.update_layout(
    title_text="px.choropleth_map()",
    title_font_size=18,
    margin={"r": 0, "t": 35, "l": 0, "b": 0},
    width=800,
    height=400,
)
fig.show()

Testing strategy

• Removed explicit zoom from px.scatter_map() Percy test so that any changes in scattermap fitting behavior will be captured
• Percy tests for px.line_map() and px.density_map() already don't pass explicit center or zoom

To test locally: Run the code snippet above

Guidelines

• I have reviewed the pull request guidelines and the Code of Conduct and confirm that this PR follows them.
• I have added an entry to the changelog if needed (not required for documentation PRs).

[camdecoster]

Looks good. Could you update the zoom docstring in plotly/express/_doc.py? It still says the default is 8.

[emilykl]

Looks good. Could you update the zoom docstring in plotly/express/_doc.py? It still says the default is 8.

Good catch, will do.