problem to get geojson value in ajax leaflet

Question

im new into maping in leaflet. right now im using this tutorial to build my project https://leafletjs.com/examples/choropleth/ when im adding var into the begining of geojson and save it to js file. the hover mouse control work properly when my mouse hover the polygon .

control that shows state info on hover

    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>dry mass density</h4>' + (props ?
            '<b>' + props.n_mean + '</b><br />' + props.grid + ' hexagrid ID'
            : 'Hover over a state');
    };

    info.addTo(map);

but, i need the map data still at geojson format for some practical reason. so im using this ajax-leaflet plugin to call the data https://github.com/calvinmetcalf/leaflet-ajax .

function getColor(nitrogen) {
        return nitrogen >= 3 ? '#8904b1' :
            nitrogen >= 2.8 ? '#2980b9' :
            nitrogen >= 2.4 ? '#4cd137' :
            nitrogen >= 2.3 ? '#f1c40f' :
            nitrogen >= 0 ? '#c0392b' :
            '#bdc3c7';
    }

    var geojsonLayer = new L.GeoJSON.AJAX(base_url + "/assets/geojson/nitrogen_2019.geojson", {
        style: function(feature) {
            p = feature.properties.n_mean;
            return {
                fillColor: getColor(p),
                fillOpacity: 0.8,
                color: "black",
                dashArray: '3',
                weight: 1,
                opacity: 0.7
            }
        },
        onEachFeature: function(feature, layer) {
            layer.on({
                mouseover: function(e) {
                    e.target.setStyle({
                        fillOpacity: 0.8,
                        dashArray: '',
                        weight: 2,
                        opacity: 1
                    });
                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                        e.target.bringToFront();
                    }
                },
                mouseout: function(e) {
                    geojsonLayer.resetStyle(e.target);
                },
                click: function(e) {
                    map.fitBounds(e.target.getBounds());
                }
            });
        }
    });
    /* geojsonLayer.bindPopup(function(e) {
        return e.feature.ayam.properties.n_mean;
    }); */
    geojsonLayer.bindPopup('marker');
    //geojsonLayer.bindPopup('LatLng: ' + geojsonLayer.getLatLng())
    geojsonLayer.addTo(map);
    geojsonLayer.on('data:loaded', function() {
        map.fitBounds(geojsonLayer.getBounds());
    });
    // testing

    /* testing */
    // control that shows state info on hover
    var info = L.control({
        position: 'bottomright'
    });

    info.onAdd = function(map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function(info) {
        this._div.innerHTML = '<h4>Density of Makronutrient</h4>' + (info ?
            '<b>' + info.n_mean + '</b><br />' + info.grid + ' Hexagrid ID' :
            'Hover over a state');
    };

    info.addTo(map);

the file map is perfectly loaded. but the hover mouse control can't show the value of geojson polygon . and this is the structure of my geojson data .sometimes i change the format to "info.properties.n_mean" but nothing happend. is there anything wrong with my code?

Answer 1

Sorry for late answer hope this helps anyone looking for this

// make a request with your "url"
var geojsonLayer = new L.GeoJSON.AJAX("url");

// define your functions to interact with data
function thingToDoBeforeLoadingStarts () {
   // do stuff
}
function thingToDoForEachFileDownloaded () {
   // do stuff
}
function thingToDoAfterAllDownloadEnds () {
   // do stuff
}

// attach listeners
geojsonlayer.on("data:loading",thingToDoBeforeLoadingStarts);
geojsonLayer.on("data:progress",thingToDoForEachFileDownloaded)
geojsonLayer.on("data:loaded",thingToDoAfterAllDownloadEnds);