地図データの活用 (2016)

஍ਤσʔλͷ׆༻ 4D and Leaflet Olivier Deschanels, Senior Consultant ΦϦϏΤɾσγϟωϧ

what is Leaflet? ϓϩϑΟʔϧ

w Φʔϓϯιʔεͷ+BWBTDSJQUϥΠϒϥϦ what is Leaflet? ϓϩϑΟʔϧ

w Φʔϓϯιʔεͷ+BWBTDSJQUϥΠϒϥϦ w ΠϯλϥΫςΟϒͳ஍ਤΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ what is Leaflet? ϓϩϑΟʔϧ

w Φʔϓϯιʔεͷ+BWBTDSJQUϥΠϒϥϦ w ΠϯλϥΫςΟϒͳ஍ਤΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ w σεΫτοϓͱϞόΠϧػثͷ྆ํʹରԠ what is Leaflet?
ϓϩϑΟʔϧ

who uses Leaflet? Ϣʔβʔ

techno under Leaflet ςΫϊϩδʔ

わずか33KBのJavaScript! techno under Leaflet ςΫϊϩδʔ

Leaflet keywords Ωʔϫʔυ

Leaflet keywords w γϯϓϧ Ωʔϫʔυ

Leaflet keywords w γϯϓϧ w ޷ޮ཰ Ωʔϫʔυ

Leaflet keywords w γϯϓϧ w ޷ޮ཰ w ࣮༻ੑ Ωʔϫʔυ

Leaflet keywords w γϯϓϧ w ޷ޮ཰ w ࣮༻ੑ w
֦ுੑ Ωʔϫʔυ

Leaflet competitors ϥΠόϧ

Google Maps Leaflet competitors ϥΠόϧ

Google Maps OpenLayers Leaflet competitors ϥΠόϧ

αϯϓϧ tile storm

αϯϓϧ tile storm OSM Mapnick ESRI NavCharts ESRI World Imagery
ESRI National Geographic Google hybride OSM Thunderforest Transport OSM Mapnick Google roadmap MapBox Warden OSM Thunderforest Landscape Geocommons Acetate ESRI World Topo Map ESRI World Street Map Google satellite OSM Thunderforest Cycle OSM OpenPisteMap OSM OpenSeaMap OSM OpenWeatherMap Skobbler maps Stamen Watercolor

Web area Web page Web app

ϥΠϒϥϦͷར༻ Leaflet API

ϥΠϒϥϦͷར༻ Leaflet API ϖʔδʹू໿http://leafletjs.com/reference.html

νϡʔτϦΞϧ Leaflet in 6 steps

</html> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 1. スタイル

</html> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 1. スタイル 2. JSライブラリ

</html> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <div id="map" 1. スタイル 2. JSライブラリ 3. 受け⼊れ  divエリア

</html> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <div id="map" style="height:600px;width:800px"/> 1. スタイル 2. JSライブラリ 3. 受け⼊れ  divエリア 4. 地図のサイズ

</html> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <div id="map" style="height:600px;width:800px"/> var map = L.map('map').setView([47, -2.25], 13); 1. スタイル 2. JSライブラリ 3. 受け⼊れ  divエリア 4. 地図のサイズ 5. 地図の位置

