MAPPLEの新しい地図表現を体験

長年に渡る地図出版で培ったマップルの地図デザインをベクトルタイル形式※1で構築し、さらにWebブラウザ向けに優れた表現力を持つ地図ライブラリである『MapLibre※2』を使い、表現してみました。
不動産・観光・運送など、さまざまな業務シーンでの活用が期待できる新たな背景地図です。ここでは、表現した地図を動画にしてご紹介しています。

※1 マップルの「ベクトルタイル地図」はMapbox Vector Tile(MVT)形式で構築しています。
※2 MapLibreとは、Mapbox GL JSからフォークして作られたオープンソース地図UIライブラリのプロジェクトです。

鳥瞰表示(上空からの360度ビュー)

マップルならではの街や道路の様子がわかるデザインと、地形の凹凸の判別しやすさを両立した3D表現のデモ動画です。
マップルの地図に国土地理院の標高データ、陰影データを重ね合わせ、MapLibreの機能を使い地形を立ち上げ表示しました。

上空から見た京都の町並み

3D地図を上空から眺めることで、三方を山に囲まれた京都の地形を見渡すことができます。都市や観光など様々な機能が集積する中心部も、マップルならではの地図の色使い・情報の取捨選択によりシンプルで見やすい内容となっています。

上空から見たしまなみ海道

広島県尾道市と愛媛県今治市をむすぶ「しまなみ海道」と、その周辺の島々を上空から眺めてみました。点在する島を7つの橋を使って道路に加えて主要なフェリーや旅客船の航路の情報も表示、また島名だけでなく町名などの地名情報も見ることができます。

上空から見た箱根山カルデラ

芦ノ湖をはじめ、カルデラ内に点在する温泉地、ゴルフ場などの観光スポットの情報が満載の3D地図になりました。地図の回転と連動して山名や観光地名も自動的に再配置されます。

活用シーン

mvt_1_1

不動産

物件周辺の起伏、最寄り駅からの高低差など視覚的な情報を提供することでサービス価値を向上

mvt_1_2

観光

観光エリア全体を俯瞰的に確認でき、ツアー客への案内用途、観光地のデジタルサイネージでの活用

mvt_1_3

地図物流・交通

平面の地図よりも広範囲の表示ができるため、物流拠点や交通網の配置状況の全体確認に

※ 出典:国土地理院 標高タイル(基盤地図情報数値標高モデル)・陰影起伏図
※ 地表面の標高データを利用して、平面の地図を機械的に立ち上げ表示しています。道路や鉄道の橋やトンネルなどの構造物も地表面上に表示されます。
※ 本デモサイトでは、標高データが持つ高さを2.5倍強調して表示しています。

走行ルートのシミュレーション(上空からトラッキング)

GPSデータ位置情報など、あらかじめ登録したルートに沿って地図画面を自動的に動かすことができます。本デモ動画では、国土地理院の空中写真上にマップル地図の文字情報のみを表示し、当社ルート探索エンジンで算出した自動車用ルートを上空からトラッキングします。

国道一号線の箱根越えルート

駅伝ルートとしても有名な箱根の国道1号線を登るデモです。空中写真を3D動画で表現することで山岳ルートの険しさが伝わる内容となっています。山間部でもマップル地図から交通施設や観光地の情報を追加表示していますので、走行位置を把握が容易にできます。

しまなみ海道の走行イメージ

一つ目のデモでご紹介した「しまなみ海道」の自動車区間を、実際に走行するイメージをデモ動画にしました。。

東名高速道路の走行イメージ

東名高速道路の下り方面を東京から静岡方面へ走行するルートを、上空から鳥瞰表示しています。
走行中に意識することの少ない高速道路周辺の街並みや地形を眺めることができます。

活用シーン

mvt_2_1

観光・ナビゲーション

ツアー商品のコース紹介、カーナビのルート探索結果のデモ走行モードに

mvt_2_2

物流・交通

新たな送迎・配送ルートの事前走行シミュレーションへの利用に

mvt_2_3

不動産

最寄り駅や高速インターチェンジから物件への移動経路を視覚的に把握

※ 出典:国土地理院 全国最新写真(シームレス)・標高タイル(基盤地図情報数値標高モデル)
※ 地表面の標高データを利用して、平面の空中写真や自動車ルートを機械的に立ち上げ表示しています。道路や鉄道の橋やトンネルなどの構造物も地表面上に表示されます。

オープンデータの利用(様々な表現方法で重ね表示)

現在、様々なオープンデータの公開が進んでいます。データが地理座標を保持していれば、MapLibreを利用することで、マップル地図上に重ねて表示することができます。

ハザードマップとの重ね合わせ

国土数値情報の土砂災害警戒区域(急傾斜地の崩壊)のエリアデータを、マップル地図に重ねて表示しました。 ※黄色塗り箇所が土砂災害警戒区域となります。
土地の標高や凹凸もあわせて表現しており、現地の状況を具体的にイメージしつつ、ハザードマップを参照することが可能です。

不動産系情報との重ね合わせ

不動産系の各種オープンデータを重ね表示しました。
MapLibreのビジュアル機能を利用し、取り込んだデータが持つ属性情報を参照して、色分け、棒グラフなど複数の表現を試しています。

活用シーン

mvt_3_1

不動産

都市計画情報やハザードマップを重ね物件の付加価値・潜在リスクを視覚的に把握

mvt_3_2

店舗開発

オープンデータのビジュアル化を手助け、顧客・社内関係者との合意形成をサポート

mvt_3_3

物流・交通

ハザードマップを表示し災害リスク地域を避けるルート計画や代替ルート策定に活用

※ 出典:国土数値情報 土砂災害警戒区域(急傾斜地の崩壊)・用途地域・地価公示、国土地理院 標高タイル(基盤地図情報数値標高モデル)、国土交通省 不動産情報ライブラリ(不動産鑑定評価額)

デザインの自由度(地図の色味やフォントサイズの倍率変化)

本デモでご覧いただいている背景地図デザインは当社で最適な内容に調整済みですが、ベクトルタイル形式の特徴を活かし、地図の色味や文字サイズを一律に変更することも可能です。

地図の濃淡を変更

MVT_4_toka_1
MVT_4_toka_2
MVT_4_toka_3
MVT_4_toka_4

文字サイズを変更

MVT_4_character_1
MVT_4_character_2
MVT_4_character_3
MVT_4_character_4

MapLibreを使い、地図の濃淡や文字サイズをスライダーバーを使いシームレスに変更するイメージ画像となります。
文字の大きさが変わるにつれて、文字同士の重なりも自動的に回避します。

活用シーン

mvt_4_1

他データの重層表示

背景地図の明るさ・鮮やかを抑えることで独自整備データやオープンデータを強調

mvt_4_2

公開サービス

ユーザー利用環境にあわせた文字や記号の大きさにすることでユーザビリティを向上

mvt_4_3

観光

季節や時間帯、イベントに応じた地図デザインにすることで付加価値を向上


本デモンストレーションで利用しているデータにつきまして
オープンデータのご利用にあたっては各データの利用手続き、規約をご確認ください。

ご質問・ご相談はいつでもお気軽にどうぞ