multiware-tecnologia / react-native-open-street-map Goto Github PK

Hello
Thanks For The Great Project
I Just Started Using This Project And I Want To Show Multiple Markers On My Map
Is There Any Way That I Can Do That?
And Also I Have To Set Center To User Location Is That Possible Or Not?
Thanks.

In my application I need to show the location of the current user, that's all.

However when using the prop router, if the user within a fixed position, it works normally
Exemple:

But if the user moves, it will create several points on the screen, instead of deleting the last and following the user's location.
Exemple:

I'm using fake GPS to simulate the user's location.

I tried using the UserLocation prop, but it did not work.

Code:
`class MapaPontoUnico extends Component {

state = {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0922 * (width / height),
    zoom: 1,
}

componentDidMount() {
    setTimeout(() => {
        watchId = navigator.geolocation.watchPosition(
            (position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    latitudeDelta: 0.0922,
                    longitudeDelta: position.coords.longitude,
                })
            },
            (error) => this.setState(),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 }
        )
    }, 1000)
    navigator.geolocation.getCurrentPosition(
        (position) => {
            this.setState({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                latitudeDelta: 0.0922,
                longitudeDelta: position.coords.longitude,
            })
        },
        (error) => this.setState(),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 }
    )
}

componentWillUnmount() {
    navigator.geolocation.clearWatch(watchId);
    navigator.geolocation.stopObserving();
}

render() {
    let region = {
        latitude: this.state.latitude,
        longitude: this.state.longitude,
        latitudeDelta: this.state.latitudeDelta,
        longitudeDelta: this.state.longitudeDelta * (width / height)
    };
    return (
        <View style={{ flex: 1, backgroundColor: "#eeefe3" }}>
            <MapView
                ref="map"
                zoom={this.state.zoom}
                multiTouchControls
                style={{
                    flex: 1
                }}
                region={region}
                router={{
                    titleA: "Minha localização",
                    coordinates: [{
                        latitude: parseFloat(this.state.latitude),
                        longitude: parseFloat(this.state.longitude),
                    }]
                }}
                
            />
            <View style={{ position: "absolute", bottom: "10%", alignItems: "center", width: "100%" }}>
                <TouchableOpacity onPress={() => { this.setState({ zoom: this.state.zoom + 1 }) }} style={{ backgroundColor: "#7f9928", borderRadius: 2 }}>
                    <Text numberOfLines={1} style={{ color: "#eeefe3", marginLeft: 15, marginRight: 15, marginTop: 15, marginBottom: 15, }}>REGISTRAR PONTO</Text>
                </TouchableOpacity>
            </View>
        </View>

    );
}

}
`

Thanks for your contribution. Btw, I'm just curious about that.

Describe the bug
The tiles don't load from Open Street Map

To Reproduce
Steps to reproduce the behavior:

1. Copy this in package.json:
   "react-native-open-street-map": "https://github.com/enieber/react-native-open-street-map.git"
2. Copy all android code into files
3. Launch the app with internet activated

Expected behavior
Tiles should be displayed

Screenshots

Smartphone (please complete the following information):

• Device: Emulator
• OS: Android 7.1

Additional context
Thank you for making this module nonetheless !

Namaste,

I am not seeing any activity from last one year.

Does it mean that the project is dead ?

I would like to know any stable react-native component with OSM.

Thanks,
Kiran.

I followed the instruction to use react-native-open-street-map, however I get the following error when I run npm install :

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\nan):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename 'D:\Mobile\gitGroupy\node_modules\nan' -> 'D:\Mobile\gitGroupy\node_modules.nan.DELETE'npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

I then When I start the app using the provided example it doesn't work

In the part where it talks about the configuration of the setting.gradle, the import is wrong.
It is currently described in this way:
include ':react-native-open-street-map' project(':react-native-open-street-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-open-street-map/lib/android')

But only imports the project correctly like this:
include ':react-native-open-street-map' project(':react-native-open-street-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-open-street-maps/lib/android')

It is necessary to place an s at the end of the "map".