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
600

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
550
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
3
730
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
700
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
1.3k
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
630
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
340
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
410
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
710
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
810

Other Decks in Technology

See All in Technology
製造業から学んだ「本質を守り現場に合わせるアジャイル実践」
Avatar for yaskamito kamitokusari
0
300
「リリースファースト」の実感を届けるには 〜停滞するチームに変化を起こすアプローチ〜 #RSGT2026
Avatar for KintoTech_Dev kintotechdev
0
560
形式手法特論：コンパイラの「正しさ」は証明できるか？ #burikaigi / BuriKaigi 2026
Avatar for y_taka_23 ytaka23
15
4.1k
_第4回__AIxIoTビジネス共創ラボ紹介資料_20251203.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
170
AWS re:Invent 2025 を振り返る
Avatar for kazzpapa3 kazzpapa3
2
110
First-Principles-of-Scrum
Avatar for Kenji Hiranabe hiranabe
3
1.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
59k
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
Authlete で実装する MCP OAuth 認可サーバー #CIMD の実装を添えて
Avatar for watahani watahani
0
400
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
12k
Oracle Cloud Infrastructure：2025年12月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
190
小さく、早く、可能性を多産する。生成AIプロジェクト / prAIrie-dog
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
320

Featured

See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
KATA
Avatar for Megan Lloyd mclloyd
PRO
33
15k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.5k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
31
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
0
1.9M
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
140

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