Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

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

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

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

Avatar for Yasunori Kirimoto

Yasunori Kirimoto

November 04, 2016

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
Meet MIERUNE
Avatar for Yasunori Kirimoto dayjournal
0
92
Amazon Location Service Plugin for QGIS: Basemaps, Geocoding, and Routing
Avatar for Yasunori Kirimoto dayjournal
0
110
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
710
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
3
840
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
1k
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
1.7k
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
770
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
440
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
520

Other Decks in Technology

See All in Technology
すぐできる衛星通信対応 あとは山奥に行くだけ
Avatar for tatetate55 tatetate55
0
120
The Agent Builder Loop from Daily Work to OSS
Avatar for みのるん minorun365
PRO
3
180
技術的負債から考える、AI時代のエンジニアリング投資 — ビズリーチの技術的負債と向き合った経験から、変更し続けられるソフトウェアを考える/ technical-debt-con2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
1.5k
家のリアーキテクト・リファクタリング
Avatar for Suguru Oki / スー suguruooki
0
150
AI時代、データエンジニアが一番おもろい
Avatar for ゲンシュン genshun9
0
550
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
Avatar for kaz classmethod_kaz
0
340
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
220
Railsのように考える: See through the Master
Avatar for Koji SHIMADA snoozer05
PRO
1
160
登壇の自信を奪う3匹のオバケ / 3 Ghosts That Rob You of Your Confidence in Public Speaking
Avatar for Pauli pauli
8
850
range over func 2年間の軌跡 Issue #56413 はGoのエコシステムをどう変えたか
Avatar for Ryuji Kokubu ryujicre8ive
0
170
2026-09-11 【Snowflake World Tour Tokyo 2026】Snowflakeを起点に、AI Agentが自律稼働し続ける未来へ / Driving AI Agents with Snowflake
Avatar for civitaspo civitaspo
0
390
2026-09-09 【sigma_ucj#1】Sigma を IaC 管理したい！ / IaC for Sigma
Avatar for civitaspo civitaspo
0
130

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
220

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