This project is one fork of react-native-maps to use open-street-map
-
change use of GoogleMaps to OpenStreetMap
-
render map in open-street-maps in android
-
add props OpenStreetMap (WIP)
- zoom
- router
- router with one location
- initial router
-
render open-street-maps to iOS
-
add option to show map with GoogleMap or OpenStreetMap
-
to do PullRequest to orginal repository
this project is done to render maps in open-street-maps on android
package.json
"react-native-open-street-map": "https://github.com/enieber/react-native-open-street-map.git"
npm install
or
yarn
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
}
}
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.
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 |
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 |
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],
}
]
}}
/>
);
}
}
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'),
}],
}}
/>
);
}
}