Customize Map Design

この章では地図のデザインをカスタマイズする方法について紹介します。

カスタマイズ可能なデザイン

地図のデザインはカスタマイズが可能です。カスタマイズ可能なデザインは以下の通りです。

• 住宅地図モード
• 地図のスタイル
• 自車マークのデザイン
• ルート線のデザイン

スタイル変更

Map.changeStyle()を実行することで地図デザインを変更することができます。

以下の3つのスタイルから選択できます。

スタイル名	表示	特徴
DEFAULT		細街路の色を抑えるなど、検索結果や重畳する情報が見やすい地図スタイル
NAVIGATION		走行中に必要な道路の情報を強調した、ナビゲーション案内中に適した地図スタイル
CROSSING		交差点案内用に、交差点の道路形状を見やすくチューニングした地図スタイル

地図スタイルを誘導地図に切り替えるコードは以下の通りになります。

map.changeStyle(Map.MapStyle.NAVIGATION);

地図レイヤーに関して

地図スタイルは以下のようなレイヤー構成になっており、ルート線や渋滞線のレイヤーは『道路ネットワーク』の上に挿入されます。

ルート線の描画位置を変更したい等の地図カスタマイズに関してはご問い合わせください。

地図レイヤーの操作

Map.setLayerVisible()により特定の地図レイヤーの表示/非表示を切り替えることができます。

サンプルコードは以下の通りです。

// 高速道路のIC名を非表示
Map.setLayerVisible("highway-exit-labels",false)

// 地図の信号機アイコンを非表示
Map.setLayerVisible("traffic-label",false)

// ブランドロゴを非表示
Map.setLayerVisible("brand_logo",false)

その他のレイヤー名に関してはお問合せください

住宅地図モード

地図上に建物名称や居住者名、番地などが詳しく表示されますが、これらのラベルは地図の回転に追従せず常に北を上にした情報になります。
住宅地図モード中はどのスタイルでも指定したズームレベルよりも詳細な範囲で自動で住宅地図が表示され、住宅地図モードを終了するか後述するスタイル変更を行うまで継続します。

住宅地図モードを開始するコードは以下の通りです。

Map.beginHousingMapDisplay(15, new Map.ShowHousingMapCompleteListener() {
    @Override
    public void onComplete(ErrorCode errorCode) {
    }
});

この例ではズームレベル15以上の場合に自動で住宅地図が表示されるようになります。

住宅地図モードを終了するコードは以下の通りです。

//  住宅地図の表示を解除
map.endHousingMapDisplay();

自車マークのデザイン変更

CarMarkerDesignを生成しMap.setCarMarkerDesign()に渡すことで自車マークのデザインを変更することができます。

CarMarkerDesign carMarkerDesign = new CarMarkerDesign(getApplicationContext());
carMarkerDesign.setBearingImage(AppCompatResources.getDrawable(getApplicationContext(), R.drawable.my_car_mark));　// 自車マークのリソース

map.setCarMarkerDesign(carMarkerDesign);

自車マークは以下の画像で構成されています。

• TopImage：自車マークの上部画像
• BearingImage：自車マークの中央画像
• ShadowImage：自車マークの背景画像

画像はTop＞Bearing＞Shadowの順に重ね合わせて表示されます。それぞれCarMarkerDesign.setTopImage(), setBearingImage(), setShadowImage()で設定を行なって下さい。

ルート線のデザイン変更

Navi.setRouteDesign()によりNaviにattachされている全ての地図上に描画されるルート線のデザインを変更することができます。

ルート線の種類

状況に応じてルート線は複数のデザインを持っています。デザインを変更可能なルート線の種類は以下の通りです。

• 案内中（Navi.startGuidance()後）ルート
• 案内開始（Navi.startGuidance()）前の複数ルート探索結果で、選択されているルート
• 案内開始（Navi.startGuidance()）前の複数ルート探索結果で、選択されていないルート
• 新ルート（ルートアドバイザー、ルート比較）
• 分岐点から合流点までの新ルート（ルートアドバイザー）
• 分岐点から合流点までの旧ルート（ルートアドバイザー）
• 現在の区間（出発地から目的地までを立寄地で区切った区間）

案内中ルートと新ルートのデザイン例
この例では白い縞模様のルートが新ルートです。

一般道、有料道それぞれで別のデザインを設定することができます。

設定可能なデザイン

ルート線のデザインは

• ルート本体用
• ルート内側の縁取り用
• ルート外側の縁取り用

に分かれており、それぞれに色、太さを設定することが可能です。

SDKでは指定された色、太さの線を外側縁取り用＞内側縁取り用＞本体用＞の順番で描画する実装になっているため、内側の縁取り用の線を本体用の線より太くする必要があり、また外側の縁取り用の線を内側の縁取り用の線より太くする必要があります。

例えば有料道の案内中ルート本体の色、太さを変更するサンプルコードは以下の通りです。

RouteDesign tollDesign = new RouteDesign();
tollDesign.setRouteBodyColor(255, 0, 0);　// red
tollDesign.setRouteBodyWidth(10);
tollDesign.setBorder1Color(0, 255, 0); // green
tollDesign.setBorder1Width(15);
tollDesign.setBorder2Color(0, 0, 255); // blue
tollDesign.setBorder2Width(20);

Navi.getInstance().setRouteDesign(Common.TollRoadKind.TOLL, Map.RouteLineKind.GUIDANCE, tollDesign);

実線、破線

以下のルート線は実線、破線を指定することが可能で、破線はそのパターンを設定することもできます。

• 新ルート（ルートアドバイザー、ルート比較）
• 分岐点から合流点までの新ルート（ルートアドバイザー）

破線のパターンは破線を形成する交互の破線と間隔の長さを設定します。

RouteDesign tollDesign = new RouteDesign();
tollDesign.setRouteBodyColor(100, 150, 200);
tollDesign.setRouteBodyWidth(10);
// 破線
tollDesign.setRouteBodyLineType(RouteDesign.LineType.DASHED);
// 破線のパターン（Listで破線の長さと破線の間隔の長さを指定）
List<Double> dashArray = new ArrayList<>(Arrays.asList(1.0, 1.0));
tollDesign.setDashArray(dashArray);

Navi.getInstance().setRouteDesign(Common.TollRoadKind.TOLL, Map.RouteLineKind.NEW_ROUTE, tollDesign);

通過速度別のデザイン

渋滞や事故等によりルートの区間毎に通過に掛かる時間が異なりますが、 案内開始前のルート線ではその通過速度別のデザインを設定することができます。通過速度の種類は以下の通りです。

• 通常
• 低速
• ごく低速

通過速度通常のデザインは通常のルート線のデザインが用いられますが、低速、ごく低速の区間に関してはデザインを変更することが可能です。

ルート消去線（交差点拡大図）のデザイン

交差点拡大図では図内の通過したルートはルート消去線によって上書きされます。

このルート消去線のデザインも変更可能です。

設定可能なデザイン一覧

ルート種別毎の変更可能なデザインは以下の通りです。