Charlotte(シャーロット)2話に出てきた地図のleaflet版作った。

最終更新日

地理院地図……お前、地理院地図じゃないか!

charlotte Maps
というわけで、leaflet版作ってみました。
ズームもパンもできるよ!\(^ω^\)( /^ω^)/
ホントは地図の向きも合わせようかと思ったのですが、見づらくなるのと操作しづらくなるのでやめました。

example

一応、最新版のChromeとFirefoxで動作確認してます。IEもver.10なら動くみたいです。

制作委員会に怒られたら、やめるね!

解説

地図部分を透明色でくり抜いた画像をLeafletの上に重ねているだけです。
地図の奥行を出すのにCSS transformを利用しています。

css transform

example

地理院地図

正確には表示されているのは「電子国土基本図」です。
leafletで地理院地図を表示するのはとても簡単です。