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
360
LeafletでWebGIS入門
FOSS4G 2015 Hokkaido 発表資料
Yasunori Kirimoto
July 03, 2015
Tweet
Share
More Decks by Yasunori Kirimoto
See All by Yasunori Kirimoto
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
410
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
dayjournal
0
1k
State of Open Source Web Mapping Libraries
dayjournal
0
570
AWS Heroes Map 秘伝のレシピ
dayjournal
2
300
State of Amazon Location Service
dayjournal
0
370
State of Amazon Location Service
dayjournal
1
650
MapLibreとAmazon Location Service
dayjournal
1
740
AWS re:Invent 2023 現地での体験
dayjournal
1
1.1k
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.9k
Other Decks in Technology
See All in Technology
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
660
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
760
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
150
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
160
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1k
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
300
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
280
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
0
130
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
230
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
190
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.4k
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
110
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Building Adaptive Systems
keathley
43
2.7k
Side Projects
sachag
455
43k
Git: the NoSQL Database
bkeepers
PRO
431
66k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A designer walks into a library…
pauljervisheath
207
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Think Like a Performance Engineer
csswizardry
26
1.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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