Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Leaflet初級編 - Web地図サイトを構築してみよう-
Search
Yasunori Kirimoto
November 04, 2016
Technology
0
440
Leaflet初級編 - Web地図サイトを構築してみよう-
FOSS4G 2016 TOKYO ハンズオンデイ 発表資料
Yasunori Kirimoto
November 04, 2016
Tweet
Share
More Decks by Yasunori Kirimoto
See All by Yasunori Kirimoto
MapLibreとAmazon Location Service
dayjournal
1
230
AWS re:Invent 2023 現地での体験
dayjournal
1
600
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.4k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
570
MIERUNEの組織とカルチャー
dayjournal
0
200
AWSにおける地理空間情報活用
dayjournal
0
490
FOSS4Gカルチャーとクラウド
dayjournal
0
480
Introduction to Amazon Location Service
dayjournal
0
450
AWSではじめる位置情報アプリケーション
dayjournal
1
1.2k
Other Decks in Technology
See All in Technology
CSPが提供しない、フレッツ網をつかった閉域接続サービス&データ持ち込みにつかえるサービス 3選
armaniacs
1
920
Improve developer experience with Spring Interface Clients Spring I/O 2024
olgamaciaszek
0
110
【OpsJAWS】踏み台サーバーって何がうれしいんだっけ?
hssh2_bin
10
3.6k
.NET 8 New Features with Code Examples
_mertmetin
0
190
組織的なクラウド統制のはじめの一歩_20240529
yhana
0
400
二刀流で切り拓くスタートアップとしてのグロース / Growth of a Startup Pioneering with Dual Expertise
oztick139
0
130
From here to resilience - a travel guide
ufried
1
240
Go初心者が開発やってみた!
azunyan
1
370
上手く活用すればコスト削減につながる、ONTAPの Temperature Sensitive Storage Efficiency (TSSE) の紹介
non97
0
220
チームでテストを実装していく / Implementing Tests as a Team
ropqa
0
140
プロダクトの不具合傾向分析と改善活動について
masayuki_yamad
0
210
第34回 中国地方DB勉強会 in 広島_Why DBRE?
tomomo
7
1.7k
Featured
See All Featured
Bash Introduction
62gerente
605
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
16
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Fireside Chat
paigeccino
22
2.7k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5.1k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
The Invisible Side of Design
smashingmag
294
49k
Rails Girls Zürich Keynote
gr2m
91
13k
Transcript
Leaflet 初級編 MIERUNE, LLC. / Yasunori Kirimoto 2016.11.04 FOSS4G 2016
TOKYO ハンズオン - Web地図サイトを構築してみよう-
MIERUNE, LLC. Yasunori Kirimoto
None
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 プラグイン
demo demo
完成イメージ 基本構成 背景地図 コントロール オブジェクト 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ライブラリ読み込み --> <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
html, body { height: 100%; padding: 0; margin: 0; }
#map { z-index: 0; height: 100%; } CSS
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
OpenStreetMap
None
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
地理院地図
None
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
None
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地図
None
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) { 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
©OpenStreetMap contributors 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 その他事例
その他のプラグイン
©OpenStreetMap contributors Leaflet Draw
©OpenStreetMap contributors Leaflet MeasureControl
©OpenStreetMap contributors Leaflet Minimap
©OpenStreetMap contributors Leaflet Routing Machine
ハイブリッドアプリ
CORDOVA
PhoneGap
React Native
Monaca
使い方
新規プロジェクトの作成
プロジェクト選択
ファイルをインポート
プレビュー機能・実機検証
QMetaTiles プラグイン
CARTO,Mapboxと連携
みんなの公園マップ - 札幌版 -
Leaflet
CARTO
Mapbox
おつかれさまでした!