CodeSandboxにdeck.glのテンプレートを作った

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

モックアップなどを作成するのに便利なCodeSandbox ですが、ユーザーが作成したテンプレートを共有する仕組みがあったので、deck.glのテンプレートを作成してみました。

新しいプロジェクトを作成するさいに「★ Explore Templates」を選択し右上の検索窓で「@shimizu」と検索してもらうとテンプレートが表示されると思います。

OpenStreetMapの地図をベースマップとしたシンプルなテンプレートです。

初期状態で、pubulic/data/pref.geojsonを読み込んで可視化しています。

読み込むGeoJSONデータを変えれば、簡単に可視化地図が作成できます。

（GeoJsonLayerの使い方については12/9の記事で詳しく書く予定です）

サービストークンなども必要ないので、deck.glに触って見たい人は気楽につかってみてください。

ローカルで開発・ビルドする

CodeSandboxはプロジェクトをローカルにダウンロードして開発・ビルドすることができます。

※ローカルで動かすためにはnode.jsとnpmがインストールされている必要があります。

Filesの右にある「↓」ボタンをクリックするとコードをエクスポートできます。

ダウンロードしたzipファイルを解答し、npmを使って必要なモジュールをインストールしてください。

開発サーバーを起動するには「start」を、ビルドを行うには「build」コマンドを実行してください。

ビルドコマンドを実行すると、「build」フォルダが出力されるのでこの中身を任意のWebサーバーやクラウドホスティングサービスにアップロードすることができます。