GeoJSONのオープンデータをKibanaのマップに表示する

# はじめに

GeoJSONは、JSONで地理的データを記述するためのフォーマットです。
GeoJSON形式で様々なデータが公開されています。
今回は公開されている鎌倉市のAED設置場所のGeoJSONファイルを読み込んで、KibanaのMap上に表示させてみたいと思います。


# 環境

使用した環境は以下のとおり。

- CentOS 7.5
- Elasticsearch 7.8.0
- Kibana 7.8.0

「[ElasticStack 7.8 環境構築](https://qiita.com/mkyz08/items/d4eb9f20efbd9dc77547)」でインストールした環境を利用しています。

鎌倉市のAED配置場所のデータは以下からダウンロードしました。

- [鎌倉なびマップ　データダウンロード](http://navimap.kcn-net.org/data.html)

鎌倉市 オープンデータ、鎌倉市・鎌倉シチズンネット（KCN）、クリエイティブ・コモンズ・ライセンス 表示 4.0（http://creativecommons.org/licenses/by/4.0/）

上のサイトから、以下の「Geojson(.geojson)」をダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/7ba24446-014f-f4dc-9287-b05b5d0ff350.png)


# マップを作成する

まず、Kibanaのトップページから[Maps]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/a36605e5-a4e8-276d-e474-8351e086e053.png)

[Create map]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/428e8a4d-93de-7e8e-4ee9-8ce45b13bbe1.png)

地図が表示されるので、ここで[Add layer]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/2f67dce0-b7a9-e8cc-997c-7ef3a8cc2f8f.png)

追加するデータとして[Upload GeoJSON]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/a6741288-94fb-a688-dda1-c924f71f8d88.png)

あらかじめダウンロードしていた、鎌倉のAEDデータを[Import file]をドロップし、「index name」を入力して「Import file」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/e63e76b5-8b30-8413-4dfc-1554b92aa1f9.png)

すると、GeoJSONファイルが読み込まれ、インデックスが作成された結果が表示されます。
エラーとならなければそのまま「Add layer」でマップ上にレイヤーを追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/da27f2b5-e9e7-7b77-16df-a1927170473d.png)

レイヤーの名前、ツールチップに表示するフィールドを入力し、「Save & close」を選択して完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/b47e373d-79ac-280b-11f7-543e81c20db0.png)

レイヤーの追加が終わると、以下のようにAEDの設置場所がポイントで表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/8c22caeb-0eea-925f-29f1-ab51e4e2a2bb.png)

ポイントを選択するとツールチップが表示されるのですが、文字化けしています。。。
確認したところGeoJSONファイルはUTF-8で文字コードでしたので問題ないはずです。
調べてみても原因分からず断念。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/372fe143-7469-df7f-b417-645181c8098e.png)

一応、「Save」しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/3125271f-8918-7ee0-b224-0edb80dc8370.png)


# GeoJSONではなくCSVファイルから読み込んでやり直し

結局、調べても文字化けが直らなかったので、CSVファイルをダウンロードしてやり直しました。

まず、インデックスを作成します。

```
curl -H "Content-Type: application/json" -XPUT 'http://localhost:9200/map-test-index?pretty' -d '
{
    "mappings" : {
        "properties" : {
            "Category" : { "type" : "text" },
            "Hiragana" : { "type" : "text" },
            "latitude" : { "type" : "text" },
            "longitude" : { "type" : "text" },
            "name" : { "type" : "text" },
            "section" : { "type" : "text" },
            "住所" : { "type" : "text" },
            "備考" : { "type" : "text" },
            "設置数" : { "type" : "text" },
            "location" : { "type" : "geo_point" }
        }
    }
}'
```

次にCSVファイルを読み込んでElasticsearchへJSONをPOSTするプログラムをPythonで作成し、ドキュメントを読み込みました。

```python
import json
import csv
import urllib.request

if __name__ == "__main__":
    url = "http://192.168.10.126:9200/map-test-index/_doc/" 
    method = "POST"
    headers = {"Content-Type" : "application/json"}

    # CSV ファイルの読み込み
    with open('_61_Aed.csv', 'r') as f:
        for line in csv.DictReader(f):
            line['location'] = line['latitude'] + "," + line['longitude']
            line_json = json.dumps(line, ensure_ascii=True).encode("utf-8")
            print(line_json)

            request = urllib.request.Request(url, data=line_json, method=method, headers=headers)
            with urllib.request.urlopen(request) as response:
                response_body = response.read().decode("utf-8")
                print(response_body)
```

KibanaでIndex Patternを登録し、マップ上に表示した例が以下のようになります。
今度は文字化けなく表示できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179607/0d5a825a-ab91-b83b-b3cb-3f0c84c080ec.png)


# 参考

- [チュートリアル：GeoJSONデータのインデックス作成](https://www.elastic.co/guide/en/kibana/current/indexing-geojson-data-tutorial.html)
- [鎌倉なびマップ　データダウンロード](http://navimap.kcn-net.org/data.html)
- [Kibana Guide Maps](https://www.elastic.co/guide/en/kibana/current/maps.html)
- [Elasticsearch Reference Geo-point field type](https://www.elastic.co/guide/en/elasticsearch/reference/7.9/geo-point.html)