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

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

Yasunori Kirimoto
June 30, 2017
Technology
0
340

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

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

Yasunori Kirimoto

June 30, 2017
Tweet

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
MapLibreとAmazon Location Service
dayjournal
1
210
AWS re:Invent 2023 現地での体験
dayjournal
1
580
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.4k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
560
MIERUNEの組織とカルチャー
dayjournal
0
200
AWSにおける地理空間情報活用
dayjournal
0
480
FOSS4Gカルチャーとクラウド
dayjournal
0
480
Introduction to Amazon Location Service
dayjournal
0
450
AWSではじめる位置情報アプリケーション
dayjournal
1
1.1k

Other Decks in Technology

See All in Technology
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
780
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
RailsConf 2024 Keynote "Startups on Rails in 2024"
irinanazarova
0
820
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
900
データ基盤を支える技術
chanyou0311
5
3k
Oracle Cloud Infrastructure データベース・クラウド：各バージョンのサポート期間
oracle4engineer
PRO
12
7.9k
TDD - Test Driven Drupal
opdavies
0
3k
OPENLOGI Company Profile for engineer
hr01
1
2.2k
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.1k
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
160
1Q86
kawaguti
PRO
2
190

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
33
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Scaling GitHub
holman
457
140k
Fireside Chat
paigeccino
22
2.7k
Six Lessons from altMBA
skipperchong
22
3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
The Brand Is Dead. Long Live the Brand.
mthomps
49
30k
Rails Girls Zürich Keynote
gr2m
91
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k

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