Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Leaflet 初級編
MIERUNE, LLC. / Yasunori Kirimoto
2016.11.04
FOSS4G 2016 TOKYO ハンズオン
- Web地図サイトを構築してみよう-
MIERUNE, LLC.
Yasunori Kirimoto
Contents
はじめに
ハンズオン
その他事例
Introduction
はじめに
事前準備できてますか??
http://bit.ly/leaflet161104
HTML CSS JS
Web Technology
JavaScript Library
OpenLayers 3
CESIUM
D3.js
Leaflet
Web Service
CARTO
Mapbox
Hands On
ハンズオン
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
demodemo
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
index.html
stylesheet.css
script.js
HTML
CSS
JS
フォルダ構成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<!-- Leafletライブラリ読み込み -->
<sc...
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
CSS
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
OpenStreetMap
var map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="...
地理院地図
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a
href='http://www.gsi.go.jp/kik...
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a
href='http://www.gsi.go.jp/kika...
MIERUNE地図
L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution: "Maptiles by <a href='http://mierune...
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
レイヤ統合
var t_pale = new
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a
href='http://...
var lat = 35.680899409847584;
var lng = 139.76712226867676;
var map = L.map('map', {
center: [lat, lng],
zoom: 15,
maxZoom...
レイヤ表示ON
L.control.layers(
Map_BaseLayer,
null,
{collapsed:false}
).addTo(map);
JS
スケール
L.control.scale({
imperial: false,
maxWidth: 300
}).addTo(map);
JS
ズームバー
var map = L.map('map', {
center: [lat, lng],
zoom: 15,
maxZoom: 18,
zoomControl: false,
layers: [m_mono]
});
JS
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
マーカー
var Map_Point = L.marker(
[35.68089940984, 139.7671222686]
).addTo(map);
var comment = '東京駅だよ!!';
Map_Point.bindPopup(comm...
var IconPin01 = L.icon({
iconUrl: "./img/pin01.png",
iconSize: [25, 25],
iconAnchor: [0, 25],
popupAnchor: [0, -35]
});
va...
ライン
var Map_Line = L.polyline([
[35.67500798914924,139.75952625274658],
[35.67845922918971,139.76094245910645],
[35.6893697435...
ポリゴン
var Map_Polygon = L.polygon([
[35.675949251235025,139.76617813110352],
[35.67410157813001,139.77188587188718],
[35.6745547...
オーバーレイヤ
var Map_AddLayer = {
"Point": Map_Point,
"Line": Map_Line,
"Polygon": Map_Polygon
};
L.control.layers(
Map_BaseLayer,
Map_...
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
データ準備
地理空間データ作成 : geojson.io
オープンデータ
国土数値情報(都市公園データ)を使用
QGIS : Shp → GeoJSON 変換
表示
var sampledata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:...
<script src="./vecter/map.geojson"></script>
HTML
var GeoJsonSample = L.geoJson(sampledata).addTo(map);
JS
アレンジ
<script src="./vecter/point.geojson"></script>
HTML
var lat = 42.333174;
var lng = 141.004646;
var IconPin02 = L.icon({
iconUrl: "./img/pin02.png",
iconSize: [25, 25],
iconAn...
var Map_AddLayer = {
"目標地点": PointAll
};
L.control.layers(
Map_BaseLayer,
Map_AddLayer,
{collapsed:false}
).addTo(map);
JS
<script src="./vecter/line.geojson"></script>
HTML
var LineAll = L.layerGroup().addTo(map);
var line_geojson = L.geoJson(linedata, {
style: {
"color": "#58BE89",
"weight": 3...
<script src="./vecter/polygon.geojson"></script>
HTML
var PolygonAll = L.layerGroup().addTo(map);
var PolygonGeojson = L.geoJson(polygondata, {
style: function(feature) {
if (f...
var Map_AddLayer = {
"目標地点": PointAll,
"避難経路": LineAll,
"津波区域": PolygonAll
};
JS
完成イメージ
基本構成
背景地図
コントロール
オブジェクト
GeoJSON
プラグイン
©OpenStreetMap contributors
Leaflet LocateControl
<script src="./plugin/leaflet-locatecontrol/L.Control.Locate.min.js"></script>
<link href="./plugin/leaflet-locatecontrol/...
L.control.locate().addTo(map);
JS
©OpenStreetMap contributors
Leaflet Label
<script src="./plugin/leaflet-label/leaflet.label.js"></script>
<link href="./plugin/leaflet-label/leaflet.label.css" rel=...
onEachFeature: function (feature, layer) {
var field ="浸水深さ(m): " + feature.properties.MEANmax_;
layer.bindLabel(field);
}...
Other Cases
その他事例
その他のプラグイン
©OpenStreetMap contributors
Leaflet Draw
©OpenStreetMap contributors
Leaflet MeasureControl
©OpenStreetMap contributors
Leaflet Minimap
©OpenStreetMap contributors
Leaflet Routing Machine
ハイブリッドアプリ
CORDOVA
PhoneGap
Monaca
使い方
新規プロジェクトの作成
プロジェクト選択
ファイルをインポート
プレビュー機能・実機検証
QMetaTiles プラグイン
CARTO,Mapboxと連携
みんなの公園マップ - 札幌版 -
Leaflet
CARTO
Mapbox
おつかれさまでした!
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Upcoming SlideShare
Loading in …5
×

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

3,832 views

Published on

FOSS4G 2016 TOKYO ハンズオンデイ 発表資料

Published in: Technology
  • Be the first to comment

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

  1. 1. Leaflet 初級編 MIERUNE, LLC. / Yasunori Kirimoto 2016.11.04 FOSS4G 2016 TOKYO ハンズオン - Web地図サイトを構築してみよう-
  2. 2. MIERUNE, LLC. Yasunori Kirimoto
  3. 3. Contents はじめに ハンズオン その他事例
  4. 4. Introduction はじめに
  5. 5. 事前準備できてますか?? http://bit.ly/leaflet161104
  6. 6. HTML CSS JS Web Technology
  7. 7. JavaScript Library
  8. 8. OpenLayers 3
  9. 9. CESIUM
  10. 10. D3.js
  11. 11. Leaflet
  12. 12. Web Service
  13. 13. CARTO
  14. 14. Mapbox
  15. 15. Hands On ハンズオン
  16. 16. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  17. 17. demodemo
  18. 18. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  19. 19. index.html stylesheet.css script.js HTML CSS JS
  20. 20. フォルダ構成
  21. 21. <!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
  22. 22. html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
  23. 23. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  24. 24. OpenStreetMap
  25. 25. 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
  26. 26. 地理院地図
  27. 27. 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
  28. 28. 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
  29. 29. MIERUNE地図
  30. 30. 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
  31. 31. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  32. 32. レイヤ統合
  33. 33. 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
  34. 34. 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
  35. 35. レイヤ表示ON
  36. 36. L.control.layers( Map_BaseLayer, null, {collapsed:false} ).addTo(map); JS
  37. 37. スケール
  38. 38. L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); JS
  39. 39. ズームバー
  40. 40. var map = L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: false, layers: [m_mono] }); JS
  41. 41. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  42. 42. マーカー
  43. 43. var Map_Point = L.marker( [35.68089940984, 139.7671222686] ).addTo(map); var comment = '東京駅だよ!!'; Map_Point.bindPopup(comment); JS
  44. 44. 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
  45. 45. ライン
  46. 46. 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
  47. 47. ポリゴン
  48. 48. 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
  49. 49. オーバーレイヤ
  50. 50. var Map_AddLayer = { "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
  51. 51. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  52. 52. データ準備
  53. 53. 地理空間データ作成 : geojson.io
  54. 54. オープンデータ
  55. 55. 国土数値情報(都市公園データ)を使用 QGIS : Shp → GeoJSON 変換
  56. 56. 表示
  57. 57. 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
  58. 58. <script src="./vecter/map.geojson"></script> HTML
  59. 59. var GeoJsonSample = L.geoJson(sampledata).addTo(map); JS
  60. 60. アレンジ
  61. 61. <script src="./vecter/point.geojson"></script> HTML
  62. 62. 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
  63. 63. var Map_AddLayer = { "目標地点": PointAll }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
  64. 64. <script src="./vecter/line.geojson"></script> HTML
  65. 65. 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
  66. 66. <script src="./vecter/polygon.geojson"></script> HTML
  67. 67. 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
  68. 68. var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll, "津波区域": PolygonAll }; JS
  69. 69. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
  70. 70. ©OpenStreetMap contributors Leaflet LocateControl
  71. 71. <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
  72. 72. L.control.locate().addTo(map); JS
  73. 73. ©OpenStreetMap contributors Leaflet Label
  74. 74. <script src="./plugin/leaflet-label/leaflet.label.js"></script> <link href="./plugin/leaflet-label/leaflet.label.css" rel="stylesheet"/> HTML
  75. 75. onEachFeature: function (feature, layer) { var field ="浸水深さ(m): " + feature.properties.MEANmax_; layer.bindLabel(field); } JS
  76. 76. Other Cases その他事例
  77. 77. その他のプラグイン
  78. 78. ©OpenStreetMap contributors Leaflet Draw
  79. 79. ©OpenStreetMap contributors Leaflet MeasureControl
  80. 80. ©OpenStreetMap contributors Leaflet Minimap
  81. 81. ©OpenStreetMap contributors Leaflet Routing Machine
  82. 82. ハイブリッドアプリ
  83. 83. CORDOVA
  84. 84. PhoneGap
  85. 85. Monaca
  86. 86. 使い方
  87. 87. 新規プロジェクトの作成
  88. 88. プロジェクト選択
  89. 89. ファイルをインポート
  90. 90. プレビュー機能・実機検証
  91. 91. QMetaTiles プラグイン
  92. 92. CARTO,Mapboxと連携
  93. 93. みんなの公園マップ - 札幌版 -
  94. 94. Leaflet
  95. 95. CARTO
  96. 96. Mapbox
  97. 97. おつかれさまでした!

×