🐡Mapboxのスタイルを体験するOttyLab・2023/04/12に公開ツイートJavaScript#gisMapboxtechはじめにこの記事ではMapboxにおけるスタイルの挙動を確認します。JSを使って地図を表示し、どのようにスタイルを使うのかを見ていきます。webpage)を参考にまずは地図を表示してみましょう。以下のライブラリを読み込みます。src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>CSSを設定します。}</style>次に地図を表示する場所を作ります。id="map"></div>JavaScriptのコードは以下のようになります。アクセストークンをmapboxgl.accessTokenに設定します。次にMapクラスのコンストラクタでオプションを設定します。containerで地図を表示するHTML要素、styleで使用するスタイルを指定します。初期位置設定用にcenterやzoomが使用できます。9,});結果は以下のとおりです。スタイルとはMapboxのスタイルを使いこなす上で欠かせないのがソースとレイヤーの理解です。ソースは地図の元データになります。v8というベクタータイルセットには地図の描画に必要なデータが詰め込まれています。データは種類ごとに分類されており、例えばroadというデータには道路や線路のデータが入っています。レイヤーはソースのデータをどのように描画するかを指定します。様々なデータが含まれています。そこで「幹線道路のデータだけに対して色や太さを作用させる幹線道路のレイヤー」のように表現したいものごとにレイヤーを作成していきます。レイヤーは下から上に重ねていきます。最終的に表示される地図は、すべてのレイヤーが重なった状態を上から見ているものとなります。レイヤーをコードで表現してみるそれでは実際にコードで試してみましょう。以下のようにMapオブジェクトを作成する際に指定していたstyleを削除します。9});次に、Map#addSourceでソースを登録します。引数に任意のソースIDを指定し、第二引数にソースの種類やURLを指定します。'mapbox://mapbox.mapbox-streets-v8'});さらに、そのソースを元にレイヤーを作成します。'Map#addLayer'を呼び出します。ここでsourceは先程登録したソースのID、source-layerはソースの中のデータの種類を指定します。paintはどのように表現するかを指定します。typeとしてlineを指定しているので線が描画されますが、その際の色と幅を指定しています。}});表示してみると、以下のように緑色の道路のみの地図が表示されます。非常に単純な例ですが、ソース、レイヤーの仕組みがご理解いただけたかと思います。スタイルさて、JavaScriptでコードを書けばどんな複雑な地図でも表現できることがわかりました。v12のような複雑な地図をすべてJavaScriptのコードで表現するのは非常に手間がかかることが予想されます。v12をもとに更にカスタマイズを加えていこうと思うと、その都度コードのコピーが必要となり非効率です。そこで、コードで記述したもとと同じ内容をJSONで宣言的に記述できるようにしたものがスタイルです。以下のように記述すると先ほどと同じ地図が表示されます。URLという形で読み込むのが一般的です。最初に地図を表示したときに用いた以下のような記述方法です。レイヤーをスタイルとして定義することで、処理(コード)から地図表現(データ)を分離することができます。これにより、メンテナンス性の向上のみならず、マルチプラットフォームで同じスタイルを使用できる、デザイナーとエンジニアが分業できるなどのメリットが生まれます。HTML・JavaScriptとCSSを分離したのと同じような発想です。Expressions上記の例では線の色、太さを決め打ちで設定していました。Expressionsを使うと柔軟な設定ができます。...]という形式を取ります。配列の要素0が命令、それ以降がパラメータです。Lisp言語のS式のような感じです。ソースのパラメータのデータを取得する命令、値に応じて処理を変える分岐命令、ズームレベルに応じた線形補間、数学の関数など様々な命令がサポートされています。これにより、値に応じて色を変える、ズームレベルに応じて幅を変えるなど、動的なスタイリングが可能となります。Studioによるスタイルの編集JSONで記述することでスタイルを作成・編集することができることはわかりました。複雑な地図のJSONをテキストエディタで編集しつつ結果を確認するのは、やや重労働です。Webブラウザ上のGUIでスタイルを直感的に編集できるツールで、編集結果はそのままMapboxのサーバにホストされます。自前でスタイルをホストするサーバを準備する必要なく、mapbox://でアクセス可能なスタイルが作成できます。style」ボタンをクリックすることで新しいスタイルを作成できます。最初にベースとなる地図を選択します。自分でゼロから作りたいときにはBlankを使用しますが、概ねStreetsを編集して使うユースケースが多いでしょう。ここではStreetsをベースに進めます。編集可能な状態になると3Dの地球が表示されます。v12ではGlobe(3Dの地球)がデフォルトになっています。そのため、ズームレベルの小さい状態ではこのように3Dの地球が表示されます。今回は高速道路の色を赤色に変えようと思います。東京周辺をズームし、高速道路をクリックします。すると、そのフィーチャー(オブジェクト)がどのレイヤーによって表現されているかがコンテクストメニューで表示されます。road-motorway-trunkをクリックすると、以下のようにそのレイヤーが選択された状態になります。ここで色などを編集します。今回は赤色に設定するので以下のようにします。変更は即座に地図上に反映されます。編集が完了したら「Publish...」ボタンをクリックしてしProductionモードに変更を反映します。編集中のスタイルはDraftと呼ばれる状態で、開発段階で利用するモードです。JS等で使用できますが、レートリミット等の制限が厳しいため、製品版では必ずProductionを使用します。DraftをPublishするまでは変更がProductionには反映されないため、一度リリースしたアプリケーションのスタイルを変更する際にも、変更中のスタイルが製品版で表示されてしまうことがありません。開発が完了し、Publishすることで初めて製品版にも反映されます。スタイルのURLは「Share...」ボタンから確認できます。URLのmapbox://で始まるURLをコピーします。このURLをコードの中で以下のように使用します。9});このように表示されます。地図を表示した後にスタイルを変更することもできます。styleがわかりやすいので見てみましょう。左上のラジオボタンを選択することでスタイルを変更できます。スタイルはMap#setStyleを使用することで簡単に変更できます。Exampleでは以下の部分です。layerId);};layerId変数にはラジオボタンで選択したsatellite-streets-v12のようなスタイル名が格納されており、このコードでURLが生成されます。そのURLをsetStyleの引数とすることでスタイルが動的に変更されます。まとめMapboxにおけるスタイルはソースとレイヤーを宣言的に表現したものです。そのため、スタイルの本質はデータの指定とレイヤーの作成です。レイヤーはExpressionsをサポートし、非常に柔軟な表現ができます。地図はレイヤーを重ねたものとして表現されるため、必要に応じてレイヤーの重ね順の変更や削除も可能です。v12のようなスタイルにおいても例外ではありません。Mapboxを使うことで地図を完全にコントロールすることができます。最初とっつきにくさはあるものの、慣れてしまえばその表現力の高さは手放せないものになると思います。GitHubで編集を提案ツイートOttyLabマップボックス・ジャパン合同会社Publicationマップボックス・ジャパン合同会社は、地図情報サービスの開発プラットフォームにおけるリーディングカンパニーです。ユーザー企業や代理店企業との共創により、地図を活用した新たな生活体験や業務改善ソリューションを生み出すことで、社会と暮らしの進化を支えています。Studioによるスタイルの編集スタイルを動的に変更まとめZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。