Zenn
マップボックス・ジャパン合同会社Publicationへの投稿
🗺️

Mapbox NavigationSDK で作ったナビアプリの地図デザインを変えてみる

Ash
2023/04/11に公開
Kotlin
Mapbox
tech

目標

地図のデザインをカスタマイズできるMapbox Studioで作成したデザインをMapbox Navigation SDKで作成したAndroidナビアプリで利用する方法の紹介です。

事前準備

  1. Mapbox Navigation SDK v2 のBuild
    公式ドキュメントに沿ってアプリケーションを構築してください。

  2. Mapbox Studio でデザイン作成
    Mapbox Studioの操作やデザイン作成に慣れている方は独自のスタイルをデザインしてPublishしてください。
    初心者の方はCartgramを使って簡単にデザインを作成できる方法も併せて紹介します。

地図デザインを利用する

作成したアプリのコードの中に地図のスタイルを指定する箇所があります。

mapboxMap.loadStyleUri(Style.MAPBOX_STREETS)

この指定先をMapbox Studioで作成したStyleの Style URIに変更するだけです。
具体的には下記のように記述します。

mapboxMap.loadStyleUri("mapbox://styles/name/xxxxxxxxxx")

Style URLを作成

手順

  • Mapbox Studioでデザインを作成したら、まずそのデザインを利用できるよう右上にある Publishボタンを押してPublishしてください。
  • PublishでStyleが作成されるため、Publishボタンの左横にあるShareを開いて表示される画面にDeveloper resourcesというのが一番下にあり、ここで利用するアプリ（Web/Android/iOS...）を選択すると、Style URLが自動的に作成されています。


Publishの後にShareを開いた画面

  • 前段”地図デザインを利用する”に記載したloadStyleUri("")の""内に作成されたURLをコピーします。
  • あとはこの状態でBuildすれば、作成したスタイルで地図が表示されるようになります。
  • この後、Style URLは作成してPublishすれば、それでアプリ地図を変更できます。なお、適用されるには少し時間をおく必要があります。


実際変化させたアプリ画面

デザインツール Cartgram

地図デザインといっても、どこから始めればいいかわからない方もいらっしゃるかと思います。
Mapbox Cartogramを使うと簡単にイメージを使ってデザインができます。

  • 左下の小さな画面で、地図のイメージに利用する画像を自分のローカルからSelectしてください。（ドラッグードロップでもOK）
  • 自動的に画像からカラーを地図に適用してくれます。
  • 左下にSelectした画像が表示され小さな○がカラーをピックアップした画像内の要素に配置されているので、この○をドラッグして動かしながら自分なりのカラーを設定してみましょう。


例）私のZennアイコンで作成

  • 最後に画面上部にあるsave styleで自分のアカウントに作成したデザインが登録されMapbox Studioで表示されます。

最後に

冒頭にNavigationSDKと記載しましたが、作成したStyleURLを読み込む仕組みはMapsSDKでも同様です。Mapbox Studioは他のデザインツールと同じような操作感で地図デザインができるため、デザイナーの方にとっても導入ハードルは低いかと思います。今回紹介した仕組みのメリットは、デザイナーはデザインに集中し、エンジニアはコーディングに集中できることにあるかと思います。

マップボックス・ジャパン合同会社
マップボックス・ジャパン合同会社Publication

マップボックス・ジャパン合同会社は、地図情報サービスの開発プラットフォームにおけるリーディングカンパニーです。ユーザー企業や代理店企業との共創により、地図を活用した新たな生活体験や業務改善ソリューションを生み出すことで、社会と暮らしの進化を支えています。

Discussion