How to resize shapes drawn on map based on zoom value with react-native-maps

Question

I am using react-native-maps to integrate maps in my application. I want to show some sort of radar heading the direction the user is heading, i want to area covered of different distances like 1 km, 5 km, and 10 km. resulting in something like the image below.

My initial solution was to draw shapes using View with position absolute, i got something like this with the approach.

The problem with above approach is View height is static, and it doesn't respond to zoom value of the map, also the calculation of View height with respect to distance is non trivial.

My second solution was to draw circles around user marker of certain radius, rather then a full circle, i can create semi circles or semi-semi circles achieve the desire result. But i cannot find any way to draw semi circle with the library react-native-maps .

Any suggestion how can i achieve the desire result?

Answer 1

Your first solution seems good enough to me, maybe a little modifications should get you the result you are looking for, follow along:

1. First lets associate all the relevant <View /> styling props to state values

// ... all your imports and other code

state ={
    viewHeight: 0, // or any default value you want
    viewWidth: 0, // or any default value you want

    // ... other view parameters used and other state values
}

// ... functions and other code

render() {
    return (
        // ... other rendered components etc

        <View
            style={{
                width: this.state.viewWidth,
                height: this.state.viewHeight
            }} />
    )
}

1. Next we will get the map zoom level every time it changes and preform some sort of conditions

<MapView
    ref='map'                                       // <==== add the ref map so we can access the zoom level from our _onMapChange function later
    style={{ flex: 1 }}
    provider={PROVIDER_GOOGLE}                      // <==== this approach will not work on apple maps as the camera will not give us the zoom parameter so use google maps
    onRegionChange={() => this._onMapChange()} />   // <==== this will tell the map to fire the _onMapChange() function everytime there is a change to the map region

3. The _onMapChange() function:

_onMapChange = async () => {
    const {
        zoom,
        pitch,
        center,
        heading 
    } = await this.refs.map.getCamera();

    // Now set the conditions for the view style based on the zoom level, maybe something like this:

    if (zoom <= 5) {
        this.setState({
            viewWidth: 50,  // what ever width you want to set
            viewHeight: 50  // what ever height you want to set
            // ... other view parameters
        })
    } else if (zoom <= 10) {
        this.setState({
            viewWidth: 100,  // what ever width you want to set
            viewHeight: 100  // what ever height you want to set
            // ... other view parameters
        })
    }
}

Heads-Up: I am using my editor that's all so there might be some syntax errors

Hope this Helps!

Answer 2

You can use Overlay (circle, polygon) or can make your custom overlay to cover certain areas on the map.

Like this,

Link for overlay docs: react-native-community/react-native-maps

To make it dynamic, precisely calculate longitudeDelta and LatitudeDelta.