Graphically Edit a Data Layer

Google Maps APIにGeoJSONを編集する機能が付いたので、サクッとGeoJSONエディタ作ってみた。

Graphically Edit a Data Layer

以前、Google Map上にGeoJSONを表示するデータレイヤーについてお伝えしましたが、新たに編集機能が搭載されたそうです。

Google Geo Developers Blog: Interactive Data Layers in the JavaScript Maps API

とても簡単に使えるので、地図に編集機能を付けたい方にお勧めです。

※ ただし、日本国内のGoogle地図をトレースしてGeoJSONを作ると、たぶん著作権的に問題になるのでやめた方がいいかも。

GeoJSONエディットコントローラー

エディットコントローラーをGoogle Mapに追加するのは2行で済みます。

これだけで、下記のようなコントローラーが地図上部に表示されます。

GeoJSON エディットコントローラー

コントローラーをクリックすることで地図上にマーカーを設置したり、ラインやポリゴンを描くことができます。描いたデータはtoGeoJsonメソッドで取得できます。

このように、とても簡単に編集機能を実装することができます。

GeoJSONエディタ作ってみた。

というわけでサクッとつくってみました。UI部分はWebixを使ってますが、約50行(js)程でシンプルなGeoJSONエディタが出来きました。
GeoJSON エディター

example