Offline Maps API
The Offline Maps API provides complete offline map management functionality, including download, update, delete, and storage management.
ExpoGaodeMapOfflineModule
Offline map manager providing all offline map related functions.
Methods
getAvailableCities()
Get list of all downloadable cities.
const cities = await ExpoGaodeMapOfflineModule.getAvailableCities();Returns
Promise<OfflineMapInfo[]>- Array of city information
Example
const cities = await ExpoGaodeMapOfflineModule.getAvailableCities();
console.log(`${cities.length} cities available`);
cities.forEach(city => {
console.log(`${city.cityName}: ${(city.size / 1024 / 1024).toFixed(1)} MB`);
});startDownload(options)
Start downloading offline map.
await ExpoGaodeMapOfflineModule.startDownload(options);Parameters
options.cityCode: string- City codeoptions.allowCellular?: boolean- Allow downloads over cellular (defaultfalse)
Example
// WiFi only
await ExpoGaodeMapOfflineModule.startDownload({
cityCode: '110000', // Beijing
allowCellular: false,
});
// Allow cellular
await ExpoGaodeMapOfflineModule.startDownload({
cityCode: '310000', // Shanghai
allowCellular: true,
});pauseDownload(cityCode)
Pause ongoing download.
await ExpoGaodeMapOfflineModule.pauseDownload(cityCode);Parameters
cityCode: string- City code
Example
await ExpoGaodeMapOfflineModule.pauseDownload('110000');resumeDownload(cityCode)
Resume paused download.
await ExpoGaodeMapOfflineModule.resumeDownload(cityCode);Parameters
cityCode: string- City code
Example
await ExpoGaodeMapOfflineModule.resumeDownload('110000');deleteMap(cityCode)
Delete offline map for specified city.
await ExpoGaodeMapOfflineModule.deleteMap(cityCode);Parameters
cityCode: string- City code
Example
await ExpoGaodeMapOfflineModule.deleteMap('110000');
console.log('Beijing offline map deleted');clearAll()
Clear all downloaded offline maps.
await ExpoGaodeMapOfflineModule.clearAll();Example
await ExpoGaodeMapOfflineModule.clearAll();
console.log('All offline maps cleared');getDownloadedMaps()
Get list of downloaded maps.
const maps = await ExpoGaodeMapOfflineModule.getDownloadedMaps();Returns
Promise<OfflineMapInfo[]>- Array of downloaded city information
Example
const downloaded = await ExpoGaodeMapOfflineModule.getDownloadedMaps();
console.log(`${downloaded.length} cities downloaded`);
downloaded.forEach(city => {
console.log(`✓ ${city.cityName}`);
});getStorageInfo()
Get offline map storage information.
const storage = await ExpoGaodeMapOfflineModule.getStorageInfo();Returns
Promise<StorageInfo>- Storage information object
Example
const storage = await ExpoGaodeMapOfflineModule.getStorageInfo();
console.log('Used:', (storage.usedSpace / 1024 / 1024).toFixed(2), 'MB');
console.log('Available:', (storage.availableSpace / 1024 / 1024).toFixed(2), 'MB');
console.log('Total:', (storage.totalSpace / 1024 / 1024).toFixed(2), 'MB');checkUpdate(cityCode)
Check if map has updates for specified city.
const hasUpdate = await ExpoGaodeMapOfflineModule.checkUpdate(cityCode);Parameters
cityCode: string- City code
Returns
Promise<boolean>- Whether update is available
Example
const hasUpdate = await ExpoGaodeMapOfflineModule.checkUpdate('110000');
if (hasUpdate) {
console.log('Beijing map has new version');
await ExpoGaodeMapOfflineModule.updateMap('110000');
} else {
console.log('Beijing map is up to date');
}updateMap(cityCode)
Update offline map for specified city.
await ExpoGaodeMapOfflineModule.updateMap(cityCode);Parameters
cityCode: string- City code
Example
await ExpoGaodeMapOfflineModule.updateMap('110000');
console.log('Updating Beijing map');Event Listeners
addDownloadProgressListener(callback)
Listen to download progress events.
const subscription = ExpoGaodeMapOfflineModule.addDownloadProgressListener(callback);Parameters
callback: (event: OfflineMapProgressEvent) => void- Callback function
Returns
Subscription- Subscription object, callremove()to unsubscribe
Event Object
interface OfflineMapProgressEvent {
cityCode: string;
cityName: string;
progress: number; // 0-100
}Example
const subscription = ExpoGaodeMapOfflineModule.addDownloadProgressListener((event) => {
console.log(`${event.cityName}: ${event.progress}%`);
// Update UI progress bar
setProgress(event.progress);
});
// Cleanup
return () => subscription.remove();addDownloadCompleteListener(callback)
Listen to download completion events.
const subscription = ExpoGaodeMapOfflineModule.addDownloadCompleteListener(callback);Parameters
callback: (event: OfflineMapCompleteEvent) => void- Callback function
Event Object
interface OfflineMapCompleteEvent {
cityCode: string;
cityName: string;
}Example
const subscription = ExpoGaodeMapOfflineModule.addDownloadCompleteListener((event) => {
Alert.alert('Download Complete', `${event.cityName} offline map downloaded`);
loadData(); // Refresh list
});
return () => subscription.remove();addDownloadErrorListener(callback)
Listen to download error events.
const subscription = ExpoGaodeMapOfflineModule.addDownloadErrorListener(callback);Parameters
callback: (event: OfflineMapErrorEvent) => void- Callback function
Event Object
interface OfflineMapErrorEvent {
cityCode: string;
cityName: string;
error: string;
}Example
const subscription = ExpoGaodeMapOfflineModule.addDownloadErrorListener((event) => {
console.error(`${event.cityName} download failed: ${event.error}`);
Alert.alert('Download Failed', event.error);
});
return () => subscription.remove();addDownloadPausedListener(callback)
Listen to download pause events.
const subscription = ExpoGaodeMapOfflineModule.addDownloadPausedListener(callback);Parameters
callback: (event: OfflineMapPausedEvent) => void- Callback function
Event Object
interface OfflineMapPausedEvent {
cityCode: string;
cityName: string;
}Example
const subscription = ExpoGaodeMapOfflineModule.addDownloadPausedListener((event) => {
console.log(`${event.cityName} download paused`);
});
return () => subscription.remove();addDownloadCancelledListener(callback)
Listen to download cancellation events.
const subscription = ExpoGaodeMapOfflineModule.addDownloadCancelledListener(callback);Parameters
callback: (event: OfflineMapCancelledEvent) => void- Callback function
Event Object
interface OfflineMapCancelledEvent {
cityCode: string;
cityName: string;
}Example
const subscription = ExpoGaodeMapOfflineModule.addDownloadCancelledListener((event) => {
console.log(`${event.cityName} download cancelled`);
});
return () => subscription.remove();Type Definitions
OfflineMapInfo
City offline map information.
interface OfflineMapInfo {
cityCode: string; // City code
cityName: string; // City name
size: number; // Map size (bytes)
status: OfflineMapStatus;
}Example
const city: OfflineMapInfo = {
cityCode: '110000',
cityName: 'Beijing',
size: 103809024, // ~99 MB
status: 'DOWNLOADED',
};OfflineMapStatus
Offline map status.
type OfflineMapStatus =
| 'NOT_DOWNLOADED' // Not downloaded
| 'DOWNLOADING' // Downloading
| 'PAUSED' // Paused
| 'DOWNLOADED' // Downloaded
| 'ERROR'; // ErrorExample
const renderStatus = (status: OfflineMapStatus) => {
switch (status) {
case 'NOT_DOWNLOADED':
return 'Not Downloaded';
case 'DOWNLOADING':
return 'Downloading';
case 'PAUSED':
return 'Paused';
case 'DOWNLOADED':
return 'Downloaded';
case 'ERROR':
return 'Error';
}
};StorageInfo
Storage space information.
interface StorageInfo {
usedSpace: number; // Used space (bytes)
availableSpace: number; // Available space (bytes)
totalSpace: number; // Total space (bytes)
}Example
const storage: StorageInfo = {
usedSpace: 209715200, // 200 MB
availableSpace: 5368709120, // 5 GB
totalSpace: 10737418240, // 10 GB
};
const usagePercent = (storage.usedSpace / storage.totalSpace) * 100;
console.log(`Used ${usagePercent.toFixed(1)}%`);Usage Examples
Basic Download Flow
import { useState, useEffect } from 'react';
import { ExpoGaodeMapOfflineModule } from 'expo-gaode-map';
function DownloadExample() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const sub = ExpoGaodeMapOfflineModule.addDownloadProgressListener((event) => {
setProgress(event.progress);
});
return () => sub.remove();
}, []);
const handleDownload = async () => {
await ExpoGaodeMapOfflineModule.startDownload({
cityCode: '110000',
allowCellular: false,
});
};
return (
<View>
<Button title="Download Beijing Map" onPress={handleDownload} />
<ProgressBar progress={progress} />
</View>
);
}Storage Space Check
const handleDownload = async (city: OfflineMapInfo) => {
// Check storage space
const storage = await ExpoGaodeMapOfflineModule.getStorageInfo();
if (storage.availableSpace < city.size) {
Alert.alert(
'Insufficient Storage',
`Requires ${(city.size / 1024 / 1024).toFixed(1)} MB, ` +
`available ${(storage.availableSpace / 1024 / 1024).toFixed(1)} MB`
);
return;
}
await ExpoGaodeMapOfflineModule.startDownload({
cityCode: city.cityCode,
allowCellular: false,
});
};Batch Update Check
const checkAllUpdates = async () => {
const downloaded = await ExpoGaodeMapOfflineModule.getDownloadedMaps();
const updates: string[] = [];
for (const city of downloaded) {
const hasUpdate = await ExpoGaodeMapOfflineModule.checkUpdate(city.cityCode);
if (hasUpdate) {
updates.push(city.cityName);
}
}
if (updates.length > 0) {
Alert.alert(
'Updates Available',
`Updates found for:\n${updates.join(', ')}`
);
} else {
Alert.alert('Notice', 'All maps are up to date');
}
};