</html> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <div id="map" style="height:600px;width:800px"/> var map = L.map('map').setView([47, -2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); 1. スタイル 2. JSライブラリ 3. 受け⼊れ  divエリア 4. 地図のサイズ 5. 地図の位置 6.地図の内容

%Ͱ࢖༻͢Δʹ͸ recipe for 4D use Leaﬂet_Demo01

first_step.html %Ͱ࢖༻͢Δʹ͸ recipe for 4D use Leaﬂet_Demo01

ϚʔΧʔͷදࣔ add a marker Leaﬂet_Demo02

<html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body>
<div id="map" style="height:100%;width:100%"/> <script> var map = L.map('map').setView([47,-2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); </script> </body> </html> ϚʔΧʔͷදࣔ add a marker Leaﬂet_Demo02

<div id="map" style="height:100%;width:100%"/> <script> var map = L.map('map').setView([47,-2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); </script> </body> </html> L.marker([47,-2.25]).addTo(map); ϚʔΧʔͷදࣔ add a marker Leaﬂet_Demo02

ϚʔΧʔͷίϨΫγϣϯ collection of markers Leaﬂet_Demo03

ϚʔΧʔͷίϨΫγϣϯ collection of markers "IATA_AirportCode": "AUR", "Location": "Aurillac", "Latitude": 44.883333333333,
"Longitude": 2.4166666666667 }, { "IATA_AirportCode": "AUF", "Location": "Branches", "Latitude": 47.85, "Longitude": 3.4833333333333 }, ….. { "IATA_AirportCode": "VHY", "Location": "Charmeil", "Latitude": 46.166666666667, "Longitude": 3.4 }, { "IATA_AirportCode": "V24", "Location": "Velizy", "Latitude": 48.766666666667, "Longitude": 2.2 }, { "IATA_AirportCode": "VTL", "Location": "Vittel", "Latitude": 48.216666666667, "Longitude": 5.9333333333333 } ] Leaﬂet_Demo03

Leaﬂet_Demo03 ϚʔΧʔͷίϨΫγϣϯ collection of markers

<div id="map" style="height:100%;width:100%"/> <script> var map = L.map('map').setView([47,-2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); </script> </body> </html> Leaﬂet_Demo03 ϚʔΧʔͷίϨΫγϣϯ collection of markers

<div id="map" style="height:100%;width:100%"/> <script> var map = L.map('map').setView([47,-2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); </script> </body> </html> var airports = ; Leaﬂet_Demo03 ϚʔΧʔͷίϨΫγϣϯ collection of markers

<div id="map" style="height:100%;width:100%"/> <script> var map = L.map('map').setView([47,-2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); </script> </body> </html> var airports = ; … { "IATA_AirportCode": "AUR", "Location": "Aurillac", "Latitude": 44.883333333333, "Longitude": 2.4166666666667 }, { "IATA_AirportCode": "AUF", "Location": "Branches", "Latitude": 47.85, "Longitude": 3.4833333333333 } … Leaﬂet_Demo03 ϚʔΧʔͷίϨΫγϣϯ collection of markers

<div id="map" style="height:100%;width:100%"/> <script> var map = L.map('map').setView([47,-2.25], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); </script> </body> </html> var airports = ; for (var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]).addTo(map); }; … { "IATA_AirportCode": "AUR", "Location": "Aurillac", "Latitude": 44.883333333333, "Longitude": 2.4166666666667 }, { "IATA_AirportCode": "AUF", "Location": "Branches", "Latitude": 47.85, "Longitude": 3.4833333333333 } … Leaﬂet_Demo03 ϚʔΧʔͷίϨΫγϣϯ collection of markers

for (var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]).addTo(map); }; Leaﬂet_Demo04 ϑΩμγͷදࣔ display tips for
(var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]) .addTo(map); };

for (var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]) .addTo(map); }; Leaﬂet_Demo04 ϑΩμγͷදࣔ display tips
for (var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]) .addTo(map); };

for (var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]) .addTo(map); }; .bindPopup(airports[i].Location) Leaﬂet_Demo04 ϑΩμγͷදࣔ display
tips for (var i=0;i<airports.length;i++){ L.marker([airports[i].Latitude,airports[i].Longitude]) .addTo(map); };

௥Ճ৘ใͷදࣔ Leaﬂet_Demo05

௥Ճ৘ใͷදࣔ popupContent = "<b>"+airports[i].Location+"</b><br/><div id='"+airports[i].UUID+"'>" popupContent += "<a href='#'>more info</a></div>"
Leaﬂet_Demo05

map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); Leaﬂet_Demo05

