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

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

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

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

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

解説

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

<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8" />


<title>charlotte  Maps</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />  


<style>
.container {
  width: 410px;
  height: 470px;
  margin: 0 auto 60px;
  position: absolute;
  top:-100px;
  left: 100px;
  border: 1px solid black;
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
       -o-perspective: 600px;
          perspective: 600px;
}

.panel {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.7;
  color: white;
  background: red;
}


#rotate-x .panel {
  -webkit-transform: rotateX( 55deg );
     -moz-transform: rotateX( 55deg );
       -o-transform: rotateX( 55deg );
          transform: rotateX( 55deg );
}

#map {
    width: 100%;
    height: 100%;
}

</style>

</head>
<body>
<div id="rotate-x" class="container">
    <div class="panel">
        <div id="map"></div>        
    </div>
</div>

</body>
</html>

<!doctype html>

<head>

<title>charlotte Maps</title>

<style>

.container {

width: 410px;

height: 470px;

margin: 0 auto 60px;

position: absolute;

top:-100px;

left: 100px;

border: 1px solid black;

-webkit-perspective: 600px;

-moz-perspective: 600px;

-o-perspective: 600px;

perspective: 600px;

}

.panel {

width: 100%;

height: 100%;

position: absolute;

opacity: 0.7;

color: white;

background: red;

}

#rotate-x .panel {

-webkit-transform: rotateX( 55deg );

-moz-transform: rotateX( 55deg );

-o-transform: rotateX( 55deg );

transform: rotateX( 55deg );

}

#map {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

</div>

</body>

</html>

地理院地図

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

var map = L.map('map').setView([35.697735, 139.580483], 15);

//地理院地図レイヤー追加
L.tileLayer(
    'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
    {
        attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
    }
).addTo(map);

var map = L.map('map').setView([35.697735, 139.580483], 15);

//地理院地図レイヤー追加

L.tileLayer(

'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',

{

attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"

}

).addTo(map);

解説

地理院地図

投稿者: shimizu