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);