LeafletでWebGIS入門

LeafletでWebGIS入門
株式会社三洋コンサルタント
桐本靖規
2015.07.03
FOSS4G 2015 Hokkaido
1

今日の目次
① Leafletとは
② 準備
③ 構築

LeafletとはJavascriptで記述されているオープンソースのライブラリで
ファイル自体が軽量でコード量も少なくWebGISを構築可能です。

Web上で独自の地図サイトが作れます!!

ブラウザ
テキストエディタ
ローカル環境
公開

Internet Explorer
Chrome
Firefox
Safari
Opera

基本構成
背景地図
コントロール
マーカー
GeoJSON

index.html
stylesheet.css
script.js
HTML
CSS
JS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leaflet-0.7.3/leaflet.js"></script>
<link href="./Library/leaflet-0.7.3/leaflet.css"
rel="stylesheet" />
<link href="./css/stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="./js/script.js"></script>
</body>
</html>
HTML
ライブラリの参照設定

CDN
（コンテンツデリバリネットワーク）

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/
leaflet/0.7.3/leaflet.js"></script>
<link rel="stylesheet“ href="http://cdnjs.cloudflare.com/
ajax/libs/leaflet/0.7.3/leaflet.css" />
</head>
<body>
</body>
</html>
HTML
ライブラリの参照設定

html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
CSS

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution:'© <a href="http://osm.org/copyright">
OpenStreetMap</a> contributors'}).addTo(map);
map.setView([43.0704123, 141.3406076], 17);
JS

<!DOCTYPE html>
<html lang="ja">
<head>
<link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="http://maps.google.com/maps/api/js?sensor=
false&region=JP"></script>
<script src="./plugin/leaflet-plugins-master/layer/tile/
Google.js"></script>
</head>
<body>
</body>
</html>
HTML

var Googlemap = new L.Google('ROADMAP');
map.addLayer(Googlemap);
map.setView([43.0704123, 141.3406076], 17);
JS

<!DOCTYPE html>
<html lang="ja">
<head>
Bing.js"></script>
</head>
<body>
</body>
</html>
HTML

var BingMap = new L.BingLayer(“アクセスキーを入力", {
type: 'Road' });
map.addLayer(BingMap);
map.setView([43.0704123, 141.3406076], 17);
JS

・地理院地図
・OpenStreetMap
・Google Maps
・Bing Maps

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://maps.google.com/maps/api/js?sensor=
false&region=JP"></script>
Google.js"></script>
Bing.js"></script>
</head>
<body>
</body>
</html>
HTML

var Map_BaseLayer = {
"BingMap 標準": b_roadmap,
"BingMap オルソ": b_Aerial,
"地理院地図標準": t_std,
"地理院地図淡色": t_pale,
"地理院地図オルソ": t_ort,
"OpenStreetMap 標準": o_std,
"GoogleMap 標準": g_roadmap,
"GoogleMap オルソ": g_satellite,
"GoogleMap ハイブリッド": g_hybrid
};
L.control.layers(Map_BaseLayer, null, null).addTo(map);
JS
背景レイヤの作成
レイヤーコントロール表示

};
L.control.layers(Map_BaseLayer, null, {
collapsed: false }).addTo(map);
JS

};
L.control.scale({ imperial: false, maxWidth:300 }).addTo(map);
L.control.layers(Map_BaseLayer, null, {
JS

center: [43.0704123, 141.3406076],
zoom: 17,
zoomControl: false,
layers: [t_pale]
});
};
JS

var Map_Marker = L.marker([43.0704123, 141.3406076])
.addTo(map);
var comment = '北海道大学農学部本館';
Map_Marker.bindPopup(comment).openPopup();
};
JSマーカーの表示
ポップアップの表示

マーカーアイコン変更

center: [43.0704123, 141.3406076],
zoom: 17,
zoomControl: false,
layers: [t_pale]
});
var sampleIcon = L.icon({
iconUrl: './img/sample.png',
iconSize: [50, 50],
iconAnchor: [10, 40],
popupAnchor: [5, -50]
});
var Map_Marker = L.marker([43.0704123, 141.3406076], {
icon: sampleIcon }).addTo(map);
var comment = '北海道大学農学部本館';
Map_Marker.bindPopup(comment).openPopup();
JS
アイコンの設定

};
var Map_OverLayer = {
"会場": Map_Marker
};
L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map);
L.control.layers(Map_BaseLayer, Map_OverLayer, {
JS
オーバーレイヤ選択画面の表示

GeoJSON ：都市公園データ (点) を使用

国土数値情報（都市公園データ）を使用
QGIS

var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "P13_003":
"北6条エルムの里公園" }, "geometry": { "type": "Point",
"coordinates": [ 141.34308642, 43.0666937 ] } },
"宮部記念緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.33550164, 43.0666937 ] } },
"偕楽園緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.34429626, 43.06828667 ] } },
"八軒コスモス公園" }, "geometry": { "type": "Point",
"coordinates": [ 141.32328053000001, 43.08470141 ] } }
]
};
GeoJSON

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&region=JP"></script>
<script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>
<script src="./plugin/leaflet-plugins-master/layer/tile/Bing.js"></script>
<script src="./files/sample.geojson"></script>
</head>
<body>
</body>
</html>
HTML

・準備
・背景地図
・コントロール
・マーカー
・GeoJSON

LeafletでWebGIS入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to LeafletでWebGIS入門

Similar to LeafletでWebGIS入門 (20)

More from Yasunori Kirimoto

More from Yasunori Kirimoto (6)

LeafletでWebGIS入門