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

View Code? Open in Web Editor NEW

This project forked from react-native-maps/react-native-maps

54.0 9.0 12.0 59.51 MB

react-native-maps using open-street-map

License: MIT License

Ruby 0.98% JavaScript 13.16% Java 16.64% Objective-C 69.22%

react-native react-native-component openstreetmap android maps react-native-maps

react-native-open-street-map's Introduction

react-native-maps (using open-street-map) WIP

This project is one fork of react-native-maps to use open-street-map

RoadMap

How to use

this project is done to render maps in open-street-maps on android

install

package.json

  "react-native-open-street-map": "https://github.com/enieber/react-native-open-street-map.git"

npm install

yarn

Android

setting.gradle

// Open Street Map
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')

app/build.gradle

dependencies {
 ...
    compile (project(':react-native-open-street-map')) {
        // if you use the lib gms in the project or libs on project
        exclude group: 'com.google.android.gms'
    }

app/src/main/java/{project_name}/MainApplication.java

...
import com.airbnb.android.react.maps.MapsPackage;

public class MainApplication extends Application implements ReactApplication {

    @Override
    protected List<ReactPackage> getPackages() {
      new MainReactPackage(),
      new MapsPackage() // insert this line to init module maps
    }
}

iOS

the iOS instalation is equals in the lib of react-native-maps because this fork not set iOS to use Open Street Maps, only Apple Maps.

Props

name	type	iOS	Android	Info
router	Object	-	OK	router object espcificate in routerObject
region	Geolocation	-	OK	the initial region render map
zoom	int	-	OK	show init zoom
showsUserLocation	boolean	-	OK	show location in Map

Router Object

name	type	required	Info
coordinates	Array	true	array of object with latitude and longitude
titleA	String	true	title of first location
descriptionA	String	true	description of first location
titleB	String	false	title of second location
descriptionB	String	false	description of second location

Exaple

How to make router from point A to point B

import React from 'react';
import { Dimensions } from 'react-native';
import MapView from 'react-native-open-street-map';

class CustonMap extends React.PureComponent {
  render() {
    const {
      width,
      height,
    } = Dimensions.get('window');
    const region = {
      latitude: 0,
      longitude: 0,
      latitudeDelta:  0.0922,
      longitudeDelta: 0.0922 * (width / height)
    };
    const latitudes = [-15.806553, -15.8202434];
    const longitudes = [-47.8891454, -47.9045093];
    
    return (
      <MapView
        ref="map"
        zoom={5}
        style={{
          flex: 1
        }}
        region={region}
        showsUserLocation
        router={{
          titleA: "The point A",
          titleB: "The point B",
          descriptionA: "Bank",
          descriptionB: "Scholl",
          coordinates: [
            {
              latitude: latitudes[0],
              longitude: longitudes[1],
            },
            {
              latitude: latitudes[1],
              longitude: longitudes[1],
            }
          ]
        }}
      />
    );
  }
}

sample router with one point object

import React from 'react';
import { Dimensions } from 'react-native';
import MapView from 'react-native-open-street-map';

class CustonMap extends React.PureComponent {
  render() {
    const {
      width,
      height,
    } = Dimensions.get('window');
    const region = {
      latitude: 0,
      longitude: 0,
      latitudeDelta:  0.0922,
      longitudeDelta: 0.0922 * (width / height)
    };
    return (
      <MapView
        ref="map"
        zoom={5}
        multiTouchControls
        style={{
          flex: 1
        }}
        region={region}
        showsUserLocation
        router={
          titleA: 'New Yourk city',
          descriptionA: 'My location',
          coordinates: [{
            latitude: parseFloat('40.7142700'),
            longitude: parseFloat('-74.0059700'),
          }],
        }}
      />
    );
  }
}

react-native-open-street-map's People

Contributors

Stargazers

Watchers

Forkers

benglass alfavat ruckyzucky farnabaz enieber levkovich2806 tpz-contact sepandy meisamfarahani rorama andrew-dvpr ydrea

react-native-open-street-map's Issues

How to use has a incorrect part

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

Does react-native-open-street-map support new versions of react native and react

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

to do PullRequest to orginal repository

Tiles not loading

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

To Reproduce
Steps to reproduce the behavior:

Copy this in package.json:
"react-native-open-street-map": "https://github.com/enieber/react-native-open-street-map.git"
Copy all android code into files
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 !

add props OpenStreetMap

Several points on the screen when using the router proper

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>

    );
}

}
`

Does it mean that the project is dead ?

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

Thanks,
Kiran.