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
210
AWS re:Invent 2023 現地での体験
dayjournal
1
580
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.4k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
560
MIERUNEの組織とカルチャー
dayjournal
0
200
AWSにおける地理空間情報活用
dayjournal
0
480
FOSS4Gカルチャーとクラウド
dayjournal
0
480
Introduction to Amazon Location Service
dayjournal
0
450
AWSではじめる位置情報アプリケーション
dayjournal
1
1.1k
Other Decks in Technology
See All in Technology
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
420
kcp: Kubernetes APIs Are All You Need #techfeed_live / TechFeed Experts Night 28th
ytaka23
1
190
OPENLOGI Company Profile
hr01
0
46k
OPENLOGI Company Profile for engineer
hr01
1
2.2k
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
1.2k
本番環境で Cloudflareを 使ってみた話
miu_crescent
2
130
AI JIMY - 登壇(インストール編)
hanacchi
0
150
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
2
180
パフォーマンス最適化のベストプラクティス
databricksjapan
0
200
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
120
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
TiDBにおけるテーブル設計と最適化の事例
cygames
0
800
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Facilitating Awesome Meetings
lara
43
5.6k
We Have a Design System, Now What?
morganepeng
43
6.8k
How to Ace a Technical Interview
jacobian
273
22k
Building Your Own Lightsaber
phodgson
100
5.7k
Building an army of robots
kneath
300
41k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
Why Our Code Smells
bkeepers
PRO
331
56k
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
おつかれさまでした!