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
570

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
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
290
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
910
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
530
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
280
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
350
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
620
MapLibreとAmazon Location Service
Avatar for Yasunori Kirimoto dayjournal
1
710
AWS re:Invent 2023 現地での体験
Avatar for Yasunori Kirimoto dayjournal
1
1k
英語が苦手でも世界にアウトプットしている話
Avatar for Yasunori Kirimoto dayjournal
3
1.9k

Other Decks in Technology

See All in Technology
生成AI開発案件におけるClineの業務活用事例とTips
Avatar for Shinya Masadome（東京AI祭） shinya337
0
220
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
140
What’s new in Android development tools
Avatar for Yuki Anzai yanzm
0
120
Beyond Kaniko: Navigating Unprivileged Container Image Creation
Avatar for Felix Dreissig f30
0
130
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
Avatar for nwiizo nwiizo
6
4.1k
ドメイン特化なCLIPモデルとデータセットの紹介
Avatar for tattaka tattaka
2
570
asken AI勉強会(Android)
Avatar for 佐藤忠 tadashi_sato
0
180
Glacierだからってコストあきらめてない？ / JAWS Meet Glacier Cost
Avatar for sasaki taishin
1
140
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
170
赤煉瓦倉庫勉強会｢Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記｣
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
2
300
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
26k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
3
6.2k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
Done Done
Avatar for chrislema chrislema
184
16k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k

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