実践的なデータ可視化

第12章. リーフレットマップテンプレート

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

第7章では、Google My MapsやDatawrapperのような、いくつかの基本的なタイプのイ ンタラクティブ・マップを作成するための、ドラッグ＆ドロップで簡単に学べる ツールをいくつか紹介した。これらのツールプラットフォームの範囲を超えて、よりカスタマイズされた、または高度なマップを作成したい場合、この章では、デスクトップまたはモバイルデバイス上でインタラクティブマップを表示するための強力なオープンソースライブラリであるLeafletをベースとした、いくつかの コードテンプレートを提供する。Leafletについては、第10章でGitHubでコードを編集してホストする方法を学んだときに初めて紹介した。

この章で紹介するリーフレットのマップテンプレートを表 12-1 にまとめる。最初のふたつのテンプレートは初心者向けで、Google Sheets のテーブルからマップデータを取得するためコーディングのスキルは不要だが、GitHub の詳しい説明に従う必要がある。最初のテンプレート"Leaflet Maps with Google Sheets "は、点、折れ線、多角形を自由に組み合わせて表示するのに最適なもので、アイコンや色も自由に選択でき、点データのサマリー表をマップの下に表示するオプションもある。2つ目のテンプレート"Leaflet Storymaps with Google Sheets "は、テキスト、画像、オーディオ、ビデオ、スキャンした地図の背景などをスクロールしながら、点ごとのツアーを案内するのに適している。この2つのコード・テンプレートは、本書の読者のために特別に作成したもので、ホスト・プラットフォームで提供されるマップのギャップを埋めるためのものである。

残りのリーフレットテンプレートは、あなたのコーディングスキルを向上させ、より特殊化したケースに適用するように設計されている。コーディングの経験がなくても、指示に従うことができ、コードに興味がある場合は、"Leaflet Maps with CSV Data "から始めて、CSVファイルから点データを取り出す基本を学ぼう。その後、「CSVデータによるリーフレットヒートマップ点」、「リーフレット検索可能な点マップ」、「オープンデータAPIによるリーフレットマップ」、 「オープンデータリポジトリ」で紹介し、「Socrataオープンデータによるカレントマップ」で再び取り上げた、オープンリポジトリから最新の情報を継続的に直接取得する、といった高度な例へと進む。

これらのLeafletテンプレートは、ウェブ上で最も一般的な3つのコーディング言語で書かれている：HTMLはWebページ上のコンテンツを構成するために（通常index.htmlという名前のファイルに）、CSSはページ上のコンテンツの表示方法を形成するために（index.htmlの中か、style.cssのような別のファイルに）、そしてJavaScriptはオープンソースのLeafletコードライブラリを使ってインタラクティブマップを作成するために（index.htmlの中か、script.jsのような別のファイルに）。これらのLeafletテンプレートには、 様々なオープンアクセス・オンラインプロバイダーからのズーム可能なベースマップタイルなど、他のオンラインコンポーネントへのリンクも含まれている。 ...