地理院地図……お前、地理院地図じゃないか! というわけで、leaflet版作ってみました。 ズームもパンもできるよ!\(^ω^\)( /^ω^)/ ホントは地図の向きも合わせようかと思ったのですが、見づらくなるのと操作しづらくなるのでやめました。 example 一応、最新版のChromeとFirefoxで動作確認してます。IEもver.10なら動くみたいです。 制作委員会に怒られたら、やめるね! 解説 地図部分を透明色でくり抜いた画像をLeafletの上に重ねているだけです。 地図の奥行を出すのにCSS transformを利用しています。 example <!doctype html> <html lang="jp"> <head> <meta charset="utf-8" /> <title>charlotte Maps</title> <link rel="stylesheet"
![Charlotte(シャーロット)2話に出てきた地図のleaflet版作った。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6e8b99fed12291598c18f406fcf4e729a4c8851/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2015%2F07%2Fkyoju000000.jpg)