Try #003 – LeafletとCARTOを組み合わせてみた

By | 2016年12月17日

 

try_003_05

 

この記事は、「FOSS4G Advent Calendar 2016」の17日目の記事です。
今回はLeafletとCARTOを組み合わせてみようと思います。Web上に地図や地物を表示するコンテンツを手軽に公開したい場合、CARTOのサービスを利用するのはとても効果的です。

例えば
・独自UIでコンテンツを作りたい
・フロントエンド側で表示するには重すぎるデータがある
・できるだけサーバーレスで構築したい
などの場合

フロントエンド側をLeafletで、そしてバックエンド側をCARTOで実装する方法があります。

実は今年の3月に参加したハッカソンで構築したものがありまして、今回はそれを元としてFOSS4G 2016 TOKYOのハンズオンで使用した室蘭市さんのデータに置き換えてトライしてみようと思います。

 

まずは通常の使い方でCARTOのサービス内でMAPを作成します。表示したいデータをアップロードしてMAPに追加します。その際にレイヤ設定もしておきます。
設定が終わったら、右上にあるPUBLISHボタンを押します。
try_003_01

 

モーダルが開いたら、右側にあるCartoDB.jsの項目にあるJSONのURLをコピーしておきます。
try_003_02

 

これでバックエンド側の、CARTOの構築は終わりです。すごくシンプルです。

次に、フロントエンド側をLeafletで構築していきます。

index.html

HTMLとCSSは、いつものLeafletの流れと一緒です。ただ、HTMLについては下記の記述のようにLeafletのライブラリではなくCARTO.js(CartoDB.js)を読み込みます。
Leafletの基本機能はCARTO.jsに内包されているためLeafletのライブラリは読み込む必要がありません。
※LeafletとCARTOのライブラリの両方を読み込むと競合して動かなくなると思います。

 

ここから本題のJS部分の説明をしていこうと思います。

script.js

 

前半部分は、通常通りの背景地図読み込みや地図の初期表示設定を記述しています。

 

次に、CARTOのデータを読み込む部分です。
・cartodb.createLayerの引数(layerUrl変数)に、さっきコピーしたCARTOのJSONURLを記述
・.done(function(layer)〜で「ポイント選択時に画面中央寄せ」と「レイヤを各変数に割り当て」を実装

 

ついでにスケールバーも表示しておきます。

 

最後に、メニューでレイヤON/OFFを切り替える部分の実装です。
・sublayers[0].show();で指定レイヤ表示
・sublayers[0].hide();で指定レイヤ非表示

あと、試しに津波区域10m以上のみ表示する機能も実装してみました。
・sublayers[0].setSQL(SQL文);でレイヤに対してSQLの実行が可能

 

完成するとこんな感じで表示されます。津波区域のポリゴンは、データが結構数細かいのですがバックエンド側でCARTOを利用しているのでサクサク描画されます。

example

 

独自UIで大きなデータを扱いたい場合や、できるだけサーバーレスでWebGISを実現したい場合などはLeafletとCARTOを組み合わせるのもいいかもしれません。