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

Leaflet 初級編
MIERUNE, LLC. / Yasunori Kirimoto
2016.11.04
FOSS4G 2016 TOKYO ハンズオン
- Web地図サイトを構築してみよう-

MIERUNE, LLC.
Yasunori Kirimoto

Contents
はじめに
ハンズオン
その他事例

事前準備できてますか？？
http://bit.ly/leaflet161104

完成イメージ
基本構成
背景地図
コントロール
オブジェクト
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

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
}).addTo(map);
JS

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

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

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

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.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 ] } },
"宮部記念緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.33550164, 43.0666937 ] } },
"偕楽園緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.34429626, 43.06828667 ] } },
"八軒コスモス公園" }, "geometry": { "type": "Point", "coordinates":
[ 141.32328053000001, 43.08470141 ] } }
]
};
GeoJSON

var GeoJsonSample = L.geoJson(sampledata).addTo(map);
JS

"目標地点": PointAll
};
L.control.layers(
Map_BaseLayer,
Map_AddLayer,
{collapsed:false}
).addTo(map);
JS

var LineAll = L.layerGroup().addTo(map);
var line_geojson = L.geoJson(linedata, {
style: {
"color": "#58BE89",
"weight": 3,
"opacity": 0.7,
"dashArray":[10, 5]
},
var field ="距離(m): " + feature.properties.Shape_len;
layer.bindPopup(field);
},
clickable: true
}).addTo(LineAll);
"目標地点": PointAll,
"避難経路": LineAll
};
JS

"目標地点": PointAll,
"避難経路": LineAll,
"津波区域": PolygonAll
};
JS

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

Leaflet Label

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

Leaflet Draw

Leaflet MeasureControl

Leaflet Minimap

Leaflet Routing Machine

新規プロジェクトの作成

ファイルをインポート

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

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

おつかれさまでした！

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

More Related Content

What's hot (20)

Similar to Leaflet初級編 - Web地図サイトを構築してみよう- (20)

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