先日の京都芸術大学（KUA）の特別授業にて、面白いワークショップを体験しました。 「不規則な形の"枠"を描いて、その"枠"の中を絵で埋める」というワークショップです。 5秒で理解できるスゴいスライド（画像はKUA公式ツイートより） "枠"の形から描くもの…

Earth Studioは、Google Earthの3D画像や衛星写真を使った映像をWeb上のGUIで制作できるツールです。 kml形式のポリゴンデータをアップロードして載せることもできます。 しかし、CRSがWGS84（EPSG:4326）しか対応しておらず、北極点を一周するポリゴンを載…

ルートに沿って、スクロールでカメラをぬるぬる移動させる3DのScrollyTellingを実装しました。 実装では、タイトル通りMapbox GL JSのFreeCamera APIを利用しています。 FreeCamera API とは Mapbox GL JSがv1からv2にメジャーアップデートした際に追加され…

容量の大きい地理情報データは重くてWebに載せられないので、軽量化が必要です。 今回は Shapefile を対象に、簡素化とBuffer（Geobuf）形式を使った軽量化の一連のステップを紹介します。 ちなみに、今回例として取り上げた全国市区町村界データを軽量化し…

ポイントデータの3D地図表現が、Mapboxにあるようで無かったので作りました。 どんな時に使うの 棒グラフに地理情報を付けたい時に使えます。 例えば、「全国の展望台付きタワーの高さ」を比較する場合。 ↓ ↓ 比較する各地を、地図上に載せる時に使えます。 …

各国のポリゴンデータは、ネット上に沢山あります。 しかし、国の形をくり抜いたポリゴンデータは多分無いです。自作しなければいけません。 ちなみに私は、Mapbox Studioで日本列島をマスクするときに、この国の形でくり抜いたポリゴンデータが必要になりま…

これは何の記事？（TL;DR） コロナの自粛期間で大気汚染物質（NO2）が減った地域を可視化しました。 デモページ 実装までのプロセスは、 Google Earth Engineで衛星データを取得・分析 -> Mapboxで可視化 といった流れです。 この記事では、この可視化までの…

TL;DR あなたの画像が地図になります。３分で出来ます。 Amazonのロゴ画像で地図テンプレートを作った例 はじめに Mapbox は、直感的にデザインした独自の地図を、Webやアプリで使うことができる地図サービスです。 Mapbox の地図デザインは、通常 Mapbox St…

はじめに Mapboxには、ドキュメント類がとても充実しています。 ただ、英語でかつ様々なチャネルで広報がされているため、英語での検索に慣れてないと（特に初・中級者は）求めている情報に辿り着けません。 そこで今回、「とりあえずここから探そう」という…

TL;DR Interactive Storytelling は Mapbox が提供するストーリーマップのテンプレートである。 公式の Interactive Storytelling の入門記事に不足していた Mapbox Studio の説明を補足した。 この記事を使えば、Mapbox の事前知識なしでこんな感じのデモが…

TL;DR Mapbox APIの公式リファレンスを補足付きで要約した。 Mapbox APIを知れば、ラッパー（Mapbox GL JSなど）の理解に繋がる。 Mapbox APIは、４つの構成（地図、ナビ、検索、アカウント）に分かれる。 はじめに Mapboxは、機能やデザインを自由にカスタ…

データの前処理はいつだって大変です。 例えばこのデータ、何を表しているかわかりますか？ { "title": "こみっくがーるず", "place": "新宿三丁目前", "lng": "139.861979", "lat": "35.760790"} 作品のタイトル（title）と場所（place）、そして緯度経度（…

すべてのきららファンのため。 そして、何より自分のために。 芳文社アニメ作品の聖地情報だけを集めた聖地巡礼マップを作りました。 名付けて「ドキドキ☆ビジュアルMAP」。 芳文社 聖地巡礼マップ「ドキドキ☆ビジュアルMAP」 PC/モバイル対応のWebGISアプリ…

日本感性工学会 学生部会「志学の会」12月度勉強会にて、認知プロセスに関する文献調査＆発表をしてきました。 今回は「地図の認知プロセス」を調べるため、人間と地図と認知地図(頭の中の地図)の関係について文献調査を行い、そこで得た知見を発表しました…