Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LeafletでWebGIS入門
Search
Yasunori Kirimoto
July 03, 2015
Technology
0
350
LeafletでWebGIS入門
FOSS4G 2015 Hokkaido 発表資料
Yasunori Kirimoto
July 03, 2015
Tweet
Share
More Decks by Yasunori Kirimoto
See All by Yasunori Kirimoto
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
dayjournal
0
94
State of Open Source Web Mapping Libraries
dayjournal
0
430
AWS Heroes Map 秘伝のレシピ
dayjournal
2
220
State of Amazon Location Service
dayjournal
0
280
State of Amazon Location Service
dayjournal
1
490
MapLibreとAmazon Location Service
dayjournal
1
590
AWS re:Invent 2023 現地での体験
dayjournal
1
960
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.8k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
810
Other Decks in Technology
See All in Technology
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
2
590
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
380
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
520
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
140
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
230
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.8k
The Future of SEO: The Impact of AI on Search
badams
0
250
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
380
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
340
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
270
Reading Code Is Harder Than Writing It
trishagee
2
110
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Writing Fast Ruby
sferik
628
61k
Code Reviewing Like a Champion
maltzj
521
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
Music & Morning Musume
bryan
46
6.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Site-Speed That Sticks
csswizardry
4
390
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
How to Ace a Technical Interview
jacobian
276
23k
Agile that works and the tools we love
rasmusluckow
328
21k
Transcript
LeafletでWebGIS入門 株式会社 三洋コンサルタント 桐本 靖規 2015.07.03 FOSS4G 2015 Hokkaido 1
今日の目次 ① Leafletとは ② 準備 ③ 構築
Leafletとは
LeafletとはJavascriptで記述されているオープンソースのライブラリで ファイル自体が軽量でコード量も少なくWebGISを構築可能です。
Web上で独自の地図サイトが作れます!!
DEMO
準 備
ブラウザ テキストエディタ ローカル環境 公 開
ブラウザ テキストエディタ ローカル環境 公 開
Internet Explorer Chrome Firefox Safari Opera
Internet Explorer Chrome Firefox Safari Opera
ブラウザ テキストエディタ ローカル環境 公 開
None
None
None
ブラウザ テキストエディタ ローカル環境 公 開
None
ブラウザ テキストエディタ ローカル環境 公 開
Webサーバー
構 築
基本構成 背景地図 コントロール マーカー GeoJSON
基本構成 背景地図 コントロール マーカー GeoJSON
index.html stylesheet.css script.js HTML CSS JS
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> <meta charset="UTF-8"> <title>Leaflet Sample</title> <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" /> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML ライブラリの参照設定
html, body { height: 100%; padding: 0; margin: 0; }
#map { z-index: 0; height: 100%; } CSS
基本構成 背景地図 コントロール マーカー GeoJSON
地理院地図
var map = L.map('map'); 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); map.setView([43.0704123, 141.3406076], 17); JS
None
OpenStreetMap
var map = L.map('map'); 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
Google Maps
None
<!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" /> <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> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML
var map = L.map('map'); var Googlemap = new L.Google('ROADMAP'); map.addLayer(Googlemap);
map.setView([43.0704123, 141.3406076], 17); JS
Bing Maps
<!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" /> <script src="./plugin/leaflet-plugins-master/layer/tile/ Bing.js"></script> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML
None
None
var map = L.map('map'); 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> <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" /> <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> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML
var t_std = new 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>" }); var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/ xyz/pale/{z}/{x}/{y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/ kikakuchousei40182.html‘ target=’_blank‘>国土地理院</a>" }); var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/ xyz/ort/{z}/{x}/{y}.jpg', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/ kikakuchousei40182.html‘ target=’_blank‘>国土地理院</a>" }); var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/ {z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright"> OpenStreetMap</a> contributors' }); JS 背景地図の読み込み
var g_roadmap = new L.Google('ROADMAP'); var g_satellite = new L.Google('SATELLITE');
var g_hybrid = new L.Google('HYBRID'); var b_roadmap = new L.BingLayer("アクセスキーを入力", { type: 'Road' }); var b_Aerial = new L.BingLayer("アクセスキーを入力", { type: 'Aerial' }); var map = L.map('map', { center: [43.0704123, 141.3406076], zoom: 17, layers: [t_pale] }); JS 画面の中心座標 ( 緯度・経度 ) 背景地図の読み込み
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 背景レイヤの作成 レイヤーコントロール表示
DEMO
基本構成 背景地図 コントロール マーカー GeoJSON
レイヤ選択 表示
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, { collapsed: false }).addTo(map); JS
スケール
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.scale({ imperial: false, maxWidth:300 }).addTo(map); L.control.layers(Map_BaseLayer, null, { collapsed: false }).addTo(map); JS
ズームバー
var map = L.map('map', { center: [43.0704123, 141.3406076], zoom: 17,
zoomControl: false, layers: [t_pale] }); 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 }; JS
DEMO
基本構成 背景地図 コントロール マーカー GeoJSON
マーカー 表示
var Map_Marker = L.marker([43.0704123, 141.3406076]) .addTo(map); var comment = '北海道大学
農学部本館'; Map_Marker.bindPopup(comment).openPopup(); 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 }; JS マーカーの表示 ポップアップの表示
DEMO
マーカーアイコン 変更
var map = L.map('map', { 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 アイコンの設定
DEMO
レイヤ 表示
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 }; var Map_OverLayer = { "会場": Map_Marker }; L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); L.control.layers(Map_BaseLayer, Map_OverLayer, { collapsed: false }).addTo(map); JS オーバーレイヤ選択画面の表示
DEMO
基本構成 背景地図 コントロール マーカー GeoJSON
データの準備
geojson.io
GeoJSON : 都市公園データ (点) を使用
国土数値情報(都市公園データ)を使用 QGIS
GeoJSON 表示
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 ] } }, { "type": "Feature", "properties": { "P13_003": "宮部記念緑地" }, "geometry": { "type": "Point", "coordinates": [ 141.33550164, 43.0666937 ] } }, { "type": "Feature", "properties": { "P13_003": "偕楽園緑地" }, "geometry": { "type": "Point", "coordinates": [ 141.34429626, 43.06828667 ] } }, { "type": "Feature", "properties": { "P13_003": "八軒コスモス公園" }, "geometry": { "type": "Point", "coordinates": [ 141.32328053000001, 43.08470141 ] } } ] }; GeoJSON
<!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" /> <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> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML
var ParkIcon = L.icon({ iconUrl: './img/Park.png', iconSize: [50, 50], iconAnchor:
[25, 20], popupAnchor: [0, -30] }); var Map_GeoJSON = L.geoJson(pointdata, { pointToLayer: function (feature, layer) { return L.marker(layer, { icon: ParkIcon }); }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.P13_003); } }).addTo(map); var Map_OverLayer = { "会場": Map_Marker, "GeoJSON": Map_GeoJSON }; JS GeoJSONの表示 アイコンと属性値の反映
DEMO
まとめ
・準備 ・背景地図 ・コントロール ・マーカー ・GeoJSON