Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LEAFLET.JS
超入門
都筑総研
LEAFLET.JSとは
• モバイルフレンドリーなインタラクティブマップを実現する、
先進的でオープンなJavaScriptのライブラリ
• 簡素 & 高速 & 使いやすい
ライブラリの導入
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs...
地図オブジェクトの構築
var map = L.map(‘map’).setView([ 36.0 , 140.0 ], 13 );
mapというIDが付与されたタグに対して、
 中心座標 (世界測地系) 緯度 36.0 , 経度 140.0
...
タイルレイヤの設定
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright"...
<html>
<head>
<title>leaflet.js test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" ...
<html>
<head>
<title>leaflet.js test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" ...
完成!
クリックイベントの取得
• イベントオブジェクト e から緯度経度を取得可能です
• 緯度経度は世界測地系(WGS84,EPSG:4326)
map.on( 'click', function(e) {
alert( ‘Clicked Poin...
マーカーの配置
• L .marker([ 緯度 , 経度]).addTo(map) で地図に配置
• 座標系は世界測地系 (WGS84,EPSG:4326)
var marker = L.marker([36.00, 134.00]).add...
地図の中心位置の変更
• panTo関数に緯度経度を指定します
• 座標系は世界測地系 (WGS84,EPSG:4326)
map.panTo(new L.LatLng(36.00, 134.00]));
応用編
• クリックした場所を中心に移動し、マーカーを表示する
イベントオブジェクトから、
座標オブイェクト(e.latlng)
を用いています。
var marker ;
map.on( 'click', function(e) {
if( ...
応用編
• クリックした場所を中心に移動し、マーカーを表示する
var marker ;
map.on( 'click', function(e) {
if( marker != null ){
map.removeLayer( marker ...
Upcoming SlideShare
Loading in …5
×

Leaflet.js超入門

11,278 views

Published on

leaflet.jsの簡単な解説です

1.Webサイトへの設置方法
2.クリックイベントの取得
3.マーカーの設置
4.地図の中心位置の移動

Webサイトに地図を配置した時に、よく使いそうな事について書いております。

Published in: Software
  • Be the first to comment

Leaflet.js超入門

  1. 1. LEAFLET.JS 超入門 都筑総研
  2. 2. LEAFLET.JSとは • モバイルフレンドリーなインタラクティブマップを実現する、 先進的でオープンなJavaScriptのライブラリ • 簡素 & 高速 & 使いやすい
  3. 3. ライブラリの導入 <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タグに記述すれば、導入完了です
  4. 4. 地図オブジェクトの構築 var map = L.map(‘map’).setView([ 36.0 , 140.0 ], 13 ); mapというIDが付与されたタグに対して、  中心座標 (世界測地系) 緯度 36.0 , 経度 140.0  拡大率13として初期化します。
  5. 5. タイルレイヤの設定 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); タイル地図サーバのURL http://{s}.tile.osm.org/{z}/{x}/{y}.png 地図右下のコピーライト '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  6. 6. <html> <head> <title>leaflet.js test</title> <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> <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); // オープンストリートマップのタイルレイヤの追加 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html>
  7. 7. <html> <head> <title>leaflet.js test</title> <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> <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); // オープンストリートマップのタイルレイヤの追加 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html> ライブラリの 読み込み このタグに地図 が入ります BODYタグの後で、地図を初期化す ることで、タグにアクセス可能
  8. 8. 完成!
  9. 9. クリックイベントの取得 • イベントオブジェクト e から緯度経度を取得可能です • 緯度経度は世界測地系(WGS84,EPSG:4326) map.on( 'click', function(e) { alert( ‘Clicked Point : ' + e.latlng.lng+' ‘+e.latlng.lat ); } );
  10. 10. マーカーの配置 • L .marker([ 緯度 , 経度]).addTo(map) で地図に配置 • 座標系は世界測地系 (WGS84,EPSG:4326) var marker = L.marker([36.00, 134.00]).addTo(map);
  11. 11. 地図の中心位置の変更 • panTo関数に緯度経度を指定します • 座標系は世界測地系 (WGS84,EPSG:4326) map.panTo(new L.LatLng(36.00, 134.00]));
  12. 12. 応用編 • クリックした場所を中心に移動し、マーカーを表示する イベントオブジェクトから、 座標オブイェクト(e.latlng) を用いています。 var marker ; map.on( 'click', function(e) { if( marker != null ){ map.removeLayer( marker ); } marker = L.marker( e.latlng ).addTo( map ); map.panTo( e.latlng ); } );
  13. 13. 応用編 • クリックした場所を中心に移動し、マーカーを表示する var marker ; map.on( 'click', function(e) { if( marker != null ){ map.removeLayer( marker ); } marker = L.marker( e.latlng ).addTo( map ); map.panTo( e.latlng ); } ); 表示中のピンを削除 マーカー追加 地図中心の変更

×