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

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

Yasunori Kirimoto
June 30, 2017
Technology
0
370

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

FOSS4G 2017 Hokkaido ハンズオンデイ 発表資料

Yasunori Kirimoto

June 30, 2017
Tweet

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
State of Open Source Web Mapping Libraries
dayjournal
0
250
AWS Heroes Map 秘伝のレシピ
dayjournal
2
100
State of Amazon Location Service
dayjournal
0
140
State of Amazon Location Service
dayjournal
1
340
MapLibreとAmazon Location Service
dayjournal
1
410
AWS re:Invent 2023 現地での体験
dayjournal
1
840
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.7k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
740
MIERUNEの組織とカルチャー
dayjournal
0
280

Other Decks in Technology

See All in Technology
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
490
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.6k
信頼性に挑む中で拡張できる・得られる１人のスキルセットとは？
ken5scal
2
530
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
190
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.1k
Taming you application's environments
salaboy
0
180
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
We Have a Design System, Now What?
morganepeng
50
7.2k
BBQ
matthewcrist
85
9.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Rails Girls Zürich Keynote
gr2m
94
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370

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