Zenn
マップボックス・ジャパン合同会社Publicationへの投稿
🗺️

みなとみらい駅エリアのコンビニの位置と人口分布を Mapbox Studio で可視化してみる

Ash
2023/04/04に公開
入門
#
gis
Mapbox
tech

目標

「自社の拠点を地図に配置して、さまざまな情報と重ねることで、見込み顧客への提案に活かしたい」という話があったので、Mapbox Studioを活用して簡単にできる方法を紹介します。

事例として、指定の場所からのアクセス時間に応じた到達可能圏と人口分布の上に拠点（店鋪など）を地図で可視化する方法をサンプルを用いて紹介します。今回のサンプルではみなとみらい駅から徒歩で5分、10分、15分圏内にあるコンビニと人口分布を重ねて表示します。

事前準備

人口分布と拠点の表示まで

  1. Mapboxアカウントでログイン=>Creat a map in Studio=>New style=>任意のStyleを選択(サンプルでは今回は見やすいようにMonochrome/Lightを選択)

  2. Mapbox Studioの左のタブより、Layer=>+ ボタン =>Upload data　ここで、ダウンロードした統計データをUpload。サンプルはShape形式のためダウンロードした形式(Zip)をそのままUpload可能。Upload後画面右下にNitificationでUploadが成功したらSucceedのメッセージが表示される。



Upload画面

  1. UploadしたTilesetをStyleへ読み込む。再度MapboxStudio左タブのSource追加を開き、2.でUploadしたファイルを追加する。ここで500mメッシュのデータが読み込まれる。


まだレイヤーを丸読み込みなので真っ黒

  1. SelectDataのタブで使うデータをフィルターする。今回はサンプルとして2020年の人口を利用。Data field = PO2020 "exist"を選択。

  2. StyleタブでStyle across data rangeでPOP2000を選び、色を変化させる階層を設定。今回のサンプルでは1000,5000,10000を塗り分ける。

  3. 次に拠点データをCSVで作成して、2~4と同様の画面でデータをUploadする。(今回はサンプルとしてみなとみらい周辺のコンビニデータを手作りして使用)。CSVデータは、座標と名前程度の簡単なものでもOKです。

  4. 5,6でUploadしたデータの見栄えはMapbox Studio左のタブを活用して作り込んでみてください。（今回はその詳細は割愛します）

    それっぽくなってきました

みなとみらい駅を中心に徒歩圏内アメーバを作成(Isochrone)

Mapbox Isochrone APIは到達可能距離に応じたポリゴンを生成することができます。今回は、APIの詳細説明は割愛しますが、中心点と"徒歩"の情報をもとにポリゴン作成までしてみます。

  1. ここにあるサンプルリクエストをそのままTalend API Testerにコピペ。もちろんAPIのリクエストレスポンスくらいは問題ない方は独自の方法で実施してください。

  2. 下記パラメータを修正
    -座標(サンプルは-118.22258,33.99038)をみなとみらい駅中心(139.63246788601566,35.45738526527342)に修正
    -driving（運転） => walking（徒歩）に修正

https://api.mapbox.com/isochrone/v1/{profile}/{coordinates}?{contours_minutes|contours_meters}
APIリクエストの基本クエリ

  1. Talend API Tester の返却結果をコピーしてテキストファイルに貼り付け。拡張子を.geojsonにして保存。

  2. 前段で実施したデータのUploadで3のファイルをUploadすると、到達可能圏のポリゴンがレイヤーとして作成される。人口分布データの編集と同じように、5分、10分、15分の到達可能圏を色分けして完成

    緑色が到達可能圏の３段階（5分、10分、15分）

使い方

目的は自分達の拠点がどのようにお客さんにとって役に立つのかを見えるようにして紹介したいという話でした。たとえば、人口が多いエリアにたくさん拠点があるとか、人が多く行き交う場所だとか、そういう紹介に活用できるかと思います。今回の生成した地図だとたとえば、「自宅（今回はみなとみらい駅）から徒歩5分に2〜３件コンビニがある。統計上生活人口は多くないエリアのため夜間や早朝はすいているかもしれない。」等々で利用できるかと思います。

最後に

今回はMapbox Studioを活用した、ノーコードを前提にしたビギナー向けです。到達時間を動的に操作して見栄えをダイナミックに変える、等実施したい場合はAPIを活用して実装できます。今回の例は基本的に無料で使えるものだけで行っていますが、MapboxサービスはAPIの利用数に応じた無料枠に基づくため、価格とアカウントページの利用料はご確認ください。

簡単な操作だけで、こうしたデータの重ね合わせがができれば、あとは地図デザインをカスタマイズできるMapbox Studioの本格的な出番です。参考動画やリンクを下記に貼りますので、ユースケースに合わせて、色や見た目をカスタマイズして是非活用してみてください。

参考

MapboxStudioで美しい地図をデザイン
MapboxStduioチュートリアル
テクニカルウェビナーMapboxStudioの基本的な使い方(要登録)

マップボックス・ジャパン合同会社
マップボックス・ジャパン合同会社Publication

マップボックス・ジャパン合同会社は、地図情報サービスの開発プラットフォームにおけるリーディングカンパニーです。ユーザー企業や代理店企業との共創により、地図を活用した新たな生活体験や業務改善ソリューションを生み出すことで、社会と暮らしの進化を支えています。

Discussion