Rectangular 'bbox' region picker

[Jakidxav]

Purpose

Supporting a rectangular, bounding box-style option for the <RegionPicker /> component. Currently, only a circular option is available.

Changes

src

I added a <RectanglePicker /> component that works very similar to the <CirclePicker /> that is currently used. Because some of the code between the picker components is shared, I was able to move the utils methods and <CursorManager /> component to src/region/region-picker/.

The <RegionPicker /> component would now accept a mode prop which defaults to 'circle', but can toggle between that and the 'rectangle' option when rendered within the map component. Right now, only one corner can be used to resize the rectangular region, but future work could extend this to include all corners in order to create custom rectangular region shapes.

demo

In the demo app, I commented out the mode prop for the <RegionPicker /> that shows how a user could toggle between the 'circle' and 'rectangle' options. I also slightly modified the map's starting center location to better show that these two options produce different output when they are initially rendered.

pre-commit formatting

All files in this pull request meet pre-commit checks. When I run:

pre-commit run --all-files

I see:

prettier.................................................................Passed
prettier-markdown........................................................Passed

[vercel]

@Jakidxav is attempting to deploy a commit to the carbonplan Team on Vercel.

A member of the Team first needs to authorize it.

[Shane98c]

This looks cool! Thanks for your work here.

I think we'll need to make some updates to queryRegion in tiles.js and and getTilesOfRegion in utils.js in order to handle the rectangle shape since there are lots of circle assumptions built into the region picker flow.

A couple smaller suggestions below.

Also, might be worth checking out https://github.com/carbonplan/zarr-layer if you're building this for a project - it takes a geojson shape for query which is a lot more flexible!

[Shane98c]

should we change to show side length here?

[Jakidxav]

That is probably much more intuitive.

Then a circular region picker could be created with:

<RegionPicker
  ...
  mode={'circle'}
  minRadius={300}
  maxRadius={2000}
  initialRadius={1000}
/>

And a rectangular region picker with:

<RegionPicker
  ...
  mode={'rectangle'}
  minSideLength={300}
  maxSideLength={2000}
  initialSideLength={1000}
/>

or something similar?

We could then check to make sure that radius props are only used when mode is set to 'circle' and side length props when mode is 'rectangle'.

[Shane98c]

might be worth moving these to somewhere shared

[Jakidxav]

SHOW_RADIUS_GUIDELINE was actually already declared in in region/region-picker/constants.js and used by the <CircleRenderer /> component. I decided to move HANDLE_RADIUS, POLES, and abbreviations there, too, since they are shared between the circle and bbox picker.

I changed the name of abbreviations to UNITS_DICT since I thought that made it easier to tell what it is used for, but I am not tied to that name.

[Jakidxav]

Thank you @Shane98c for reviewing my pull request! I cleaned up the code by including most of your suggestions.

I hadn't thought about what it would take to overhaul the queryRegion() and getTilesofRegion() methods to be able to accommodate a new region picker shape. If that work is something that the team doesn't have capacity for right now or doesn't plan tackle in the future, I totally get that.

I actually first started building this component to use with the zarr-layer package and
MapLibre GL JS type maps, but thought (incorrectly) that it would be easy to extend its functionality to the maps package. I would be fine to turn this component into something for my own personal use if that is the preferred outcome.