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