.bindPopup(popupContent,{maxWidth:500,minWidth:300}) map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); Leaﬂet_Demo05

.bindPopup(popupContent,{maxWidth:500,minWidth:300}) map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); ポップアップ表⽰で発⽣するイベント Leaﬂet_Demo05

.bindPopup(popupContent,{maxWidth:500,minWidth:300}) map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); ポップアップ表⽰で発⽣するイベント e.popup : ポップアップを管理するオブジェクト Leaﬂet_Demo05

.bindPopup(popupContent,{maxWidth:500,minWidth:300}) map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); ポップアップ表⽰で発⽣するイベント $4d : JSから  メソッドをコールすることができる e.popup : ポップアップを管理するオブジェクト Leaﬂet_Demo05

.bindPopup(popupContent,{maxWidth:500,minWidth:300}) map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); ポップアップ表⽰で発⽣するイベント $4d : JSから  メソッドをコールすることができるメソッドの戻り値を処理するコールバック関数 e.popup : ポップアップを管理するオブジェクト Leaﬂet_Demo05

.bindPopup(popupContent,{maxWidth:500,minWidth:300}) map.on('popupopen', function(e) { var myDiv=e.popup._contentNode.childNodes[2]; if (myDiv){ myDiv.onclick = function(ee) { $4d.Airport_PlusInfo(myDiv.id,function(dollarZero){ ee.target.parentElement.innerHTML=dollarZero; }); }; }; }); ポップアップ表⽰で発⽣するイベント $4d : JSから  メソッドをコールすることができるメソッドの戻り値を処理するコールバック関数 e.popup : ポップアップを管理するオブジェクト ee : クリックを発⽣させたDOMを操作 Leaﬂet_Demo05

Leaﬂet_Demo05 ϝιουίʔϧ $4d

$4d.myMethod(param1, … paramN,function(dollarZero){ //my javascript code using dollarZero }); Leaﬂet_Demo05
ϝιουίʔϧ $4d

Leaﬂet_Demo06 ίϯτϩʔϧ control of the map

zoomIn = function(){ map.zoomIn(); return map.getZoom(); }; zoomOut = function(){
map.zoomOut(); return map.getZoom(); }; Leaﬂet_Demo06 ίϯτϩʔϧ control of the map

map.zoomOut(); return map.getZoom(); }; WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaﬂet";"zoomIn";zv_zoom) Leaﬂet_Demo06 ίϯτϩʔϧ control of the map

map.zoomOut(); return map.getZoom(); }; WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomIn";zv_zoom) WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomOut";zv_zoom) Leaflet_Demo06 ίϯτϩʔϧ control of the map

map.zoomOut(); return map.getZoom(); }; WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomIn";zv_zoom) WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomOut";zv_zoom) エリア内にあるJS関数の名前 Leaflet_Demo06 ίϯτϩʔϧ control of the map

map.zoomOut(); return map.getZoom(); }; WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomIn";zv_zoom) WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomOut";zv_zoom) エリア内にあるJS関数の名前 JS関数の戻り値 Leaflet_Demo06 ίϯτϩʔϧ control of the map

map.zoomOut(); return map.getZoom(); }; WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomIn";zv_zoom) WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomOut";zv_zoom) エリア内にあるJS関数の名前 JS関数の戻り値ズームを上げる Leaflet関数 Leaflet_Demo06 ίϯτϩʔϧ control of the map

ズーム率を返す Leaflet関数 zoomIn = function(){ map.zoomIn(); return map.getZoom(); }; zoomOut
= function(){ map.zoomOut(); return map.getZoom(); }; WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomIn";zv_zoom) WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_leaflet";"zoomOut";zv_zoom) エリア内にあるJS関数の名前 JS関数の戻り値ズームを上げる Leaflet関数 Leaflet_Demo06 ίϯτϩʔϧ control of the map

ϥΠϯͷඳը drawing on the map Leaﬂet_Demo08

