TL;DR
あなたの画像が地図になります。３分で出来ます。
はじめに
Mapbox は、直感的にデザインした独自の地図を、Webやアプリで使うことができる地図サービスです。
Mapbox の地図デザインは、通常 Mapbox Studio という地図デザインエディタにて、いくつかのテンプレートから始まります。
また既存テンプレート以外にも、手持ちの画像から抽出した配色で、オリジナルテンプレートを作ることもできます。
この記事では、手持ちの画像から Mapbox のオリジナル地図テンプレートを作る方法を紹介します。
手順
1. Web で Cartogram を開く
Mapbox のアカウントにログインしているブラウザで、Cartogram というWebページを開きます。
2. 開いた Cartogram のページに画像をアップロード
開いた Cartogram のページに、配色で使いたい画像をアップロードします。（ドラッグ&ドロップも可）
3. アップロードした画像から配色を決める
画像アップロード後、左下のUIから地図コンポーネントの配色を選びます。
配色するコンポーネントは以下の通りです。
- Land（陸地）
- Water（海や川、湖など）
- Road（道）
- Greenspace（緑に覆われた地域）
- Label（文字ラベル）
4. 配色が決まったら Mapbox Studio に保存
配色ができたら、ページ上部の「Save style!」ボタンを押して、作った地図テンプレートを Mapbox Studio に保存します。
ボタンを押すと、地図テンプレートは Mapbox Studio の Style として保存され、すぐにその Style のエディタが開かれます。
エディタの左サイドバーを見てみると、選んだ配色がカラーパレットとして保存されていることに気が付くでしょう。
更に細かいデザインが必要な場合は、このカラーパレットを活用して、デザインを続けてください。
Mapbox Studio でのデザインに役立つリンク集
- Mapbox Studio manual - Mapbox documentation
- 5 steps for creating a custom map - Mapbox's Medium
- How to update a classic style in modern Mapbox Studio - Mapbox's Youtube
デザイン例
赤富士
Okay this is pretty cool, styling webmaps from a photo from @mapbox... https://t.co/br5OwUt0hh #cartogram #builtwithmapbox #hokusai #mtfuji pic.twitter.com/XKTYVK5rOy
— Will B. Payne (@willbpayne) 2017年6月27日USA
Fun instant map styles. Drag & drop an image into Mapbox Cartogram and instantly get a complementary map style. https://t.co/dxvltRf3nZ pic.twitter.com/EBQhsyUtU0
— gmapsmania (@gmapsmania) 2017年6月27日基盤
Mapboxで画像から背景地図を作る方法を知った。
— Hirosaji (@hirosaji) 2020年4月22日
これは試しに作った"基盤"地図。 pic.twitter.com/s2dSAtOcaVその他、Twitterで「Mapbox Cartogram」と検索してみてください🙆♀️
おわりに
この記事では、手持ちの画像から Mapbox のオリジナル地図テンプレートを作る方法を紹介しました。
地図デザイン時、作りたいイメージに似た画像を用意することができれば、工数を減らすことができるでしょう。
そして何より、デザインの着想の幅が広がります。
地図デザインの際は、是非みなさんも活用してみてください。
なおこの記事は、次の公式動画を参考に作成しました。
