Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
360
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
930
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
540
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
280
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
350
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
630
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
720
AWS re:Invent 2023 現地での体験
Avatar for Yasunori Kirimoto dayjournal
1
1k
英語が苦手でも世界にアウトプットしている話
Avatar for Yasunori Kirimoto dayjournal
3
1.9k

Other Decks in Technology

See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
18k
Data Engineering Study#30 LT資料
Avatar for tetsuroito tetsuroito
1
530
Bliki (ja), and the Cathedral, and the Bazaar
Avatar for Koichi ITO koic
6
990
エンジニアリングマネージャー“お悩み相談”パネルセッション
Avatar for ar_tama ar_tama
1
580
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
10
990
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
Avatar for Msksgm msksgm
0
170
Building GoReleaser - from shell script to paid product
Avatar for Carlos Alexandro Becker caarlos0
0
220
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか？などなど
Avatar for kazzpapa3 kazzpapa3
2
110
振り返りTransit Gateway ～VPCをいい感じでつなげるために～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
4
230
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
Avatar for CUEBiC Inc. cuebic9bic
2
200
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
270
Microsoft Fabric ガバナンス設計の一歩目を考える
Avatar for Ryoma Nagata ryomaru0825
1
240

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.7k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
840
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k

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. おつかれさまでした！