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.

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.

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 !

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

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.

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