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

Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors,
under ODbL. Leaflet 初級編 MIERUNE Inc. / Yasunori Kirimoto 2017.06.30 FOSS4G 2017 Hokkaido ハンズオン - Web地図サイトを構築してみよう-

under ODbL. 地理空間情報エンジニア Yasunori Kirimoto

MIERUNE地図 Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap
contributors, under ODbL.

KIKI-TORI MAP 国立環境研究所(2017)KIKI-TORI マップ, 国立環境研究所生物・生態系環境研究センター制作. http://www.nies.go.jp/kikitori/contents/map (2017/6/18 閲覧)

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

Introduction はじめに

事前準備できてますか？？ http://day-journal.com/blog/day-016

HTML CSS JS Web Technology

JavaScript Library

OpenLayers 3

CESIUM

Leaflet

Web Service

Mapbox

Hands On ハンズオン

完成イメージ基本構成背景地図コントロールオブジェクト GeoJSON プラグイン

demo demo

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

OpenStreetMap

地理院地図

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

レイヤ統合

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

マーカー

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 ] } }, { "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

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

アレンジ

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

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

©OpenStreetMap contributors Leaflet LocateControl

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

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

Other Cases その他事例

その他のプラグイン

Leaflet.MultiTileLayer

Leaflet.heat

Leaflet-icon-pulse

Leaflet Animated Marker

ハイブリッドアプリ

CORDOVA

PhoneGap

Monaca

使い方

新規プロジェクトの作成

プロジェクト選択

ファイルをインポート

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

CARTO,Mapboxと連携

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

Leaflet

Mapbox

under ODbL. おつかれさまでした！

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

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

More Decks by Yasunori Kirimoto

Other Decks in Technology

Featured

Transcript