$30 off During Our Annual Pro Sale. View Details »

Leaflet初級編 - Web地図サイトを構築してみよう-

Avatar for Yasunori Kirimoto Yasunori Kirimoto
June 30, 2017
Technology
0
380

Leaflet初級編 - Web地図サイトを構築してみよう-

FOSS4G 2017 Hokkaido ハンズオンデイ 発表資料

Avatar for Yasunori Kirimoto

Yasunori Kirimoto

June 30, 2017
Tweet

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
400
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
3
610
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
560
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
1.2k
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
610
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
330
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
400
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
690
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
790

Other Decks in Technology

See All in Technology
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
Avatar for suto sutotakeshi
0
500
エンジニアリングをやめたくないので問い続ける
Avatar for estie | エスティ estie
2
1.2k
プロンプトやエージェントを自動的に作る方法
Avatar for shibuiwilliam shibuiwilliam
11
9.3k
JEDAI認定プログラム JEDAI Order 2026 エントリーのご案内 / JEDAI Order 2026 Entry
Avatar for Databricks Japan databricksjapan
0
110
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
660
30分であなたをOmniのファンにしてみせます～分析画面のクリック操作をそのままコード化できるAI-ReadyなBIツール～
Avatar for Sagara sagara
0
150
ガバメントクラウド利用システムのライフサイクルについて
Avatar for 高橋広和 techniczna
0
190
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
980
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
Avatar for maaaato maaaato
0
280
Microsoft Agent 365 についてゆっくりじっくり理解する！
Avatar for skmkzyk skmkzyk
0
340
乗りこなせAI駆動開発の波
Avatar for Ikko Eltociear Ashimine eltociear
1
1.1k

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k

Transcript

  1. Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,

    under ODbL. Leaflet 初級編 MIERUNE Inc. / Yasunori Kirimoto 2017.06.30 FOSS4G 2017 Hokkaido ハンズオン - Web地図サイトを構築してみよう-

  2. Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,

    under ODbL. 地理空間情報エンジニア Yasunori Kirimoto

  3. MIERUNE地図 Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap

    contributors, under ODbL.

  4. KIKI-TORI MAP 国立環境研究所(2017)KIKI-TORI マップ, 国立環境研究所 生物・生態系環境研究センター制作. ​http://www.nies.go.jp/kikitori/contents/map (2017/6/18 閲覧)

  5. Contents はじめに ハンズオン その他事例

  6. Introduction はじめに

  7. 事前準備できてますか？？ http://day-journal.com/blog/day-016

  8. HTML CSS JS Web Technology

  9. JavaScript Library

  10. OpenLayers 3

  11. CESIUM

  12. D3.js

  13. Leaflet

  14. Web Service

  15. CARTO

  16. Mapbox

  17. Hands On ハンズオン

  18. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

  19. demo demo

  20. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

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

  22. フォルダ構成

  23. 初期表示状態

  24. <!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

  25. html, body { height: 100%; padding: 0; margin: 0; }

    #map { z-index: 0; height: 100%; } CSS

  26. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

  27. OpenStreetMap

  28. None

  29. var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>

    contributors' }).addTo(map); map.setView([35.680899409847584, 139.76712226867676], 16); JS

  30. 地理院地図

  31. None

  32. 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

  33. None

  34. 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

  35. MIERUNE地図

  36. None

  37. 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

  38. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

  39. レイヤ統合

  40. 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: '&copy; <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

  41. 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

  42. レイヤ表示ON

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

  44. スケール

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

  46. ズームバー

  47. var map = L.map('map', { center: [lat, lng], zoom: 15,

    maxZoom: 18, zoomControl: false, layers: [m_mono] }); JS

  48. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

  49. マーカー

  50. var Map_Point = L.marker( [35.68089940984, 139.7671222686] ).addTo(map); var comment =

    '東京駅だよ!!'; Map_Point.bindPopup(comment); JS

  51. 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

  52. ライン

  53. 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

  54. ポリゴン

  55. 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

  56. オーバーレイヤ

  57. var Map_AddLayer = { "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon

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

  58. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

  59. データ準備

  60. 地理空間データ作成 : geojson.io

  61. オープンデータ

  62. 国土数値情報（都市公園データ）を使用 QGIS : Shp → GeoJSON 変換

  63. 表示

  64. 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

  65. <script src="./vecter/map.geojson"></script> HTML

  66. var GeoJsonSample = L.geoJson(sampledata).addTo(map); JS

  67. アレンジ

  68. <script src="./vecter/point.geojson"></script> HTML

  69. 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

  70. var Map_AddLayer = { "目標地点": PointAll }; L.control.layers( Map_BaseLayer, Map_AddLayer,

    {collapsed:false} ).addTo(map); JS

  71. <script src="./vecter/line.geojson"></script> HTML

  72. 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

  73. <script src="./vecter/polygon.geojson"></script> HTML

  74. 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

  75. var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll, "津波区域": PolygonAll

    }; JS

  76. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン

  77. ©OpenStreetMap contributors Leaflet LocateControl

  78. <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

  79. L.control.locate().addTo(map); JS

  80. ©OpenStreetMap contributors Leaflet Label

  81. <script src="./plugin/leaflet-label/leaflet.label.js"></script> <link href="./plugin/leaflet-label/leaflet.label.css" rel="stylesheet"/> HTML

  82. onEachFeature: function (feature, layer) { var field ="浸水深さ(m): " +

    feature.properties.MEANmax_; layer.bindLabel(field); } JS

  83. Other Cases その他事例

  84. その他のプラグイン

  85. Leaflet.MultiTileLayer

  86. ©OpenStreetMap contributors Leaflet Minimap

  87. Leaflet.heat

  88. ©OpenStreetMap contributors Leaflet Draw

  89. Leaflet-icon-pulse

  90. ©OpenStreetMap contributors Leaflet MeasureControl

  91. Leaflet Animated Marker

  92. ©OpenStreetMap contributors Leaflet Routing Machine

  93. ハイブリッドアプリ

  94. CORDOVA

  95. PhoneGap

  96. Monaca

  97. 使い方

  98. 新規プロジェクトの作成

  99. プロジェクト選択

  100. ファイルをインポート

  101. プレビュー機能・実機検証

  102. CARTO,Mapboxと連携

  103. みんなの公園マップ - 札幌版 -

  104. Leaflet

  105. CARTO

  106. Mapbox

  107. Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,

    under ODbL. おつかれさまでした！