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
June 30, 2017
Technology
0
340
Leaflet初級編 - Web地図サイトを構築してみよう-
FOSS4G 2017 Hokkaido ハンズオンデイ 発表資料
Yasunori Kirimoto
June 30, 2017
Tweet
Share
More Decks by Yasunori Kirimoto
See All by Yasunori Kirimoto
MapLibreとAmazon Location Service
dayjournal
1
260
AWS re:Invent 2023 現地での体験
dayjournal
1
640
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.4k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
590
MIERUNEの組織とカルチャー
dayjournal
0
210
AWSにおける地理空間情報活用
dayjournal
0
520
FOSS4Gカルチャーとクラウド
dayjournal
0
500
Introduction to Amazon Location Service
dayjournal
0
460
AWSではじめる位置情報アプリケーション
dayjournal
1
1.2k
Other Decks in Technology
See All in Technology
情報の世界 2024年度 第10回「データとセンシングの概要」 #情報の世界 / Data and Sensing 2024
yumulab
0
170
Spring for GraphQL の実践 #jjug_ccc #jjug_ccc_c / Spring for GraphQL in Practice
sms_tech
1
690
SSII2024 [OS1] 自動運転における 重要技術とトレンド紹介
ssii
PRO
0
260
SSII2024 [OS3] 生成AIと完全自動運転
ssii
PRO
0
240
LayerXとMDMのリスク評価と年次対応の実例(公開版)
ken5scal
1
490
Unified Diff 形式の差分から Go AST を構築して feature flag を自動計装する
biwashi
9
890
Guard を利用した AWS Config ルール
yhana
0
270
Spring Bootで作成したAPIテストのコスパを高めよう!
gorou_178
1
280
Scala to WebAssembly: Exploring the How and Why
tanishiking
0
380
週刊AWSキャッチアップ 生成AI編(2024/5/27週)
minorun365
PRO
5
150
Extending kotlin-inject for fun & profit
vrallev
2
210
AWSネイティブなセキュリティを考える
wkm2
1
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
126
8.6k
Code Review Best Practice
trishagee
57
16k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Art of Programming - Codeland 2020
erikaheidi
46
12k
Automating Front-end Workflow
addyosmani
1359
200k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
The Cult of Friendly URLs
andyhume
74
5.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
42
4.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
247
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
19
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
Transcript
Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,
under ODbL. Leaflet 初級編 MIERUNE Inc. / Yasunori Kirimoto 2017.06.30 FOSS4G 2017 Hokkaido ハンズオン - Web地図サイトを構築してみよう-
Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,
under ODbL. 地理空間情報エンジニア Yasunori Kirimoto
MIERUNE地図 Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap
contributors, under ODbL.
KIKI-TORI MAP 国立環境研究所(2017)KIKI-TORI マップ, 国立環境研究所 生物・生態系環境研究センター制作. http://www.nies.go.jp/kikitori/contents/map (2017/6/18 閲覧)
Contents はじめに ハンズオン その他事例
Introduction はじめに
事前準備できてますか?? http://day-journal.com/blog/day-016
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 その他事例
その他のプラグイン
Leaflet.MultiTileLayer
©OpenStreetMap contributors Leaflet Minimap
Leaflet.heat
©OpenStreetMap contributors Leaflet Draw
Leaflet-icon-pulse
©OpenStreetMap contributors Leaflet MeasureControl
Leaflet Animated Marker
©OpenStreetMap contributors Leaflet Routing Machine
ハイブリッドアプリ
CORDOVA
PhoneGap
Monaca
使い方
新規プロジェクトの作成
プロジェクト選択
ファイルをインポート
プレビュー機能・実機検証
CARTO,Mapboxと連携
みんなの公園マップ - 札幌版 -
Leaflet
CARTO
Mapbox
Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,
under ODbL. おつかれさまでした!