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初級編 - Web地図サイトを構築してみよう-
Search
Yasunori Kirimoto
November 04, 2016
Technology
0
530
Leaflet初級編 - Web地図サイトを構築してみよう-
FOSS4G 2016 TOKYO ハンズオンデイ 発表資料
Yasunori Kirimoto
November 04, 2016
Tweet
Share
More Decks by Yasunori Kirimoto
See All by Yasunori Kirimoto
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
dayjournal
0
75
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
480
MapLibreとAmazon Location Service
dayjournal
1
580
AWS re:Invent 2023 現地での体験
dayjournal
1
950
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.8k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
800
Other Decks in Technology
See All in Technology
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making Projects Easy
brettharned
116
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Adopting Sorbet at Scale
ufuk
74
9.2k
Transcript
Leaflet 初級編 MIERUNE, LLC. / Yasunori Kirimoto 2016.11.04 FOSS4G 2016
TOKYO ハンズオン - Web地図サイトを構築してみよう-
MIERUNE, LLC. Yasunori Kirimoto
None
Contents はじめに ハンズオン その他事例
Introduction はじめに
事前準備できてますか?? http://bit.ly/leaflet161104
HTML CSS JS Web Technology
JavaScript Library
OpenLayers 3
CESIUM
D3.js
Leaflet
Web Service
CARTO
Mapbox
Hands On ハンズオン
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
demo demo
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
index.html stylesheet.css script.js HTML CSS JS
フォルダ構成
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <!--
Leafletライブラリ読み込み --> <script src="./library/leaflet-0.7.3/leaflet.js"></script> <link href="./library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <!-- CSS読み込み --> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <!-- Map読み込み --> <div id="map"></div> <!-- JS読み込み --> <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 プラグイン
OpenStreetMap
None
var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors' }).addTo(map); map.setView([35.680899409847584, 139.76712226867676], 16); JS
地理院地図
None
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }).addTo(map); JS
None
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }).addTo(map); JS
MIERUNE地図
None
L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', { attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC
BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL." }).addTo(map); JS
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
レイヤ統合
var t_pale = new L.tileLayer('https://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('https://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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }); var m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', { attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL." }); JS
var lat = 35.680899409847584; var lng = 139.76712226867676; var map
= L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: true, layers: [m_mono] }); var Map_BaseLayer = { "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "MIERUNE地図 MONO": m_mono }; L.control.layers( Map_BaseLayer, null ).addTo(map); JS
レイヤ表示ON
L.control.layers( Map_BaseLayer, null, {collapsed:false} ).addTo(map); JS
スケール
L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); JS
ズームバー
var map = L.map('map', { center: [lat, lng], zoom: 15,
maxZoom: 18, zoomControl: false, layers: [m_mono] }); JS
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
マーカー
var Map_Point = L.marker( [35.68089940984, 139.7671222686] ).addTo(map); var comment =
'東京駅だよ!!'; Map_Point.bindPopup(comment); JS
var IconPin01 = L.icon({ iconUrl: "./img/pin01.png", iconSize: [25, 25], iconAnchor:
[0, 25], popupAnchor: [0, -35] }); var Map_Point = L.marker( [35.68089940984, 139.7671222686], { icon: IconPin01 } ).addTo(map); JS
ライン
var Map_Line = L.polyline([ [35.67500798914924,139.75952625274658], [35.67845922918971,139.76094245910645], [35.689369743530044,139.76420402526855] ],{ "color": "#2DE9C4",
"weight": 5, "opacity": 0.6 }).addTo(map); JS
ポリゴン
var Map_Polygon = L.polygon([ [35.675949251235025,139.76617813110352], [35.67410157813001,139.77188587188718], [35.67455478492641,139.77227210998535], [35.683757812281115,139.77862358093262], [35.68431553740134,139.77343082427979], [35.68469897115985,139.77094173431396],
[35.679923346539084,139.76871013641357], [35.675949251235025,139.76617813110352] ],{ "color": "#E92D63", "weight": 3, "opacity": 0.8, "fillColor": "#562DE9", "fillOpacity": 0.4 }).addTo(map); JS
オーバーレイヤ
var Map_AddLayer = { "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon
}; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
データ準備
地理空間データ作成 : geojson.io
オープンデータ
国土数値情報(都市公園データ)を使用 QGIS : Shp → GeoJSON 変換
表示
var sampledata = { "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
<script src="./vecter/map.geojson"></script> HTML
var GeoJsonSample = L.geoJson(sampledata).addTo(map); JS
アレンジ
<script src="./vecter/point.geojson"></script> HTML
var lat = 42.333174; var lng = 141.004646; var IconPin02
= L.icon({ iconUrl: "./img/pin02.png", iconSize: [25, 25], iconAnchor: [15, 20], popupAnchor: [-5, -30] }); var PointAll = L.layerGroup().addTo(map); var PointGeojson = L.geoJson(pointdata, { onEachFeature: function (feature, layer) { var field ="目標地点: " + feature.properties.OBJECTID; layer.bindPopup(field); }, pointToLayer: function (feature, layer) { if (feature.properties.OBJECTID > 25) { return L.marker(layer, { icon: IconPin01 }); }else if (feature.properties.OBJECTID <= 25) { return L.marker(layer, { icon: IconPin02 }); } } }).addTo(PointAll); JS
var Map_AddLayer = { "目標地点": PointAll }; L.control.layers( Map_BaseLayer, Map_AddLayer,
{collapsed:false} ).addTo(map); JS
<script src="./vecter/line.geojson"></script> HTML
var LineAll = L.layerGroup().addTo(map); var line_geojson = L.geoJson(linedata, { style:
{ "color": "#58BE89", "weight": 3, "opacity": 0.7, "dashArray":[10, 5] }, onEachFeature: function (feature, layer) { var field ="距離(m): " + feature.properties.Shape_len; layer.bindPopup(field); }, clickable: true }).addTo(LineAll); var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll }; JS
<script src="./vecter/polygon.geojson"></script> HTML
var PolygonAll = L.layerGroup().addTo(map); var PolygonGeojson = L.geoJson(polygondata, { style:
function(feature) { if (feature.properties.MEANmax_ < 2) { return { "color": "#90D6E5", "weight": 0.5, "fill": true, "fillColor":"#90D6E5", "fillOpacity":0.4 }; }else if (feature.properties.MEANmax_ >= 2 && feature.properties.MEANmax_ < 4) { return { "color": "#2A5CAA", "weight": 0.5, "fill": true, "fillColor":"#2A5CAA", "fillOpacity":0.4 }; }else if (feature.properties.MEANmax_ >= 4 && feature.properties.MEANmax_ < 6) { return { "color": "#F4EE4F", "weight": 0.5, "fill": true, "fillColor":"#F4EE4F", "fillOpacity":0.6 }; }else if (feature.properties.MEANmax_ >= 6 && feature.properties.MEANmax_ < 8) { JS
var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll, "津波区域": PolygonAll
}; JS
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
©OpenStreetMap contributors Leaflet LocateControl
<script src="./plugin/leaflet-locatecontrol/L.Control.Locate.min.js"></script> <link href="./plugin/leaflet-locatecontrol/L.Control.Locate.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" > HTML
L.control.locate().addTo(map); JS
©OpenStreetMap contributors Leaflet Label
<script src="./plugin/leaflet-label/leaflet.label.js"></script> <link href="./plugin/leaflet-label/leaflet.label.css" rel="stylesheet"/> HTML
onEachFeature: function (feature, layer) { var field ="浸水深さ(m): " +
feature.properties.MEANmax_; layer.bindLabel(field); } JS
Other Cases その他事例
その他のプラグイン
©OpenStreetMap contributors Leaflet Draw
©OpenStreetMap contributors Leaflet MeasureControl
©OpenStreetMap contributors Leaflet Minimap
©OpenStreetMap contributors Leaflet Routing Machine
ハイブリッドアプリ
CORDOVA
PhoneGap
React Native
Monaca
使い方
新規プロジェクトの作成
プロジェクト選択
ファイルをインポート
プレビュー機能・実機検証
QMetaTiles プラグイン
CARTO,Mapboxと連携
みんなの公園マップ - 札幌版 -
Leaflet
CARTO
Mapbox
おつかれさまでした!