Why it doesn't work?

作業のメモ、記録をブログに残しています。

GeoJSONデータをインポートして地図上に表示する

前回記載した通り、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
        ]
      }
    }
  ]
}
  • しばらくすると下向きの矢印が表示されます。その後、ファイルをドロップして下さい
  • マーカーが一つ表示されます

f:id:zakiyamatakashi:20180106215341p:plain

  • マーカーをクリックすると、マーカーが指し示す緯度経度がポップアップで表示されます。ポップアップがマーカーに重なってしまうのはまた別途検討します。

f:id:zakiyamatakashi:20180106215644p:plain