@splicer97/react-native-osmdroid

react-native-osmdroid

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!

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: WRITE_EXTERNAL_STORAGE and ACCESS_COARSE_LOCATION/ACCESS_FINE_LOCATION. 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 API

Usage

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

MIT

---

Made with create-react-native-library