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

Leaflet 初級編

MIERUNE, LLC. / Yasunori Kirimoto

2016.11.04FOSS4G 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>

 <script src="./library/leaflet-0.7.3/leaflet.js"></script> <link href="./library/leaflet-0.7.3/leaflet.css" rel="stylesheet" />

 <link href="./css/stylesheet.css" rel="stylesheet" /> </head><body>

 <div id="map"></div>  <script src="./js/script.js"></script>

</body></html>

HTML

　 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

map.setView([35.680899409847584, 139.76712226867676], 16);

JS

地理院地図

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

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

MIERUNE地図

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

完成イメージ

基本構成

背景地図

コントロール

オブジェクト

GeoJSON

プラグイン

レイヤ統合

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

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

レイヤ表示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(comment);

JS

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

ライン

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

ポリゴン

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

オーバーレイヤ

var Map_AddLayer = { "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon};

L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false}).addTo(map);

JS

完成イメージ

基本構成

背景地図

コントロール

オブジェクト

GeoJSON

プラグイン

データ準備

地理空間データ作成 : geojson.io

オープンデータ

国土数値情報（都市公園データ）を使用

QGIS : Shp → GeoJSON 変換

表示

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

<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], 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

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, "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

<script src="./vecter/polygon.geojson"></script>

HTML

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

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.min.css" rel="stylesheet"/><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >

HTML

L.control.locate().addTo(map);

JS


Leaflet Label

<script src="./plugin/leaflet-label/leaflet.label.js"></script><link href="./plugin/leaflet-label/leaflet.label.css" rel="stylesheet"/>

HTML

onEachFeature: function (feature, layer) { var field =" 浸水深さ (m): " + feature.properties.MEANmax_; layer.bindLabel(field);}

JS

Other Cases

その他事例

その他のプラグイン


Leaflet Draw


Leaflet MeasureControl


Leaflet Minimap


Leaflet Routing Machine

ハイブリッドアプリ

CORDOVA

PhoneGap

Monaca

使い方

新規プロジェクトの作成

プロジェクト選択

ファイルをインポート

プレビュー機能・実機検証

QMetaTiles プラグイン

CARTO,Mapboxと連携

みんなの公園マップ - 札幌版 -

Leaflet

CARTO

Mapbox

おつかれさまでした！