HERE Style Editorを使用してスタイルを作成する

地図の最も柔軟なカスタマイズソリューションは、HERE Style Editorで生成された設定ファイルを使用して、独自のMapSchemeスタイルを作成することです。

注

Web ベースの統合された HERE Style Editor は、HERE プラットフォームで利用できます。これは、Maps API for JavaScript (JSAPI) および バージョン 4.12.1.0 以降の HERE SDK と互換性があります。レガシーのデスクトップエディターで作成されたカスタムマップスタイルは、新しいHERE Style Editor形式に移行する必要があります。レガシーのバージョンからのスタイル更新については、HERE担当者にご相談ください。

詳細については、HERE Style Editor のユーザー ガイドを参照してください。最新の更新情報は、こちらのブログ記事を参照してください。

HERE Style Editor を使用するには次の手順を実行します。

1. まだサインアップしていない場合は、HERE プラットフォームのアカウントにサインアップします。
2. 追加の詳細を入力して、アカウントの生成を確認し確定します。
3. HERE プラットフォームのランディング ページのランチャーのメニューから HERE Style Editor を選択する、またはサインイン後にこちらの直接リンクを使用してください。
4. 既存のベース (base) スタイルからカスタマイズするものを 1 つ選択して、HERE Style Editor の利用を開始します。
5. カスタマイズをマップ スタイルに適用します。
6. [File](ファイル) -> [Export Map Style](マップスタイルをエクスポート) をクリックして、カスタマイズしたマップスタイルをローカルのコンピューターにエクスポートします。その後、以下の説明のとおりにアプリケーションに読み込みます。

HERE Style Editor v1.13.0以降は、ZIPアーカイブ (.tar.gz) のみがエクスポートされます。このアーカイブには、POIカテゴリーとJSON形式のスタイルファイルが含まれます。MapScene.loadScene(...)を使用してカスタムスタイルをロードする場合、HERE SDKでは、configurationFileにJSONファイルまたはZIPアーカイブを指定できます。

• HERE Style Editor 1.13.0以降を使用している場合は、次の手順を実行します。
• 生成されたtar.gzアーカイブを抽出し、ZIPアーカイブに再パッケージします。生成されたZIPファイルをプロジェクトの「assets」ディレクトリにコピーします。
• フルパスの例：app/src/main/assets/my-custom-dark-style-neon-rds.zip
• 古いバージョンのHERE Style Editorを使用している場合は、次の手順を実行します。
• 生成されたJSONファイルをプロジェクトの「assets」ディレクトリにコピーします。
• フルパスの例：app/src/main/assets/my-custom-dark-style-neon-rds.json

ファイル名とパスをプロジェクトに合わせて調整します。

「asset」フォルダーがまだ追加されていない場合は、Android Studioから追加できます (プロジェクトを右クリックして、[New](新規) -> [Folder](フォルダー) ->[Assets Folder](アセットフォルダー) の順に移動します)。フォルダーは手動で生成することもできます。

次のようにスタイルをマップシーンに読み込みます。

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());
            }
        }
    });
}

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")
        }
    }
}

上のスニペットでは、AndroidのAssetManagerを使用して、*.json/*.zipファイルが想定する場所にあることを確認します。

カスタム マップ スタイルを使用することで、アプリを他の地図アプリケーションから非常に効果的に差別化できます。さらに、アプリの現在の状態に基づいてマップ スタイルをすばやく変更し、ユーザーの注意を特定の地図要素に向けさせることなどができます。

スタイルのJSON/ZIPファイルまたはアーカイブに対してローカルで変更を行う場合、mapScene.reloadScene()を呼び出すことを検討してください。そうすることで、キャッシュに保存されたデータは使用されず、シーン全体が再ロードされます。

こちらのブログ記事を参照して、HERE Style Editorを使用してカスタムマップデザインを作成する方法の詳細を確認してください。 Style Editorに関するその他のブログ記事は、こちらを参照してください。

色覚異常ビュー

色覚異常ビューを有効にすると、カスタム地図スタイルが色覚障害を持つユーザーにどのように見えるかを確認できます。HERE Style Editorには、これを切り替えられるスイッチがあります。

次の色覚シミュレーションが用意されています。

第一色覚異常 第二色覚異常 第三色覚異常

このビューの例はこちらを参照してください。

サンプルアプリを試す

上記のコードスニペットは、「CustomMapStyles」サンプルアプリ (Java版およびKotlin版) で使用可能です。このサンプルアプリは、優先するプラットフォームのGitHubにあります。