Skip to content
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.

Sign up for GitHub

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

add initial center prop to region picker #113

Merged
merged 8 commits into from
Apr 1, 2024
Merged

add initial center prop to region picker #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2d34f9d
add initial center prop
Shane98c Mar 25, 2024
1db0223
docs
Shane98c Mar 25, 2024
b91e659
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 25, 2024
21d5255
lint
Shane98c Mar 25, 2024
d88e695
fix lint
Shane98c Mar 25, 2024
3bc8db6
use generic coordinate array instead of mapbox class to pass in center
Shane98c Mar 28, 2024
4900288
update docs with latest coordinate format
Shane98c Mar 28, 2024
797129f
break out into getInitialCenter fn
Shane98c Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions docs/pages/maps/regionpicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,18 @@ The `RegionPicker` component renders a moveable and resizeable circle over the m

<Table>

| Prop | Description | Default |
| ---------------- | -------------------------------------------------------------------------- | ------------ |
| color | Color of circle border, radius guideline, and label | |
| backgroundColor | Color rendered over area of map not covered by circle (with opacity `0.8`) | |
| fontFamily | Font family used to render circle radius label | |
| fontSize | Font size used to render circle radius label | |
| _optional props_ | | |
| units | Units used to render circle radius label, one of: 'meters', 'kilometers' | 'kilometers' |
| initialRadius | Radius used to initialize circle | |
| minRadius | Minimum radius allowed | |
| maxRadius | Maximum radius allowed | |
| Prop | Description | Default |
| ---------------- | -------------------------------------------------------------------------- | --------------- |
| color | Color of circle border, radius guideline, and label | |
| backgroundColor | Color rendered over area of map not covered by circle (with opacity `0.8`) | |
| fontFamily | Font family used to render circle radius label | |
| fontSize | Font size used to render circle radius label | |
| _optional props_ | | |
| units | Units used to render circle radius label, one of: 'meters', 'kilometers' | 'kilometers' |
| initialRadius | Radius used to initialize circle | |
| initialCenter | Center coordinates used to initialize circle `[lng, lat]` | map view center |
| minRadius | Minimum radius allowed | |
| maxRadius | Maximum radius allowed | |

</Table>

Expand Down Expand Up @@ -91,5 +92,5 @@ You could instead choose to include all data from all months in the regional que
```

export default ({ children }) => (
<Section name='regionpicker'>{children}</Section>
)

<Section name='regionpicker'>{children}</Section>)
Copy link
Member Author

Choose a reason for hiding this comment

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

not sure what prettier is up to here but this is what it wants

34 changes: 33 additions & 1 deletion src/region/region-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { v4 as uuidv4 } from 'uuid'

import { useRegionContext } from '../context'
import { useMapbox } from '../../mapbox'
import mapboxgl from 'mapbox-gl'

function getInitialRadius(map, units, minRadius, maxRadius) {
const bounds = map.getBounds().toArray()
Expand All @@ -17,6 +18,34 @@ function getInitialRadius(map, units, minRadius, maxRadius) {
return radius
}

function isValidCoordinate(longitude, latitude) {
return (
longitude !== undefined &&
latitude !== undefined &&
longitude >= -180 &&
longitude <= 180 &&
latitude >= -90 &&
latitude <= 90
)
}

function getInitialCenter(map, center) {
if (
Array.isArray(center) &&
center.length === 2 &&
isValidCoordinate(center[0], center[1])
) {
return new mapboxgl.LngLat(center[0], center[1])
} else {
if (center) {
console.warn(
`Invalid initialCenter provided: ${center}. Should be [lng, lat]. Using map center instead.`
)
}
return map.getCenter()
}
}

// TODO:
// - accept mode (only accept mode="circle" to start)
function RegionPicker({
Expand All @@ -26,12 +55,15 @@ function RegionPicker({
fontSize,
units = 'kilometers',
initialRadius: initialRadiusProp,
initialCenter: initialCenterProp,
minRadius,
maxRadius,
}) {
const { map } = useMapbox()
const id = useRef(uuidv4())
const initialCenter = useRef(map.getCenter())

const initialCenter = useRef(getInitialCenter(map, initialCenterProp))

const initialRadius = useRef(
initialRadiusProp || getInitialRadius(map, units, minRadius, maxRadius)
)
Expand Down
Loading