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

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

Avatar for Yasunori Kirimoto Yasunori Kirimoto
November 04, 2016
Technology
0
590

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

FOSS4G 2016 TOKYO ハンズオンデイ 発表資料

Avatar for Yasunori Kirimoto

Yasunori Kirimoto

November 04, 2016
Tweet

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
370
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
3
590
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
530
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
320
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
390
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
680
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
780

Other Decks in Technology

See All in Technology
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.3k
pmconf 2025 大阪「生成AI時代に未来を切り開くためのプロダクト戦略：圧倒的生産性を実現するためのプロダクトサイクロン」 / The Product Cyclone for Outstanding Productivity
Avatar for yama@muteki yamamuteki
3
2.9k
Flutter Thread Merge - Flutter Tokyo #11
Avatar for JaiChangPark itsmedreamwalker
1
110
リアーキテクティングのその先へ 〜品質と開発生産性の壁を越えるプラットフォーム戦略〜 / architecture-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
8.4k
Kill the Vibe? Architecture in the age of AI
Avatar for Stefan Toth stoth
1
110
マルチドライブアーキテクチャ: 複数の駆動力でプロダクトを前進させる
Avatar for Kenichi SUZUKI knih
0
12k
"なるべくスケジューリングしない" を実現する "PreferNoSchedule" taint
Avatar for Kazuki Suda superbrothers
0
120
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
段階的に進める、 挫折しない自宅サーバ入門
Avatar for yut yu_kod
3
610
国産クラウドを支える設計とチームの変遷
“技術・組織・ミッション”
Avatar for kazeburo kazeburo
6
10k
[続・営業向け 誰でも話せるOCI セールストーク] AWSよりOCIの優位性が分からない編(2025年11月21日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
150
Digital omtanke på Internetdagarna 2025
Avatar for Per Axbom axbom
PRO
0
140

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
187
29k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

Transcript

  1. Leaflet 初級編 MIERUNE, LLC. / Yasunori Kirimoto 2016.11.04 FOSS4G 2016

    TOKYO ハンズオン - Web地図サイトを構築してみよう-

  2. MIERUNE, LLC. Yasunori Kirimoto

  3. None

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

  5. Introduction はじめに

  6. 事前準備できてますか？？ http://bit.ly/leaflet161104

  7. HTML CSS JS Web Technology

  8. JavaScript Library

  9. OpenLayers 3

  10. CESIUM

  11. D3.js

  12. Leaflet

  13. Web Service

  14. CARTO

  15. Mapbox

  16. Hands On ハンズオン

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

  18. demo demo

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

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

  21. フォルダ構成

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

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

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

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

  25. OpenStreetMap

  26. None

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

  28. 地理院地図

  29. None

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

  31. None

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

  33. MIERUNE地図

  34. None

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

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

  37. レイヤ統合

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

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

  40. レイヤ表示ON

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

  42. スケール

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

  44. ズームバー

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

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

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

  47. マーカー

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

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

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

  50. ライン

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

  52. ポリゴン

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

  54. オーバーレイヤ

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

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

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

  57. データ準備

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

  59. オープンデータ

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

  61. 表示

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

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

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

  65. アレンジ

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

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

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

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

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

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

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

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

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

    }; JS

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

  75. ©OpenStreetMap contributors Leaflet LocateControl

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

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

  78. ©OpenStreetMap contributors Leaflet Label

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

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

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

  81. Other Cases その他事例

  82. その他のプラグイン

  83. ©OpenStreetMap contributors Leaflet Draw

  84. ©OpenStreetMap contributors Leaflet MeasureControl

  85. ©OpenStreetMap contributors Leaflet Minimap

  86. ©OpenStreetMap contributors Leaflet Routing Machine

  87. ハイブリッドアプリ

  88. CORDOVA

  89. PhoneGap

  90. React Native

  91. Monaca

  92. 使い方

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

  94. プロジェクト選択

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

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

  97. QMetaTiles プラグイン

  98. CARTO,Mapboxと連携

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

  100. Leaflet

  101. CARTO

  102. Mapbox

  103. おつかれさまでした！