Customize Map Design

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

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

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

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

昼夜モード

各地図スタイルやルート線のデザインは昼用と夜用のデザインをもっており、 Map.setDayNightMode()を実行することで昼夜モードを変更することができます。

夜モードに切り替えるコードは以下の通りになります。これにより地図スタイルやルート線のデザインが夜用のデザインになります。

map.setDayNightMode(Map.DayNightMode.NIGHT);

スタイル変更

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

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

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

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

map.changeStyle(Map.MapStyle.NAVIGATION);

地図レイヤーに関して

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

self

地図レイヤーの表示設定

レイヤーの一部はMap.changeLayerVisible()を実行することで表示・非表示を切り替えられます。

例えば、交差点名称と高速道路インターチェンジ、ジャンクションラベルを非表示にするサンプルコードは以下の通りです。

java.util.Map<Map.MapLayer, Boolean> layers = new HashMap<>();
layers.put(Map.MapLayer.HIGHWAY_IC_LABEL, false);
layers.put(Map.MapLayer.HIGHWAY_JCT_LABEL, false);
layers.put(Map.MapLayer.CROSSING_LABEL, false);
map.changeLayerVisible(layers);

未設定

非表示設定後

Note:

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

住宅地図モード

地図上に建物名称や居住者名、番地などが詳しく表示されますが、これらのラベルは地図の回転に追従せず常に北を上にした情報になります。
住宅地図モード中はどのスタイルでも25mスケール以下で自動で住宅地図が表示され、住宅地図モードを終了するまで継続します。

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

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

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

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

住宅地図モードの開始について:

Navi.initialize()にて住宅地図の契約情報を確認しています。
このため、住宅地図モードを開始するのは必ずNavi.initialize()完了以降、もしくはAuthenticationStatusChangedListener.onChange()にて契約情報の通知を受信以降に行なってください。

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

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

self

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

map.changeCarMarkerDesign(carMarkerDesign);

ルート線のデザイン変更

地図上に描画されるルート線のデザインを変更することができます。

ルート種類毎のデザイン変更に使用する関数は以下の通りです。

ルート種別	関数
案内中（`Navi.startGuidance()`後）ルート	`changeGuidanceRouteDesign()`
案内開始前（`Navi.startGuidance()`前）の複数ルート探索結果のルート	`changeCalculateRouteDesign()`
新ルート（ルートアドバイザー、ルート比較）	`changeNewRouteDesign()`
旧ルート（ルートアドバイザー、ルート比較）	`changeOldRouteDesign()`

案内中ルートと新ルートのデザイン例

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

設定可能なデザイン

ルート線のデザインは

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

に分かれており、それぞれ色、太さを設定することが可能です。
色については昼用と夜用を設定することが可能ですが、太さについては昼夜共通です。

太さは地図スケールごとに設定できます。地図は広域になるに従って描画される道路が細くなりますので、狭域は太く、広域は細く設定すると自然なルート線表現となります。

route

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

route_design

Note：

内側縁取り用が外側縁取り用より太い場合、外側縁取り用のルート線は隠れて見えなくなります。
同様に、本体用が縁取り用より太い場合、縁取り用のルート線は隠れて見えなくなります。

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

RouteDesign tollDesign = new RouteDesign();
List<RouteWidth> routeWidthList = new ArrayList<>();
routeWidthList.add(new RouteWidth(9, 20, 22, new ScaleRange(ScaleLevel.SCALE_10m, ScaleLevel.SCALE_100m)));
routeWidthList.add(new RouteWidth(8, 16, 20, new ScaleRange(ScaleLevel.SCALE_200m, ScaleLevel.SCALE_500m)));
routeWidthList.add(new RouteWidth(6, 14, 18, new ScaleRange(ScaleLevel.SCALE_1km, ScaleLevel.SCALE_2km)));
routeWidthList.add(new RouteWidth(5, 12, 14, new ScaleRange(ScaleLevel.SCALE_5km, ScaleLevel.SCALE_500km)));
tollDesign.setWidth(routeWidthList);
tollDesign.setDayColor(new RouteColor(Color.valueOf(Color.RED), Color.valueOf(Color.GREEN), Color.valueOf(Color.BLUE))); // 昼色
tollDesign.setNightColor(new RouteColor(Color.valueOf(Color.LTGRAY), Color.valueOf(Color.DKGRAY), Color.valueOf(Color.GRAY))); // 夜色

