feat: Add min/max scale limits for geo plots

[camdecoster]

Description

Add minscale and maxscale attributes to geo plots. These set the min and max scale extents for a plot (how far a user can zoom out/in). This PR supersedes #5192 which will be closed after this is merged.

• Resolves allow user to set zoom/scale limits for choropleth maps #5191
• Closes add support for min/max scale limits #5192

Changes

• Adds minscale and maxscale attributes to geo plots. Defaults are 0 and -1, respectively.
• Enforces scale extents on zoom mouse events, mode bar button clicks
• Manually creates zoom event to enforce scale extents on first render (treating the middle of the plot as the zoom point)

Demo Video or Screenshot(s):

Before:

Screencast.From.2025-02-22.11-25-20.mp4

After:

Screencast.From.2025-02-22.11-29-21.mp4

Testing

• Start the dev dashboard with npm start
• Search for a geo mock and load it (I used geo_legendonly)
• Zoom in and out and note how you can go as far as you want in either direction
• Edit the mock file and add the following attributes under the "geo" key
  • "minscale": 2
  • "maxscale": 4
• Reload the mock in the dashboard
• Note that the mock appears zoomed in upon first load
• Zoom in and out and note how you're now limited in how far you can go

[camdecoster]

I believe that some tests are failing because there's now an extra zoom event on every call to updateFx (for dragMode === 'pan'). I think I need to restrict that call to only happen upon first load. I'll keep looking into it.

[camdecoster]

@archmoj this PR should now be good to review. We don't need both this and #7482. I'd like to argue that we should use the approach of using scaleExtent (the native D3 mechanism) rather than limiting the scale on our side.

[archmoj]

Let's try setting dflt: 0 in the API and handle the case of zero instead of -1.

[camdecoster]

We represent Infinity with -1 since Infinity isn't valid in JSON. If we made this change, how would we handle when a user wants to use Infinity instead of 0 (which is also a valid value).

[archmoj]

Opening geo_canadian-cities mock in the dashboard gives me the following error:

plotly.js:9976 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at stringInputToObject (plotly.js:9976:27)
    at inputToRGB (plotly.js:9412:22)
    at new tinycolor (plotly.js:9165:22)
    at tinycolor (plotly.js:9163:20)
    at color2.fill (plotly.js:11073:18)
    at d3_selectionPrototype.call (plotly.js:1352:20)
    at SVGGElement.<anonymous> (plotly.js:145654:18)
    at plotly.js:1339:22
    at d3_selection_each (plotly.js:1345:36)

@camdecoster do you get the same?

[camdecoster]

@archmoj that should be fixed by some recent commits. Are you on the latest version of the branch? I'm not seeing that error.

[archmoj]

geo_canadian-cities

Thanks @camdecoster. My local test branch was not up-to-date. I confirm now it renders with no error.

[archmoj]

If you add

"projection": { "minscale": 0.5, "maxscale": 2 },

to geo_canadian-cities under "geo" object, the map renders smaller with gd._fullLayout.geo.projection.scale: 0.3013880580354019.

@camdecoster Could you please investigate that?

[archmoj]

If you add

"projection": { "minscale": 0.5, "maxscale": 2 },

to geo_canadian-cities under "geo" object, the map renders smaller with gd._fullLayout.geo.projection.scale: 0.3013880580354019.

@camdecoster Could you please investigate that?

Here is a codepen displaying the bug.

[camdecoster]

@archmoj would you be able to test your Codepen with the latest build?

[archmoj]

@archmoj would you be able to test your Codepen with the latest build?

Hi @camdecoster,
Here is the updated codepen.
So the problem mentioned here is fixed.
Thank you! 💪