leafletでMapbox(とかいろいろな地図)を使う

Mapboxの地図は実際カッコイイ。

Mapboxってなんなのか全貌をまったく理解できてないんですが、地図サービスです。スーパーマリオ風世界地図とかデススター風地図とかをつくったりできます。すごいです。

これをleaflet(Rのパッケージの方)で使う方法ないのかなーと自作パッケージをつくる方法を模索してたんですが、実はMapboxの地図を埋め込むだけならleafletの機能でできることを知ったのでメモ。

leaflet-providersプラグイン

leaflet(元のJavascriptのライブラリの方)には、プラグインという仕組みがあります。leaflet自体はシンプルなライブラリですが、これによっていろいろ機能を追加することができる、とのことです(あんまり理解してない)。

Plugins - Leaflet - a JavaScript library for interactive maps

このひとつが、さまざまな提供元のマップを使えるようにするleaflet-providersです。

addProviderTiles()

leaflet-providersはRのパッケージの方のleafletにも取り込まれています。

Alternatively, many popular free third-party basemaps can be added using the addProviderTiles() function, which is implemented using the leaflet-providers plugin.
(https://rstudio.github.io/leaflet/basemaps.html)

addProviderTiles()を使うとサードパーティーの地図を表示できます。例えば、StamenのTonerマップを表示するにはこんな感じです(すみません、ここに貼った地図はただのハリボテ画像です…)

leaflet() %>%
  addProviderTiles("Stamen.Toner") %>%
  setView(lng = 139.69, lat = 35.69, zoom = 4)

f:id:yutannihilation:20151023205228p:plain:w400

使えるサードパーティー地図の一覧は、以下の公式サイトでチェックできます。けっこういっぱいあって素敵です。公式ドキュメントにもあるようにoptions = providerTileOptions(opacity = 0.35)というオプションで半透明にした地図を重ね合わせたりするだけでけっこういい感じのオリジナル地図がつくれそうです。

Leaflet Provider Demo

Mapboxの地図を使う

上のpreviewに載っていない地図もいくつか使うことができます。

Mapboxの地図をつくる

まず、なにはともあれMapboxで自分の地図(project)を作ります。はじめての場合は↓のガイドが参考になるでしょう。

Make your first map | Mapbox

埋め込む際には「Map ID」という項目を使うのでメモります。

leaflet-providerでMapboxの地図を呼び出す

やり方は、READMEのProviders requiring registrationという項目に記載があります。HERE、Mapbox、Esri/ArcGISの3つがあります。Mapboxの場合は、

L.tileLayer.provider('MapBox', {id: 'ID', accessToken: 'ACCESS_TOKEN'}).addTo(map);

と書いてあります。これをRのコードに直すと、

leaflet() %>% 
  addProviderTiles(
    'MapBox',
    options = providerTileOptions(
      id = 'ID',
      accessToken = 'アクセストークン'
    )
  )

となります。

...と言いたいところなんですが、Rのパッケージが使っているleaflet-providersのバージョンが古くて、指定の仕方が少し異なります。

L.tileLayer.provider('MapBox.YourName.MyMap');

(https://github.com/rstudio/leaflet/tree/3b4d8a38654d58cc86875c882f169d6626944b00/inst/htmlwidgets/lib/leaflet-providers#providers-requiring-registration)

上でメモった「Map ID」がYourName.MyMapの部分です。なので、以下のようにやるとできます。(アクセストークンなしでいいのはなぜなのか分からない...)

leaflet() %>%
  addProviderTiles("MapBox.マップID")

結果:RPubs - Embed Mapbox

できた!!

注意点

見て分かるように、オーバーレイしていたグリッドとかマーカーとかは表示されません。あくまでleafletから参照できるのは地図画像のみです。

その辺もやろうと思ったら、やっぱりmapbox.jsバインディングを自分で作る必要がありそうです。やらないけど。