Leaflet

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="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

ズーム率を返す
Leaflet関数
map.zoomIn();
};
map.zoomOut();
};
ズームを上げる
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
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="/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

Leaflet

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von kmiyako

Mehr von kmiyako (20)

Leaflet