Mapboxウェブサイトでの地図表示

OSMを使っていると、ウェブサイトにその地図を表示したくなることがあると思います。その時に具体的に何をしたいかによって、表示の方法にはいくつか選択肢があります。この章と次の章では、ウェブ地図を用意するためによく使われる方法についていくつか紹介します。

シンプルさと多機能さは、常にどちらかがトレードオフになります。この章で学ぶ方法はシンプルですが、地図の表示方法を無制限にすべてコントロールできる、というわけではありません。また、次の章ではTileMillという非常に強力なソフトウェアを紹介しますが、そのかわり使いこなすにはかなりの熟練が必要になります。

ウェブ地図の考え方

ウェブ地図における最も基本的な考え方は タイル と呼ばれます。この章ではさまざまな方法でタイルについての説明を行いますので、それがどのようなことを意味しているのかは十分に理解するようにしてください。"スリッピーな"(訳注: 滑らかに動かせる)ウェブ地図は、256x256ピクセルの画像を多数作成し、それらをつなぎ合わせることで成り立っています。

こうした地図タイルは、さまざまな ズームレベル ごとに作成されます。ズームレベルは、地図を拡大縮小する際のそれぞれのズームによって異なる縮尺を表現します。逆に言えば、この仕組があるからこそ、地図を拡大縮小させることが可能になっているのです。地図を閲覧する際に表示する領域を移動させると、ズームレベルは変わりませんが、仕組みとしては同じく別の画像ファイルが読み込まれ、シームレスな閲覧ができるようになっています。

タイルベースの仕組みを使ったウェブ地図は TMS 、あるいは Tile Map Service と呼ばれます。

タイルをオンライン上に格納するにはいくつかの方法がありますが、MapBoxのようなオンラインホスティングサービスを利用する方法が最も簡単です。MapBoxではアカウントを作成し、作成したタイルをアップロードすることで、あなたのウェブサイトへ簡単に埋め込むことができます。この章では、MapBoxの初歩的な使い方と、ウェブページへの簡単な埋め込み方法について紹介します。

MapBoxの使い方

MapBoxは、ウェブサイトに自分でデザインした地図を可能な限り簡単にデザインし、表示するために作られたプラットフォームです。

• MapBoxの利用を始めるには、まず MapBoxのウェブサイト を表示し、"Sign Up"をクリックします。アカウント登録画面に、いくつか異なる料金プランが表示されます。ファイルを格納できる容量と、地図の閲覧の最大数により必要な料金が異なってきます。ひとまず最初のところは、無料アカウントで十分です。無料アカウントを選択して、作業を始めましょう。

• アカウントを作成する際は、利用規約(Term of Service)にある文言に同意する必要があります。そのため、個人的なデータ利用や、センシティブなデータは利用することができません。文言は以下のとおりです。 “MapBoxに対し、サービス提供を目的として、派生作品の利用、複製、キャッシュ、公開、表示、配布、変更、および作成について非独占的な、ワールドワイドかつ無償で、譲渡可能な権利およびライセンス(サブライセンス権を含む)を許可し、また、上記の"契約コンテンツ"を格納し、他者にその利用を許可する("コンテンツライセンス”)"

• 無料プランを選択し、MapBoxからのメールに記載されているURLをクリックすると、アカウントの認証が完了し、地図を作成できるようになります。

• MapBoxにログインし、"New Map"をクリックして地図を作成しましょう。

訳注: 2014年1月現在、MapBoxの操作画面は大きく変更されています。ただし、基本的な操作の流れは一緒です。

• この画面から、地図を作成し、そのスタイルを変更することが可能です。

• 試してみたい地域に表示を移動させ、左側のパネルから設定を変更します。道路やエリア、湖などの水系部分、背景色となる地面の色などを、それぞれの項目の隣にあるカラー変更パネルから変えることができます。

• 左側の操作パネルをいくつか触ってみてください。"Info"タブでは、あなたの地図自体についての設定も変更できます。

• markerタブでは、地図上にマーカーを配置することができます。地図上にマーカーを配置するには"Place"をクリックした後、地図上のどこかをもう一度クリックしてください。

• 左側の画像から地図の設定を変更すると、そのたびに地図全体が再読み込みされ、設定が反映されます。地図のスタイル変更に関して、詳しい設定方法はMapBoxのヘルプページを参照してください。
• “Save"ボタンを押すと、現在の設定を保存することができます。

ウェブサイトへの地図追加

• ウェブサイトへ地図を埋め込むには、"Embed"をクリックして、サイト埋め込み用のリンクを取得してください。リンクをあなたのサイトのHTMLへコピペすると、あなたのサイト上でその地図が表示されます。

サイトが一般的なCMSで構築されている場合、MapBoxプラグインが用意されていればサイトへの地図埋め込みはとても簡単です。

WordPressでのMapBox利用

WordPressでは、MapBox地図の埋め込みはとても簡単です。単純に、MapBoxプラグインを検索し、インストールしてください。プラグインはこちらに詳細が記載されています。

このプラグインでは、WordPressを使ったHTML埋め込みを単純なコピー＆ペーストで行うことができ、投稿に対してとても簡単に地図を埋め込むことが可能です。

DrupalでのMapBox利用

DrupalでMapBox地図を追加するには、MapBoxの埋め込みURLを直接記述することが必要です。ただし、編集の際には"完全なHTML"、あるいは"拡張HTML"を指定している必要があります。それ以外の様式では、<iframe>の利用が許可されない可能性が高いです。より詳しい情報は、MapBoxの DrupalでMapBoxを使う ドキュメントを参照してください。

まとめ

以上で、地図の表示カスタマイズと、ウェブサイトへの埋め込み方法は終わりです。 次の章では 複雑な地図表示を行うための強力なデスクトップアプリケーション、TileMillを紹介します。