Outcomes 都道府県庁とホームページ【Leaflet】
都道府県ポリゴンを使って、都道府県の面積や人口等の情報のほか、各県ホームページのリンクのポップアップを作成。
各県間の移動等をGoogleEarthのようにアニメーション化。
都道府県庁の位置をマーカー表示。
2022.02.23
2022.05.30
![]()
Outcomes
Leaflet
Outcomes 
Case Study Leaflet #01 【Quick Start】
LeafletのTutorialsでは、Quick Start guideとして、地図の表示、marker、circle、polygonに関するステップバイステップガイドから始まる。コードを編集して、身近な例に置き換えた。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #02 【国土地理院の各種地図】
LeafletのQuick Start Guideで使われたOpenStreetMapに加え、国土地理院の各種地図タイルを表示する。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #03 【Google Map】
Leafletでベースマップのメニューに、OpenStreetMap、国土地理院地図のほかに、Google Mapを加える。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #04 【GeoJSONで市区町界ポリゴン】
Leafletのベースマップ上に市区町界ポリゴンを表示し、市区町名をポップアップ表示。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #05 【GeoJSONでため池マーカー】
Leafletのベースマップ上に、ため池のポイントをマーカー表示する。ポイントをクリックするとため池名をポップアップ表示。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #06 【GeoJSONで市区町界ポリゴン+ため池マーカー】
Leafletのベースマップ上に、市区町界ポリゴンとため池ポイントをマーカー表示。ため池ポイントをクリックするとため池名が、その他の地点は市区町名をポップアップ表示
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #07 【市区町選択フォーム】
HTMLの選択要素<select>で市区町選択フォームを作成。選択した市区町役場をマーカー表示、市区町区域ポリゴンを修飾。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #08 【マーカーのカスタマイズ】
Leaflet TutorialsのUsing GeoJSON with LeafletとMarkers with Custom Icons を参考に、ため池のマーカー表示を変更。
2021.09.22
![]()
Case StudyLeaflet.jsPractice
Case Study Leaflet #09 【データのカテゴリーに応じたマーカー表示】
Leafletでため池データを使って、ため池の区分に応じたマーカー表示を試みる。
2021.09.22
![]()
Case StudyLeaflet.jsPractice