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!

🚀 Try the Beta! (v1.1.0-beta.0)

A beta version has been released with major improvements to offline functionality and local tile storage. While still being tested, this version offers powerful new features:

$3

- ✅ True Offline Mode: Completely disable network and work with cached tiles only
- ✅ Local File Storage: Read tiles directly from device filesystem using file:// protocol
- ✅ Improved Tile Caching: Proper cache configuration with expiration control
- ✅ Hybrid Mode: Automatically switch between online/offline based on network status
- ✅ Better Performance: Optimized tile loading and network management

$3

sh
npm install @milad445/react-native-osmdroid@beta

$3

jsx
import { MapView, UrlTile } from '@milad445/react-native-osmdroid';
// Offline mode with cached tiles

      urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
    offlineMode={true}
    tileCachePath="/storage/emulated/0/osmdroid"
    tileCacheMaxAge={0}  // Never expire
  />

// Or use local files urlTemplate="file:///storage/emulated/0/maps/{z}/{x}/{y}.png" offlineMode={true} />`

📖 See the beta branch for complete documentation.

> ⚠️ Note: Beta version is not yet production-ready. Test thoroughly before using in production.

---

`Installation`

`sh npm install @milad445/react-native-osmdroid`

`Tile Caching with TileCacher`

The TileCacher feature enables efficient offline map functionality by caching downloaded map tiles on the device's local storage. This allows for improved performance in map tile loading, reducing network requests for previously visited areas and ensuring maps remain accessible without an internet connection.

`$3`

The TileCacher utilizes the cacheTilesFromDirectory method to specify the local directory path where map tiles will be cached for offline use. This feature is currently available only on Android.

`js import { TileCacher } from '@milad445/react-native-osmdroid';

TileCacher.cacheTilesFromDirectory('/storage/emulated/0/map/tiles', { showProgressToast: true });`

`$3`


The cached tiles must be stored following the "/{z}/{x}/{y}.png" subdirectory pattern, where {z} is the zoom level, and {x} and {y} are the tile coordinates. This structure allows the map component to efficiently locate and load the appropriate tiles based on the current map view.
$3

It's crucial to manage the cache directory's size to prevent excessive storage usage. Developers are advised to implement a strategy for cache cleanup or limiting the cache size.

Manifest
In most cases, you will have to set the following authorizations in your AndroidManifest.xml:

`sh`

On Android 13 or higher, the android.permission.READ_MEDIA_IMAGES permission and android:requestLegacyExternalStorage="true" attribute in your AndroidManifest.xml are required to access external storage for tile caching.

`sh`

Add the android:requestLegacyExternalStorage="true" attribute to your application tag if targeting Android 10 (API level 29) or higher.

If you are only using parts of the library, you can adjust the permissions accordingly.

Online tile provider

`sh`

Offline tile provider and storing tiles

`sh`

Location provider

`sh`

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

`$3`


This feature is specific to Android. Ensure your app has the necessary permissions to read from and write to the specified directory, particularly on Android, where runtime permissions are required for accessing external storage.
$3

js
import React from 'react';
import { Button, View } from 'react-native';
import MapView, { UrlTile, TileCacher } from '@milad445/react-native-osmdroid';
export default function App() {
  const cacheTiles = () => {
    TileCacher.cacheTilesFromDirectory('/storage/emulated/0/map/tiles', { showProgressToast: true });
  };

return (

react-native-osmdroid ![npm version](https://www.npmjs.com/package/@milad445/react-native-osmdroid) ![Downloads](http://www.npmtrends.com/@milad445/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!

🚀 Try the Beta! (v1.1.0-beta.0)

A beta version has been released with major improvements to offline functionality and local tile storage. While still being tested, this version offers powerful new features:

$3

sh
npm install @milad445/react-native-osmdroid@beta

$3

jsx
import { MapView, UrlTile } from '@milad445/react-native-osmdroid';
// Offline mode with cached tiles

      urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
    offlineMode={true}
    tileCachePath="/storage/emulated/0/osmdroid"
    tileCacheMaxAge={0}  // Never expire
  />

// Or use local files urlTemplate="file:///storage/emulated/0/maps/{z}/{x}/{y}.png" offlineMode={true} />`

📖 See the beta branch for complete documentation.

> ⚠️ Note: Beta version is not yet production-ready. Test thoroughly before using in production.

---

`Installation`

`sh npm install @milad445/react-native-osmdroid`

`Tile Caching with TileCacher`

`$3`

`js import { TileCacher } from '@milad445/react-native-osmdroid';

TileCacher.cacheTilesFromDirectory('/storage/emulated/0/map/tiles', { showProgressToast: true });`

`$3`


The cached tiles must be stored following the "/{z}/{x}/{y}.png" subdirectory pattern, where {z} is the zoom level, and {x} and {y} are the tile coordinates. This structure allows the map component to efficiently locate and load the appropriate tiles based on the current map view.
$3

It's crucial to manage the cache directory's size to prevent excessive storage usage. Developers are advised to implement a strategy for cache cleanup or limiting the cache size.

Manifest
In most cases, you will have to set the following authorizations in your AndroidManifest.xml:

`sh`

Add the android:requestLegacyExternalStorage="true" attribute to your application tag if targeting Android 10 (API level 29) or higher.

If you are only using parts of the library, you can adjust the permissions accordingly.

Online tile provider

`sh`

Offline tile provider and storing tiles

`sh`

Location provider

`sh`

`$3`


This feature is specific to Android. Ensure your app has the necessary permissions to read from and write to the specified directory, particularly on Android, where runtime permissions are required for accessing external storage.
$3

js
import React from 'react';
import { Button, View } from 'react-native';
import MapView, { UrlTile, TileCacher } from '@milad445/react-native-osmdroid';
export default function App() {
  const cacheTiles = () => {
    TileCacher.cacheTilesFromDirectory('/storage/emulated/0/map/tiles', { showProgressToast: true });
  };

return (

@milad445/react-native-osmdroid

react-native-osmdroid ![npm version](https://www.npmjs.com/package/@milad445/react-native-osmdroid) ![Downloads](http://www.npmtrends.com/@milad445/react-native-osmdroid)

🚀 Try the Beta! (v1.1.0-beta.0)

$3

$3

$3

Installation

Tile Caching with TileCacher

$3

$3

$3

Manifest

$3

$3

Component API

Usage

Examples

$3

$3

$3

$3

$3

$3

Contributing

License

@milad445/react-native-osmdroid

react-native-osmdroid ![npm version](https://www.npmjs.com/package/@milad445/react-native-osmdroid) ![Downloads](http://www.npmtrends.com/@milad445/react-native-osmdroid)

🚀 Try the Beta! (v1.1.0-beta.0)

$3

$3

$3

Installation

Tile Caching with TileCacher

$3

$3

$3

Manifest

$3

$3

Component API

Usage

Examples

$3

$3

$3

$3

$3

$3

Contributing

License

Dist Tags

`Installation`

`Tile Caching with TileCacher`

`$3`

`$3`

`$3`

`Usage`

`Installation`

`Tile Caching with TileCacher`

`$3`

`$3`

`$3`

`Usage`