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
430
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
1k
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
570
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
300
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
370
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
650
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
750
AWS re:Invent 2023 現地での体験
Avatar for Yasunori Kirimoto dayjournal
1
1.1k
英語が苦手でも世界にアウトプットしている話
Avatar for Yasunori Kirimoto dayjournal
3
1.9k

Other Decks in Technology

See All in Technology
今！ソフトウェアエンジニアがハードウェアに手を出すには
Avatar for mackee mackee
12
4.7k
エラーとアクセシビリティ
Avatar for Tajima Sachiko schktjm
1
1.2k
サンドボックス技術でAI利活用を促進する
Avatar for k-nagase koh_naga
0
200
複数サービスを支える マルチテナント型 Batch MLプラットフォーム
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
340
AWSを利用する上で知っておきたい名前解決のはなし（10分版）
Avatar for nagisa_53 nagisa53
10
3.1k
これでもう迷わない！Jetpack Composeの書き方実践ガイド
Avatar for ZOZO Developers zozotech
PRO
0
420
Platform開発が先行する Platform Engineeringの違和感
Avatar for KintoTech_Dev kintotechdev
4
570
Android Audio: Beyond Winning On It
Avatar for Atsushi Eno atsushieno
0
120
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
130
品質視点から考える組織デザイン/Organizational Design from Quality
Avatar for miisan mii3king
0
200
roppongirb_20250911
Avatar for Kuniaki IGARASHI igaiga
1
220
2025年夏 コーディングエージェントを統べる者
Avatar for nwiizo nwiizo
0
160

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
112
20k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
2
41

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