Leaflet.js超入門

LEAFLET.JS
超入門
都筑総研

LEAFLET.JSとは
• モバイルフレンドリーなインタラクティブマップを実現する、
先進的でオープンなJavaScriptのライブラリ
• 簡素＆高速＆使いやすい

ライブラリの導入
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
スタイルシートの設置
JavaScript設置
上記の2行のHEADタグに記述すれば、導入完了です

地図オブジェクトの構築
var map = L.map(‘map’).setView([ 36.0 , 140.0 ], 13 );
mapというIDが付与されたタグに対して、
中心座標（世界測地系）緯度 36.0 ，経度 140.0
拡大率13として初期化します。

タイルレイヤの設定
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
タイル地図サーバのURL
http://{s}.tile.osm.org/{z}/{x}/{y}.png
地図右下のコピーライト
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

<html>
<head>
<title>leaﬂet.js test</title>
<style type="text/css">
body { padding: 0px; margin: 0px;}
</style>
</head>
<body>
<div id="map" style="height:100%;"></div>
</body>
<script type="text/javascript">
//mapタグへ地図の設置、中心座標と拡大率の設定
var map = L.map("map").setView([ 36 , 140 ], 13);
// オープンストリートマップのタイルレイヤの追加
}).addTo(map);
</script>
</html>

<html>
<head>
<title>leaﬂet.js test</title>
<style type="text/css">
body { padding: 0px; margin: 0px;}
</style>
</head>
<body>
<div id="map" style="height:100%;"></div>
</body>
<script type="text/javascript">
//mapタグへ地図の設置、中心座標と拡大率の設定
var map = L.map("map").setView([ 36 , 140 ], 13);
// オープンストリートマップのタイルレイヤの追加
}).addTo(map);
</script>
</html>
ライブラリの
読み込み
このタグに地図
が入ります
BODYタグの後で、地図を初期化す
ることで、タグにアクセス可能

クリックイベントの取得
• イベントオブジェクト e から緯度経度を取得可能です
• 緯度経度は世界測地系（WGS84，EPSG：4326）
map.on( 'click', function(e) {
alert( ‘Clicked Point : ' + e.latlng.lng+' ‘+e.latlng.lat );
} );

マーカーの配置
• L .marker([ 緯度 , 経度]).addTo(map) で地図に配置
• 座標系は世界測地系（WGS84，EPSG：4326）
var marker = L.marker([36.00, 134.00]).addTo(map);

地図の中心位置の変更
• panTo関数に緯度経度を指定します
• 座標系は世界測地系（WGS84，EPSG：4326）
map.panTo(new L.LatLng(36.00, 134.00]));

応用編
• クリックした場所を中心に移動し、マーカーを表示する
イベントオブジェクトから、
座標オブイェクト（e.latlng）
を用いています。
var marker ;
if( marker != null ){
map.removeLayer( marker );
}
marker = L.marker( e.latlng ).addTo( map );
map.panTo( e.latlng );
}
);

応用編
• クリックした場所を中心に移動し、マーカーを表示する
var marker ;
if( marker != null ){
map.removeLayer( marker );
}
marker = L.marker( e.latlng ).addTo( map );
map.panTo( e.latlng );
}
);
表示中のピンを削除
マーカー追加
地図中心の変更

Leaflet.js超入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Leaflet.js超入門

Similar to Leaflet.js超入門 (20)

Leaflet.js超入門