map.changeGuidanceRouteDesign(tollRoadKind, tollDesign);

太さだけ初期値に戻したい場合のサンプルコードは以下の通りです。

RouteDesign tollDesign = new RouteDesign();
List<RouteWidth> routeWidthList = new ArrayList<>();
routeWidthList.add(new RouteWidth(8, 18, 20, new ScaleRange(ScaleLevel.SCALE_10m, ScaleLevel.SCALE_100m)));
routeWidthList.add(new RouteWidth(6, 14, 18, new ScaleRange(ScaleLevel.SCALE_200m, ScaleLevel.SCALE_500m)));
routeWidthList.add(new RouteWidth(5, 12, 16, new ScaleRange(ScaleLevel.SCALE_1km, ScaleLevel.SCALE_2km)));
routeWidthList.add(new RouteWidth(4, 9, 11, new ScaleRange(ScaleLevel.SCALE_5km, ScaleLevel.SCALE_500km)));
tollDesign.setWidth(routeWidthList);

map.changeGuidanceRouteDesign(tollRoadKind, tollDesign);

Note：

以下のルート線については、選択ルートと非選択ルートそれぞれに対してデザイン設定が必要です。

案内開始前の複数ルート探索結果のルート
新ルート（ルートアドバイザー、ルート比較）
旧ルート（ルートアドバイザー、ルート比較）

交差点拡大図のルート線のデザイン

Map.changeIntersectionMapRouteDesign()により交差点拡大図のルート線のデザインを変更することができます。

交差点拡大図では図内の通過したルートは通過済みルート色で描画されます。

ルート線のデザインに加えてこの通過済みルート線のデザインも変更可能です。
例えば一般道の交差点拡大図ルートの色、太さを変更するサンプルコードは以下の通りです。

IntersectionMapRouteDesign freeDesign = new IntersectionMapRouteDesign();

freeDesign.setWidth(new RouteWidth(10, 15, 20, null));
freeDesign.setDayColor(new RouteColor(Color.valueOf(Color.RED), Color.valueOf(Color.GREEN), Color.valueOf(Color.BLUE)));
freeDesign.setNightColor(new RouteColor(Color.valueOf(Color.LTGRAY), Color.valueOf(Color.DKGRAY), Color.valueOf(Color.GRAY)));
freeDesign.setPassedDayColor(new RouteColor(Color.valueOf(Color.CYAN), Color.valueOf(Color.MAGENTA), Color.valueOf(Color.YELLOW)));
freeDesign.setPassedNightColor(new RouteColor(Color.valueOf(Color.BLACK), Color.valueOf(Color.WHITE), Color.valueOf(Color.TRANSPARENT)));

map.changeIntersectionMapRouteDesign(Common.TollRoadKind.FREE, freeDesign);

設定可能なデザイン一覧

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

ルート種別	変更可能なデザイン
案内中ルート	太さ、昼色、夜色
案内開始前の複数ルート探索結果のルート	太さ、昼色、夜色（選択ルート/非選択ルートそれぞれ設定）
新ルート（ルートアドバイザー、ルート比較）	太さ、昼色、夜色（選択ルート/非選択ルートそれぞれ設定）
旧ルート（ルートアドバイザー、ルート比較）	太さ、昼色、夜色（選択ルート/非選択ルートそれぞれ設定）
交差点拡大図のルート	太さ、昼色、夜色、通過済み昼色、通過済み夜色

Pioneer Cloud Navigation SDK User Guide for Android (version 2.3.0)