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

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

Yasunori Kirimoto
November 04, 2016
Technology
0
530

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

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

Yasunori Kirimoto

November 04, 2016
Tweet

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
dayjournal
0
75
State of Open Source Web Mapping Libraries
dayjournal
0
430
AWS Heroes Map 秘伝のレシピ
dayjournal
2
220
State of Amazon Location Service
dayjournal
0
280
State of Amazon Location Service
dayjournal
1
480
MapLibreとAmazon Location Service
dayjournal
1
580
AWS re:Invent 2023 現地での体験
dayjournal
1
950
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.8k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
800

Other Decks in Technology

See All in Technology
2.5Dモデルのすべて
yu4u
2
610
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
開発スピードは上がっている…品質はどうする？ スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
トラシューアニマルになろう ～開発者だからこそできる、安定したサービス作りの秘訣～
jacopen
2
1.5k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Done Done
chrislema
182
16k
The Language of Interfaces
destraynor
156
24k
Side Projects
sachag
452
42k

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