前回記載した通り、GeoJSONフォーマットデータを地図に取り込んで行きます。
Data Layer: Drag and Drop GeoJSONを参考(パクリ)にしました。
geojson.html
ソースコードの掲載と説明は長くなるので割愛します。リンク先を参照して下さい。
簡単な動作説明です。
- 東京駅が初期の表示位置です
- 数秒後に、現在位置に遷移します。位置情報取得の許可を求められたらOKをして下さい
- 地図が表示されたら、GeoJSONフォーマットのデータをドラッグして下さい。サンプルデータは以下の通りで、一つの位置のみを表わしたシンプルなデータです。
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "geometry": { "type": "Point", "coordinates": [ 139.767617, 35.681084 ] } } ] }
- しばらくすると下向きの矢印が表示されます。その後、ファイルをドロップして下さい
- マーカーが一つ表示されます
- マーカーをクリックすると、マーカーが指し示す緯度経度がポップアップで表示されます。ポップアップがマーカーに重なってしまうのはまた別途検討します。