DUOLABS
ポートフォリオ

ウェブ地図サービスの構築

石油精製会社が顧客に全国のガソリンスタンドの位置と周辺施設を案内するWeb地図サービスの開発に参加しました。当時のWeb地図は画像をずらして動かす方式がほとんどで、このサービスはブラウザの中で地図をドラッグし拡大する方を選びました。インターネットが遅かった時期なので、地図が開くのに時間がかかったり地図画像がずれて見えたりすると、位置案内そのものが成り立ちませんでした。地図画像と元の地図データを画面座標に合わせる作業、データ転送量を減らす作業、移動・拡大の切り替えを担当しました。

Launch
2007
Client
韓国の石油精製会社
Type
地図・空間情報

01 / 04

画像をずらすWeb地図ではなく、ブラウザの中で動く地図

このWeb地図サービスは、顧客が全国のガソリンスタンドの位置と周辺施設をブラウザで探せるサービスです。当時のWeb地図は画像を横にずらして動かす方式がほとんどでした。このサービスは地図のドラッグや拡大・縮小をブラウザの中でそのまま受け付ける方を選びました。地図ライブラリと元の地図データを組み合わせてこの地図を実装する開発に参加しました。

画像をずらすWeb地図ではなく、ブラウザの中で動く地図
02 / 04

地図画像と元データがずれない位置合わせ

Web地図は細かく分けた地図画像(タイル)をつなぎ合わせて表示し、その上に元の地図データの位置を載せます。両者の座標が少しでもずれると、ガソリンスタンドの印がとんでもない場所に表示されます。タイルと元の地図データを画面座標に合わせて配置し、サービス画面でずれて見える箇所を探して地図画像を修正する作業を担当しました。

地図画像と元データがずれない位置合わせ
03 / 04

遅い回線でも地図が開くよう減らした転送量

Web地図は画面を埋める地図データを毎回受け取る必要があり、当時のインターネットではその量を受け取るのにも時間がかかりました。地図データの転送量を減らし表示方式を整えて、遅い回線でも地図が開くようにしました。サーバーとやり取りするデータも、タグで囲む重い形式からより短く書ける形式に変え、通信量を減らしました。

遅い回線でも地図が開くよう減らした転送量
04 / 04

ドラッグや拡大のときに位置を見失わない画面の切り替え

地図をドラッグしたり拡大・縮小したりするとき画面がぷつりと切り替わると、利用者はいまどこを見ているのかを見失います。移動と拡大・縮小の間に自然な切り替え効果を入れ、縮尺が変わる間も位置を追えるようにしました。このサービスで作った地図技術は、その後ガソリンスタンド位置案内サービス、新都市のバス情報地図、海外のサービスへと移植されました。

ドラッグや拡大のときに位置を見失わない画面の切り替え

この仕事のポイント

01

ブラウザの中でドラッグし拡大するWeb地図

02

地図画像と元の地図データを画面座標に合わせた位置合わせ

03

遅い回線でも地図が開くよう減らしたデータ転送量

インサイト

ブログをすべて見る