GeoJson を HTML に変換（力技）

はじめに

本記事はGeoJsonをHTMLに変換するコードgeojson2html.pyの詳細な説明を兼ねた記事です。

geojson2html.py は現在も開発中です。
この記事は執筆時点（2023.02.26）での最新版 ver0.1 について書いています。
最新の使用についてはリポジトリを確認してください。

geojson2html.pyを利用して作ったデモはこちら。

GeoJson使ってhtml生成してみた

サンプルのGeoJsonはこれ↓https://t.co/Odl8lIjS9T pic.twitter.com/hfWwlyafVI

— Rj.Chiba (@rj_phys) February 25, 2023

GeoJson

GeoJsonはその名の通り、地理空間データ（Geo-）を記述するためのフォーマット（json）のことです。
国境や河川だけではなく、ランドマークなどのデータも保持することができます。

GeoJsonをHTMLに変換する方法は既に複数存在します。

Pythonであればfolium.py、JavaScriptであればLeafletがメジャーだと思います。

これらは非常に便利なライブラリですが、ライブラリを利用しない形でGeoJsonをHTMLに変換する必要があり、geojson2html.py を作りました。

geojson2html.py

このコード（ライブラリですらない...！）を使うと、以下のことができます。

• GeoJsonのFeatureを<polygon>に変換する
  nameプロパティでFeatureを指定することができます。
  また、全てのFeatureについて処理を行うこともできます。

from geojson2html import geojson2html

# GeoJson を準備する
geo = ...

# `name` が "Alaska" の `Feature` について処理を行う
svghtml = geojson2html(geo, key="Alaska")

# 全ての `Feature` について処理を行う
svghtml = geojson2html(geo)

ver0.1 で対応しているFeatureはPolygonとMultiPolygonのみです。
それ以外のtypeについてはOps! {type} can not be handled!が標準出力され、そのFeatureは無視されます。

• svg タグの viewboxを決定する
  cssでsvgのwidth/heightを指定しない限り、svgのサイズは図がちょうど収まるように調整されます。

出力例

出力されるhtmlファイルはsvgタグのみです。
実際に使用する際は、完全なhtmlの中に生成されたsvgを埋め込む必要があります。

<svg viewbox="{viewbox}" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="{name}" points="{corrdinates}">
<title>{name/fullname}</title>
</polygon>
...
</svg>

何やってんの？

さて本題です。
基本的には次のような処理をしています。

1. Featureを全て取ってきてloop

2. それぞれのFeatureからnameを取ってきて、処理するか判断

3. 処理する geojson2strpoly(feature):Polygon classのインスタンスをひたすら作っていきます

Polygon classはこれで定義↓

class Polygon:
	def __init__(self, position, viewbox):
		self.polygon = position # points (str)
		self.box = viewbox # (list)

（geojson2strpoly、関数名変え忘れてる...）

1. できたPolygonインスタンスでloopを回し、htmlの<polygon>部分(polygonhtml)とviewbox(vb)を更新

2. <svg>の中に<polygon>を入れてreturn

おわりに

進行中のプロジェクトで、地図をデザインも含めてゼロから作る必要があったので作ったコードです。
まだまだ改善点は多くあります。

• 穴のあいたMultiPolygonを処理できない
• Multi/Polygon以外のFeatureを処理できない

使ってくれる方がいれば嬉しいですし、Pull Requests/Issueを頂けるとなお喜びます。