ϥΠϯͷඳը drawing on the map TracerLigne = function (c) {
L.polyline([[c.coords[0].lat,c.coords[0].lng], [c.coords[1].lat,c.coords[1].lng]], { color: 'red',weight: 3, opacity: 0.5,smoothFactor: 1 }) .addTo(map); }; Leaﬂet_Demo08

ϥΠϯͷඳը drawing on the map TracerLigne = function (c) {
L.polyline([[c.coords[0].lat,c.coords[0].lng], [c.coords[1].lat,c.coords[1].lng]], { color: 'red',weight: 3, opacity: 0.5,smoothFactor: 1 }) .addTo(map); }; { "coords": [ { "lat": 48.433333333333, "lng": -4.4166666666667 }, { "lat": 41.5, "lng": 9.0833333333333 } ] } Leaﬂet_Demo08

ൣғදࣔ covered zone Leaﬂet_Demo09

ൣғදࣔ covered zone var map = L.map('map').setView([, ],6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); TracerCercle = function (c) { L.circle([c.lat,c.lng],50000, { color: 'blue', weight: 3, opacity: 0.5, smoothFactor: 1 }) .addTo(map); }; Leaﬂet_Demo09

ύϥϝʔλʔͷड͚౉͠ exchanging parameters Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters $paramオブジェクト宣⾔ Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters $paramオブジェクト宣⾔ Leaﬂet_Demo11 属性値をセット

ύϥϝʔλʔͷड͚౉͠ exchanging parameters $paramオブジェクト宣⾔ Leaﬂet_Demo11 パラメーターとして  オブジェクトを使⽤属性値をセット

ύϥϝʔλʔͷड͚౉͠ exchanging parameters Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters  Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters  パラメーターオブジェクトから値をローカル変数に代⼊ Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters   パラメーターオブジェクトから値をローカル変数に代⼊ Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters   パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度
: 46° Leaﬂet_Demo11

ύϥϝʔλʔͷड͚౉͠ exchanging parameters      パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° Leaﬂet_Demo11

defined:C1231($mapParameters;"centerLatitude"))-->   パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->    パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->       パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->       パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° C1224 : C = コマンド, 1224 = 識別番号 Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->       var map = L.map('map').setView([,],6); パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° C1224 : C = コマンド, 1224 = 識別番号 Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->       var map = L.map('map').setView([,],6); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° C1224 : C = コマンド, 1224 = 識別番号 Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->       var map = L.map('map').setView([,],6); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); L.marker([,]).addTo(map); パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° C1224 : C = コマンド, 1224 = 識別番号 Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

defined:C1231($mapParameters;"centerLatitude"))-->       var map = L.map('map').setView([,],6); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'copyright', maxZoom: 18 }).addTo(map); L.marker([,]).addTo(map); パラメーターオブジェクトから値をローカル変数に代⼊デフォルト緯度 : 46° C1224 : C = コマンド, 1224 = 識別番号タグ変換でコードを⽣成 Leaﬂet_Demo11 centerLatitudeがあれば使⽤する

൚༻஍ਤ generic map Leaﬂet_Demo12

͞Βʹ্Λ໨ࢦ͢ਓ΁ to go further…

w -FBqFUϓϥάΠϯ ͞Βʹ্Λ໨ࢦ͢ਓ΁ to go further…

ԁάϥϑ semicircle plugin Leaﬂet_Demo13

ԁάϥϑ semicircle plugin <script src="/semicircle.js"></script> Leaﬂet_Demo13

ԁάϥϑ semicircle plugin <script src="/semicircle.js"></script> L.circle([c.lat,c.lng],c.radius, { color: c.arcs[i].color,
weight: 0, fillOpacity: 0.5, startAngle: c.arcs[i].start, stopAngle: c.arcs[i].end }) Leaﬂet_Demo13

地図データの活用 (2016)

地図データの活用 (2016)

More Decks by 4D Japan

Other Decks in Technology

Featured

Transcript