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担当者にご相談ください。

Screenshot: The HERE Style Editor showing a custom map configuration.

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

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

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

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

HERE Style Editor 1.13.0以降を使用している場合は、次の手順を実行します。
生成されたtar.gzアーカイブを抽出し、ZIPアーカイブに再パッケージします。Xcodeのプロジェクトナビゲーターから新しいフォルダーを生成します。ドラッグアンドドロップなどでカスタムスタイル用のZIPファイルをそのディレクトリにコピーします。または、すべてのコンテンツを含む新しいフォルダー全体をプロジェクトにドラッグアンドドロップします。
古いバージョンのHERE Style Editorを使用している場合は、次の手順を実行します。
Xcodeのプロジェクトナビゲーターから新しいフォルダーを生成します。カスタムスタイル用に生成されたJSONファイルをドラッグアンドドロップなどで、そのディレクトリにコピーします。または、すべてのコンテンツを含む新しいフォルダーをプロジェクトに完全にドラッグアンドドロップします。

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

private func loadCustomMapStyle() {
    let styleResourceString = getResourceStringFromBundle(filename: "my-custom-dark-style-neon-rds",
    // When using HERE Style Editor >= v1.13.0:
                                                         type: "zip")
    // When using HERE Style Editor < v1.13.0:
    //                                                   type: "json")

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

private func getResourceStringFromBundle(filename: String, type: String) -> String {
    let bundle = Bundle.main
    guard let resourceUrl = bundle.url(forResource: filename, withExtension: type) else {
        fatalError("Error: Resource not found!")
    }

    return resourceUrl.path
}

// 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
    }
}

上に示したスニペットでは、*.json/*.zipファイルが想定どおりの場所にあります。

Screenshot: Another example for a custom map style configuration.

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

A collection of screenshots showing a variety of custom map style configurations.

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

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

色覚異常ビュー

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

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

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

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

サンプルアプリを試す

上に示したコードスニペットは「CustomMapStyles」サンプルアプリから取得できます。このサンプルアプリは、優先するプラットフォームのGitHubにあります。