推薦システム研究室（RecSysLab） > チュートリアル > Leaflet > 第2章：Leafletの基本

第2章：Leafletの基本

公開日：2019-06-19
最終更新日：2019-08-29

leaflet02-1：マーカの配置
1号館前の噴水（[34.964969, 135.940179]）にマーカを配置しよう．
難易度：★
ミッション 説明
1 Markerオブジェクトを生成する．
2 Marker.addTo()メソッドを使う．

leaflet02-2：マーカへのポップアップの追加
1号館前の噴水（[34.964969, 135.940179]）のマーカに「ここは1号館前の噴水です。」と表示されるポップアップを追加しよう．
難易度：★
ミッション 説明
1 Marker.bindPopup()メソッドを使う．
2 Marker.openPopup()メソッドを使う．

leaflet02-3：円の描画
1号館前の噴水（[34.964969, 135.940179]）を中心に半径100mの円を描画しよう．
難易度：★
ミッション 説明
1 Circleオブジェクトを生成する．
2 円の塗りつぶしの不透明度は0.3とする．
3 Circle.addTo()メソッドを使う．

leaflet02-4：ポリゴンの描画
1号館（[34.964617, 135.939637]），6号館（[34.963986, 135.940793]），7号館（[34.962904, 135.939057]）の各位置をそれぞれ頂点とした三角形を描画しよう．
難易度：★
ミッション 説明
1 Polygonオブジェクトを生成する．
2 Polygon.addTo()メソッドを使う．

leaflet02-5：クリックされた位置座標の取得
クリックされた位置の座標をアラートで表示しよう．
難易度：★
ミッション 説明
1 Map.on()メソッドを使う．
2 マップ上をクリックされたときによばれるイベントリスナを定義する．
3 クリックされた位置の座標を取得する．

leaflet02-6：クリックされた位置座標のポップアップ表示
クリックされた位置の座標をポップアップで表示しよう．
難易度：★
ミッション 説明
1 Popupオブジェクトを生成する．
2 Popup.setLatLng()メソッドを使う．
3 Popup.setContent()メソッドを使う．
4 Popup.openOn()メソッドを使う．

leaflet02-7：クリックされた位置へのマーカの配置
クリックされた位置にマーカを配置しよう．
難易度：★★
ミッション 説明
1 クリックされた位置の座標をもつMarkerオブジェクトを生成する．