Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: Add min/max scale limits for geo plots #7371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
camdecoster wants to merge 18 commits into master
base: master
Choose a base branch
Loading
from cam/5192/add-min-max-scale-limits

Conversation

Copy link
Contributor

@camdecoster camdecoster commented Feb 18, 2025 •
edited
Loading

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.

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

mojoaxel reacted with thumbs up emoji
@camdecoster camdecoster force-pushed the cam/5192/add-min-max-scale-limits branch from c7b5ec3 to 29b4316 Compare February 18, 2025 14:15
@gvwilson gvwilson added P1 needed for current cycle fix fixes something broken labels Feb 18, 2025
Copy link
Contributor Author

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.

Copy link
Contributor Author

@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 reacted with thumbs up emoji

maxscale: {
valType: 'number',
min: 0,
dflt: -1,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@camdecoster camdecoster Jul 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Contributor

archmoj commented Jul 25, 2025

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?

Copy link
Contributor Author

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

Copy link
Contributor

archmoj commented Jul 25, 2025

geo_canadian-cities

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

Copy link
Contributor

archmoj commented Jul 25, 2025

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?

Copy link
Contributor

archmoj commented Jul 25, 2025

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.

@archmoj archmoj added feature something new and removed fix fixes something broken labels Jul 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexcjohnson alexcjohnson Awaiting requested review from alexcjohnson

@emilykl emilykl Awaiting requested review from emilykl

@marthacryan marthacryan Awaiting requested review from marthacryan

1 more reviewer

@archmoj archmoj archmoj left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Labels
feature something new P1 needed for current cycle
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

allow user to set zoom/scale limits for choropleth maps

AltStyle によって変換されたページ (->オリジナル) /