タイル画像

弊社では、地方公共団体様、ひいては社会のお役に立てる方法を日々模索しています。
その1つとして、皆様の生活および財産の安全に直結する「ハザードマップ」の公開方法(情報伝達方法)の改善に取り組んでいます。

ハザードマップとは、災害発生時に、「どの場所が危ないのか、どこに避難するべきなのか」などの情報が載っている地図です。
ハザードマップは、地方自治体様のホームページで公開されており、誰でも見ることができます。

現状、ハザードマップはPDFデータで公開されているものが大半を占めます。
PDFデータはパソコンからでもスマートフォンからでも見ることができ、大変優れたものなのですが、データ容量が大きくなると、表示(ダウンロード)に時間がかかってしまいます。

例えば、データ容量が20MBのPDFを見る場合、20MB全てを自分のパソコンにダウンロードしなくてはなりません。
回線の状況にもよりますが、表示されるまで数十秒~数分かかる場合があります。

それを防ぐために(データ容量を軽くするために)、地図を複数枚に分割して公開している場合があります。

でもそうすると…。
地図全体を見ることができないため、見たい箇所が隣の地図に載っていた場合、「現在の地図を閉じて→隣の地図を新たに開く」という面倒な作業をしなくてはなりません。

また、地図を分割せず、画像を粗くすることでデータ容量を軽くして公開いる場合もあります。
画像を粗くしてしまうと、文字が読めなかったり、道路がわからなかったり…。地図としての役割を果たさない悲しい結果になってしまいます。

さらに、WebブラウザでPDFデータを見る場合、地図の移動や拡大/縮小の操作が難しく、不慣れな方は自由に見ることすらできません。

そこで!

弊社では、タイル画像システムで、それらの問題を解決しています。

タイル画像システム

タイル画像システムとは、とても大きな画像を素早く綺麗に表示させるシステムです。
細かく切って並べた画像(タイル画像)から、必要な部分だけ(画面に表示させる部分だけ)をダウンロードするので、負荷が少なく、素早く表示させることができます。

どんな大きな画像も素早く綺麗に表示させることができます。

 


サンプルを作成したので御覧ください。
長野県飯綱町様のハザードマップをタイル画像システムに取り込んだものです。
※実際のハザードマップとは異なります!サンプルですので避難の参考にしない様ご注意願います。
※飯綱町様の許可を得て公開しています。

【操作説明】

  • 拡大/縮小:マウスホイール、左上のボタン(+-)、キーボード(+-)
  • 移動:マウスドラッグ、キーボード(←↑→↓)
  • 回転:左端のスライドバー
  • 指定箇所にジャンプ:右下のボタン


ハザードマップのサンプル(通常版)

スマートフォンはこちら

A1用紙サイズで8分割した地図を1つに繋ぎ合わせた、とても大きな地図ですが、町全体を素早く簡単に見ることができます。
(具体的な画像サイズは、解像度300pixel/inch、幅25181pixel、高さ22677pixel)

 


しかし!

「文字や記号によって、家や道路が隠れちゃうから分かりづらいなぁ」というご意見を頂きました。

それを解決するために、ハザードマップと航空写真を横に並べた2画面のシステムを作成しました。
2つの地図は、場所も拡大率も完全にシンクロします。



ハザードマップのサンプル(2画面版)

スマートフォンはこちら

これにより、家や道路が隠れることなく、地図を見ることができます。

 


解決できました!

と思ったら、さらなる要望が。

「2画面になったから、表示範囲が狭くなって見づらいんですけど…」というご意見を頂きました。

それを解決するために、中心のボタンを左右に動かすことで、ハザードマップと航空写真を切り替えられるシステムを作成しました。



ハザードマップのサンプル(スライドボタン版)

スマートフォンはこちら

さらに、航空写真と白地図を切り替えたり、避難所に属性情報(外観写真、備蓄品など)を表示させることも可能です(サンプルが無くてすみません)。

 


この様なタイル画像システムは、美術館のホームページで「絵画の公開」に使われる事例が多く、サービス業者様と「月額制」で契約している場合が多いようです。

弊社では、「月額制」などといったものは無く、維持管理費もサポート契約費も不要です。
データ作成費(ほんの少し)だけ頂きますが、システムも無料です。
タイル画像データおよび、それを表示させるシステム一式全てをお客様にお渡ししております。
そのデータをホームページにコピーするだけで、維持費をかけずに簡単に公開することができます。

 

おまけ


タイル画像システムの説明用サンプルはこちら。

「タイル画像」の分割の様子がわかると思います。
※わかりやすくするために、読み込み速度を遅くしてあります。