tsxを使ってreact-leafletのGeoJSONを使う

tsxを使わなければ問題は起きないと思います。

データ

geo jsonは以下から取得しました。

nlftp.mlit.go.jp

やったこと

単純に以下のようにすると動かないです。

import topo_data from './res/tokyo_topo.json';
// 中略
export const GeoJSONLayer = (props: Props) => {

    return (
       <GeoJSON data={props.data} />
    );
};

問題自体に関してはissueのほうが詳しいです。

[@types/leaflet] L.geoJSON() requires explicit typing · Issue #37370 · DefinitelyTyped/DefinitelyTyped · GitHub

試しに以下を

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0b5bfba2994c91a099cd5bcfd984f6c4c39228e5/types/geojson/index.d.ts#L58
以下のように変更すると、正常にGeoJSONのレイヤーが表示されます。

type: GeoJsonTypes|string;

Widening Literal Typesが原因のようです。

どのみちgeo jsonでは重すぎるのでtopojsonにしたいので、以下のようにしました。

export const TopoJSONLayer = (props: Props) => {

    return (
        <MapConsumer>
            {(map) => {
                const layer = L.geoJSON().addTo(map);
                if (props.data.type != "Topology") {

                    return null;
                }
                for (const key in props.data.objects) {
                    if (!props.data.objects.hasOwnProperty(key)) {
                        continue;
                    }
                    const geojson: GeoJsonObject = topojson.feature(props.data, props.data.objects[key]);
                    layer.addData(geojson);
                }
                return null;
            }}
        </MapConsumer>
    );

};