Offline map display

VERSION 0.45.0

Offline functionality for Maps SDK for iOS is only available upon request. Contact us to get started.

This tutorial shows how to display a simple map that works without requiring internet connectivity. It uses the TomTom Maps SDKs for iOS. All components are in dedicated modules, available as separate CocoaPods. The engines implement the same interface as their online counterparts but work with an offline map.

Getting started

Use the Quickstart guide to properly configure the project and set up the offline map.

Displaying a map

Once access to an offline map has been set up, it needs to be displayed. You can display the offline map by creating an instance of the MapDisplayDataProvider protocol using the OfflineTileDataProviderFactory.createOfflineTileDataProvider(store:) method. This is a part of the TomTomSDKMapDisplayDataProviderOffline module. Use the newly created NDSStore object, from the Quickstart guide, as a parameter.

1let store = try NDSStore(configuration: NDSStoreConfiguration(
2    mapDataPath: "mapDataPath",
3    keystorePath: "keystorePath"
4))
5offlineDataProvider = try? OfflineTileDataProviderFactory.createOfflineTileDataProvider(store: store)

There are two options to style the offline map:

Style the map using the style provider included in the SDK. The TomTomSDKStyleProviderOffline module contains the OfflineStyleURLProvider class from which you can access onboard resources.
```
1let mainStyle: StyleDefinition = .custom(
2    style: OfflineStyleURLProvider.browsingLightStyleURL,
3    layerMapping: OfflineStyleURLProvider.layerMappingURL
4)
5let darkStyle: StyleDefinition = .custom(
6    style: OfflineStyleURLProvider.browsingDarkStyleURL,
7    layerMapping: OfflineStyleURLProvider.layerMappingURL
8)
9offlineStyleContainer = StyleContainer(
10    mainStyle: mainStyle,
11    darkStyle: darkStyle,
12    bundle: OfflineStyleURLProvider.resourcesBundle!
13)
```
Create your own resources and put them into a separate bundle. This bundle should contain:
- mapbox style file for different modes
- sprite and sprite atlasses
- layer mapping JSON file

Create a StyleContainer with URLs pointing to the local resources and bundle. Include the fonts used by the Mapbox style file in the main bundle.

The following is an example of a resource bundle directory structure:

1styles
2│
3└─onboard_layer_mapping.json
4│
5└─dark
6│  │
7│  └─sprite@2x.json
8│  │
9│  └─sprite@2x.png
10│  │
11│  └─style-browsing.json
12│  │
13│  └─style-driving.json
14│
15└─light
16  │
17  └─sprite@2x.json
18  │
19  └─sprite@2x.png
20  │
21  └─style-browsing.json
22  │
23  └─style-driving.json

Once you have an onboard data provider and style container, create a TomTomMapView object with MapOptions. Note, the option to cache is not required for offline as the map is stored on the device.

1let mapOptions = MapOptions(
2    mapStyle: offlineStyleContainer,
3    apiKey: "YOUR_API_KEY",
4    cacheConfiguration: nil,
5    styleMode: .main,
6    dataProviders: [offlineDataProvider]
7)
8mapView = MapView(mapOptions: mapOptions)

Next steps

Since you have learned about displaying an offline map, here are recommendations for the next steps:

Offline map setup: Learn more about advanced configuration options and customization possibilities for offline maps.
Manual map management: Explore how to manually manage map regions, including downloading, updating, and removing specific regions.
Adding traffic support: Learn more about how to include traffic information.

By diving deeper into these areas, you can unlock the full potential of offline maps in your application.