# Create styles with the HERE Style Editor

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

> #### Note
>
> The web-based unified [HERE Style Editor](https://platform.here.com/style-editor/) is available on the HERE platform. It is compatible with the [Maps API for JavaScript (JSAPI)](/maps-api-for-js/page/maps-api-for-javascript-api-reference-3-2-index) and the HERE SDK since version 4.12.1.0. Custom map styles that have been made with the legacy desktop editor need to be migrated to the new HERE Style Editor format. [Get in touch](https://www.here.com/contact) with your HERE representative to discuss potential style updates from legacy versions.

<Image align="center" caption="Screenshot: The HERE Style Editor showing a custom map configuration." src="https://files.readme.io/662ec07f51478580aa8afedae483e5af0dc5e8de5d7fb9bdf04948a3e55a377c-here_style_editor.jpg" />

Take a look at the [user guide](https://www.here.com/docs/bundle/style-editor-user-guide/page/README.html) of the HERE Style Editor for more information. The latest updates can be found in this [blog post](https://www.here.com/learn/blog/here-style-editor-v1-4-0-multiple-feature-updates-now-available).

In order to use the HERE Style Editor, perform the following steps:

1. Sign-up for an account on the [HERE platform](https://platform.here.com/sign-up), if not done already.
2. Confirm and finalize your account generation by providing addition details.
3. Select **HERE Style Editor** from the **Launcher** menu on your landing page on the HERE platform or use this [direct link](https://platform.here.com/style-editor/) after signing in.
4. Start utilizing the HERE Style Editor by selecting one of the existing base styles you want to customize.
5. Apply your customizations to the map style.
6. Finalize your work by exporting the customized map style to your local computer via **File** -> **Export Map Style** and load it to your application as described below.

Starting with HERE Style Editor v1.13.0, only zipped archives (`.tar.gz`) are exported. These archives include POI categories and the JSON style files. When loading a custom style using `MapScene.loadScene(...)`, the HERE SDK supports specifying the `configurationFile` pointing to a JSON file or to a zipped archive.

* When using [HERE Style Editor](https://platform.here.com/style-editor/) 1.13.0 or newer:
* Extract the resulting `tar.gz` archive and repackage it into a ZIP archive. Copy the resulting ZIP file into the "assets" directory of your project.
* Full path example: `app/src/main/assets/my-custom-dark-style-neon-rds.zip`
* When using an older HERE Style Editor version:
* Copy the resulting JSON file into the "assets" directory of your project.
* Full path example: `app/src/main/assets/my-custom-dark-style-neon-rds.json`

Adjust file name and path as appropriate for your project.

If not already added, you can add an "asset" folder via Android Studio (Right-click on the project: **New** -> **Folder** -> **Assets Folder**). You can also manually generate the folder.

Load the style into a map scene as follows:

```java Java
private void loadMapStyle() {
    // Place the style content into the "assets" directory.

    // When using HERE Style Editor >= v1.13.0:
    String fileName = "my-custom-dark-style-neon-rds.zip";

    // When using HERE Style Editor < v1.13.0:
    // String fileName = "my-custom-dark-style-neon-rds.json";

    AssetManager assetManager = context.getAssets();
    try {
        assetManager.open(fileName);
    } catch (IOException e) {
        Log.e("CustomMapStylesExample", "Error: Map style not found!");
        return;
    }

    mapView.getMapScene().loadScene("" + fileName, new MapScene.LoadSceneCallback() {
        @Override
        public void onLoadScene(@Nullable MapError mapError) {
            if (mapError == null) {
                // Scene loaded.
            } else {
                Log.d("CustomMapStylesExample", "onLoadScene failed: " + mapError.toString());
            }
        }
    });
}
```

```kotlin Kotlin
private fun loadMapStyle() {
    // Place the style content into the "assets" directory.

    // When using HERE Style Editor >= v1.13.0:
    val fileName = "my-custom-dark-style-neon-rds.zip"

    // When using HERE Style Editor < v1.13.0:
    // val fileName = "my-custom-dark-style-neon-rds.json"

    val assetManager = context.assets
    try {
        assetManager.open(fileName)
    } catch (e: IOException) {
        Log.e(TAG, "Error: Map style not found!")
        return
    }

    mapView.mapScene.loadScene("" + fileName) { mapError ->
        if (mapError == null) {
            // Scene loaded.
        } else {
            Log.d(TAG, "onLoadScene failed: $mapError")
        }
    }
}
```

In the above snippet, we use Android's `AssetManager` to verify that the `*.json` / `*.zip` file exists at the expected location.

<Image align="center" caption="Screenshot: Another example for a custom map style configuration." src="https://files.readme.io/9869e4577d5b0a79cf047736d09638c3259769ea155bc001cc9e9e9baff1e311-custom_style_app.jpg" />

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.

<Image align="center" caption="A collection of screenshots showing a variety of custom map style configurations." src="https://files.readme.io/ba2a3b2afe26417df90932890d2881535bcaf8a9a1e68cf811b8a086078275e0-style_examples.jpg" />

Note that when you are doing local changes on the JSON / ZIP style file archive you should consider to call `mapScene.reloadScene()` to ensure the entire scene is reloaded again without using any cached data.

Learn more in this blog post on how to [create custom map designs with the HERE Style Editor](https://www.here.com/learn/blog/create-custom-map-designs-with-the-here-style-editor).
More blog posts on the style editor can be found [here](https://www.here.com/site-search?query=style%20editor).

### Color vision deficiency view

You may enable the color vision deficiency view to try out how your custom map style would look like for people with color vision issues. The HERE Style Editor offers a switch for this.

The available color vision simulations are:

Protanopia
Deuteranopia
Tritanopia

You can see examples of this [here](https://www.here.com/docs/bundle/style-editor-user-guide/page/topics/mapview-controls.html#color-vision-deficiency-view).

## Try the example app

The code snippets mentioned above are available in our "CustomMapStyles" example app, provided in both [Java](https://github.com/heremaps/here-sdk-examples/tree/master/examples/latest/navigate/android/Java/CustomMapStyles) and [Kotlin](https://github.com/heremaps/here-sdk-examples/tree/master/examples/latest/navigate/android/Kotlin/CustomMapStylesKotlin). You can find the example app on [GitHub](https://github.com/heremaps/here-sdk-examples) for your preferred platform.