React Native Open Street Maps components for Android.
This is unofficial React Native wrapper for Osmdroid SDK.
Many thanks to fqborges for his library, which is the basis of this library!
or
If you are only using parts of the library, you can adjust the permissions accordingly.
Online tile provider
Offline tile provider and storing tiles
Location provider
Android 6.0+ devices require you have to check for "dangerous" permissions at runtime. osmdroid requires the following dangerous permissions: WRITEEXTERNALSTORAGE and ACCESSCOARSELOCATION/ACCESSFINELOCATION. See OpenStreetMapViewer's implementation or Google Documentation on Permissions
Made with create-react-native-library
Installation
npm install @splicer97/react-native-osmdroid
or
yarn add @splicer97/react-native-osmdroid
Manifest
In most cases, you will have to set the following authorizations in your AndroidManifest.xml:<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
If you are only using parts of the library, you can adjust the permissions accordingly.
Online tile provider
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Offline tile provider and storing tiles
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Location provider
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
Android 6.0+ devices require you have to check for "dangerous" permissions at runtime. osmdroid requires the following dangerous permissions: WRITEEXTERNALSTORAGE and ACCESSCOARSELOCATION/ACCESSFINELOCATION. See OpenStreetMapViewer's implementation or Google Documentation on Permissions
Component API
<MapView />
Component API<Marker />
Component API<Callout />
Component API<Polygon />
Component API<Polyline />
Component API<Circle />
Component API<Overlay />
Component API<Heatmap />
Component API<Geojson />
Component API<URLTile />
and <WMSTile />
Component APIUsage
import MapView from '@splicer97/react-native-osmdroid';
// ...
<MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>;
Examples
MapView
Polyline
Marker
Polygon
Circle
UrlTile
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.License
MITMade with create-react-native-library