Custom Map Styles

The HERE SDK for iOS provides a flexible solution to customize the map by loading custom map schemes.

If you are looking for predefined map styles, see the Quick Start guide for an introduction. The HERE SDK already includes a set of pre-configured map styles such as .normalDay or .satellite.

Create and Load Custom Map Styles

The most flexible solution to customize the map is to create your own map styles using a configuration file generated with the WYSIWYG HERE Style Editor.

As soon as you are satisfied with your custom map style, export it via File -> Export -> Here Rendering Engine Configuration. Please unzip the resulting file. You will find a few JSON files.

Generate a new folder via Xcode's Project navigator. Copy all JSON files into that directory, for example, with drag & drop. Or completely drag & drop a new folder including all contents into your project.

The main style file always ends with *.scene.json.

Load the style into a map scene as follows:

private func loadCustomMapStyle() {
    let bundle = Bundle(for: ViewController.self)
    // Adjust file name and path as appropriate for your project.
    let jsonResourceUrl = bundle.url(forResource: "omv-traffic-traffic-normal-night.scene",
                                     withExtension: "json",
                                     subdirectory: "omv")
    guard let jsonResourceString = jsonResourceUrl?.path else {
        print("Error: Map style not found!")
        return
    }

    print(jsonResourceString)

    // Load the map scene using the JSON resource.
    mapView.mapScene.loadScene(fromFile: jsonResourceString, completion: onLoadScene)
}

// Completion handler when loading a map scene.
private func onLoadScene(mapError: MapError?) {
    guard mapError == nil else {
        print("Error: Map scene not loaded, \(String(describing: mapError))")
        return
    }
}

In the above snippet, we verify that the *.scene.json file exists at the expected location. You only have to load this file. From there, the HERE SDK will find the other files - as exported from the editor. Make sure that all style files are kept together at the same folder level. *.scene.json is the main file that includes references to the other files.

Using custom map styles can be very effective to differentiate your app from other map applications. In addition, it is possible to change map styles on-the-fly, for example, to shift the user's attention to certain map elements based on the current state of your app.