狠狠撸

4D and Leaflet
Olivier Deschanels, Senior Consultant

わずか33KBのJavaScript!
techno under Leaflet

Google Maps
Leaflet competitors

Google Maps OpenLayers
Leaflet competitors

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 MapGoogle satellite
OSM Thunderforest Cycle
OSM OpenPisteMap
OSM OpenSeaMap
OSM OpenWeatherMap
Skobbler maps
Stamen Watercolor

Leaflet API
http://leafletjs.com/reference.html

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

<html>
<head>
</head>
<body>
<script>
?
?
?
</script>
</body>
</html>
<script src=/slideshow/leaflet-64146985/64146985/"http:/cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
1. スタイル
2. JSライブラリ

<html>
<head>
</head>
<body>
<script>
?
?
?
</script>
</body>
</html>
<div id="map"
1. スタイル
3. 受け?れ?
divエリア

<html>
<head>
</head>
<body>
<script>
?
?
?
</script>
</body>
</html>
<div id="map"??style="height:600px;width:800px"/>
1. スタイル
3. 受け?れ?
divエリア
4. 地図のサイズ

<html>
<head>
</head>
<body>
<script>
?
?
?
</script>
</body>
</html>
var map = L.map('map').setView([47, -2.25], 13);
1. スタイル
3. 受け?れ?
divエリア
5. 地図の位置

<html>
<head>
</head>
<body>
<script>
?
?
?
</script>
</body>
</html>
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. スタイル
3. 受け?れ?
divエリア
5. 地図の位置
6.地図の内容

recipe for 4D use
Lea?et_Demo01

first_step.html
recipe for 4D use
Lea?et_Demo01

<html>
<head>
</head>
<body>
<div id="map" style="height:100%;width:100%"/>
<script>
var map = L.map('map').setView([47,-2.25], 13);
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
add a marker
Lea?et_Demo02

<html>
<head>
</head>
<body>
<script>
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

"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

<html>
<head>
</head>
<body>
<script>
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
Lea?et_Demo03

<html>
<head>
</head>
<body>
<script>
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
var airports = ;
Lea?et_Demo03

<html>
<head>
</head>
<body>
<script>
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
… {
"Latitude": 44.883333333333,
"Longitude": 2.4166666666667
},
{
"Latitude": 47.85,
"Longitude": 3.4833333333333
} …
Lea?et_Demo03

<html>
<head>
</head>
<body>
<script>
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
for (var i=0;i<airports.length;i++){
L.marker([airports[i].Latitude,airports[i].Longitude]).addTo(map);
};
… {
"Latitude": 44.883333333333,
"Longitude": 2.4166666666667
},
{
"Latitude": 47.85,
"Longitude": 3.4833333333333
} …
Lea?et_Demo03

L.marker([airports[i].Latitude,airports[i].Longitude]).addTo(map);
};
Lea?et_Demo04
display tips
L.marker([airports[i].Latitude,airports[i].Longitude])
.addTo(map);
};

.addTo(map);
};
Lea?et_Demo04
display tips
.addTo(map);
};

.addTo(map);
};
.bindPopup(airports[i].Location)
Lea?et_Demo04
display tips
.addTo(map);
};

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})
if (myDiv){
});
};
};
});
Lea?et_Demo05

if (myDiv){
});
};
};
});
ポップアップ表?で
発?するイベント
Lea?et_Demo05

if (myDiv){
});
};
};
});
e.popup : ポップ
アップを管理する
オブジェクト
Lea?et_Demo05

if (myDiv){
});
};
};
});
$4d : JSから?
メソッドをコールす
ることができる
e.popup : ポップ
オブジェクト
Lea?et_Demo05

if (myDiv){
});
};
};
});
$4d : JSから?
メソッドの戻り値を処理するコールバック関数
e.popup : ポップ
オブジェクト
Lea?et_Demo05

if (myDiv){
});
};
};
});
$4d : JSから?
e.popup : ポップ
オブジェクト
ee : クリックを発?させたDOMを操作
Lea?et_Demo05

$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();
};
Lea?et_Demo06
control of the map

map.zoomIn();
};
map.zoomOut();
};
WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_lea?et";"zoomIn";zv_zoom)
Lea?et_Demo06
control of the map

map.zoomIn();
};
map.zoomOut();
};
WA EXECUTE JAVASCRIPT FUNCTION(*;"zw_lea?et";"zoomOut";zv_zoom)
Lea?et_Demo06
control of the map

map.zoomIn();
};
map.zoomOut();
};
エリア内にあるJS関数の名前
Lea?et_Demo06
control of the map

map.zoomIn();
};
map.zoomOut();
};
JS関数の戻り値
Lea?et_Demo06
control of the map

map.zoomIn();
};
map.zoomOut();
};
ズームを上げる
Lea?et関数
Lea?et_Demo06
control of the map

ズーム率を返す
Lea?et関数
map.zoomIn();
};
map.zoomOut();
};
ズームを上げる
Lea?et関数
Lea?et_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
var map = L.map('map').setView([,
],6);
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

Lea?et_Demo11
属性値をセット

Lea?et_Demo11
パラメーターとして?
オブジェクトを使?
属性値をセット

Lea?et_Demo11

パラメーターオブジェクトから値
をローカル変数に代?
Lea?et_Demo11

Lea?et_Demo11

デフォルト緯度 : 46°
Lea?et_Demo11

Lea?et_Demo11

Lea?et_Demo11
centerLatitudeがあれば使?する

Lea?et_Demo11

Lea?et_Demo11

C1224 : C = コマンド,
1224 = 識別番号
Lea?et_Demo11

var map = L.map('map').setView([,],6);
C1224 : C = コマンド,
1224 = 識別番号
Lea?et_Demo11

maxZoom: 18
}).addTo(map);
C1224 : C = コマンド,
1224 = 識別番号
Lea?et_Demo11

maxZoom: 18
}).addTo(map);
L.marker([,]).addTo(map);
C1224 : C = コマンド,
1224 = 識別番号
Lea?et_Demo11

maxZoom: 18
}).addTo(map);
L.marker([,]).addTo(map);
C1224 : C = コマンド,
1224 = 識別番号
タグ変換でコードを?成
Lea?et_Demo11

var map = L.map('map')
.setView([<!—#4DHTML $1-->,], 6);
attribution: 'copyright',maxZoom: 18
}).addTo(map);
var points = ;
for (var i=0;i<points.length;i++){
L.marker([points[i].Latitude,
points[i].Longitude]).addTo(map);
};
generic map
Lea?et_Demo12

semicircle plugin
Lea?et_Demo13

semicircle plugin
<script src=/slideshow/leaflet-64146985/64146985/"/semicircle.js"></script>
Lea?et_Demo13

semicircle plugin
<script src=/slideshow/leaflet-64146985/64146985/"/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

狠狠撸

Leaflet

More Related Content

More from kmiyako (20)

Leaflet