JS地図ライブラリ・リーフレットGeoJSON データを地図上に表示する方法

const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('myMap', {
    center: [32.639884, 130.987154],
    zoom: 8,
    layers: [osm]
})

var geojson = [
    {
        "type": "FeatureCollection",
        "name": "geoJson",
        "crs": { "type": "name", "properties": { "name": "" } },
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "popupContent": "hello world",
                    "tooltipContent": "tool tip",
                    "show_on_map": true
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [130.70434570312503, 33.61919376817004]
                }
            },
            {
                "type": "LineString",
                "properties": {
                    "show_on_map": true
                },
                "coordinates": [[130.64392089843753, 33.07773395720986], [131.30310058593753, 33.05471648804276]]
            },
            {
                "type": "Polygon",
                "properties": {
                    "show_on_map": true
                },
                "coordinates": [
                    [
                        [131.05590820312503, 32.588477769459146],
                        [130.82519531250003, 32.44952057251957],
                        [130.68786621093753, 32.02204906495204],
                        [131.19323730468753, 32.12445336381827],
                    ]
                ]
            }
        ]
    }
];

function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
    if (feature.properties && feature.properties.tooltipContent) {
        layer.bindTooltip(feature.properties.tooltipContent, { direction: 'bottom', offset: [0, 10] });
    }
}

function styles(feature) {
    switch (feature.geometry.type) {
        case "Point": return {
            radius: 8,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.6,
        };
        case "LineString": return {
            "color": "#4f6bdb",
            "lineCap": 'square',
            "weight": 5,
            "opacity": .8
        };
        case "Polygon": return {
            "color": "#34ccea8b",
            "fillColor": "#ea3483"
        }
    }
}

L.geoJSON(geojson, {
    onEachFeature: onEachFeature,
    filter: (feature, layer) => feature.properties.show_on_map,
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng);
    },
    style: styles
}).addTo(map);