Leaflet mapping: Assign object to fetch promise for local GeoJSON file

Question

I am looking to assign as an object a Fetch API promise from a local GeoJSON file. Here is the code

fetch("data/sites.geojson")
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            L.geoJSON(data, {
                pointToLayer: styles_sites
            }).addTo(map);
        });
    };

I tried the call back method, as advised here Saving fetched JSON into variable

(EDIT) New code, but there is still a missing formal parameter

function getData("data/sites.geojson", cb) {
fetch("data/sites.geojson")
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        L.geoJSON(data, {
            pointToLayer: styles_sites,
            onEachFeature: function (feature, layer) {
                layer.on('mouseover', function() { 
                    layer.openPopup(layer.bindPopup("<b>"+feature.properties.nombre+"</b>"))
                });
                layer.on('mouseout', function() { 
                    layer.closePopup(); 
                });
                layer.on('click', function () {
                    layer.bindPopup("<b>Nombre: </b>"+feature.properties.nombre+"<br><b>Barrio: </b>"+feature.properties.barrio+"<br><b>Tipo: </b>"+feature.properties.tipo+"<br><b>Ubicacion: </b>"+feature.properties.ubicacion+"<br><b>Correo: </b>"+feature.properties.contacto);
                });
            }
        }).addTo(map);
    .then(function(result) {
        cb(result);
        });
    });
};
getData("data/sites.geojson", function (data) {
    return console.log({data});
});

Yes, it gives me Uncaught SyntaxError: missing formal parameter on 218:17, which is the function getData — LinoHub, Sep 10 '21 at 00:45
...and how does the function definition for `function getData` look like? — IvanSanchez, Sep 10 '21 at 00:53
Search within your codebase. Read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter . — IvanSanchez, Sep 10 '21 at 02:35
I can't find this callback function in there, all I find is the DataTransfer.getData(); not sure if that's the one: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/getData — LinoHub, Sep 10 '21 at 09:10

score 0 · Answer 1 · answered Sep 10 '21 at 03:59

0

Most probably just incorrect syntax of your callback function:

// Use either arrow function
getData("data/sites.geojson", (data) => {
    return console.log({data});
});

// or standard function
getData("data/sites.geojson", function (data) {
    return console.log({data});
});

answered Sep 10 '21 at 03:59

ghybs

47,565
6
74
99

Thanks, see edited code, unfortunately the problem remains – LinoHub Sep 10 '21 at 09:31

score 0 · Answer 2 · edited Sep 18 '21 at 05:46

I found the way to work this out by adding within the fetch function, what I originally wanted to do on the map.

This was to add a L.controlLayer using the geojson as overlay.

This is the code that made it work:

let sites = getData()
    .then((function(data) {
        L.geoJSON(data, {
            pointToLayer: styles_sites,
            onEachFeature: function LayerControl(feature, layer) {
                var popupText = "<b>" + feature.properties.nombre + "<br>";
                layer.bindPopup(popupText);
                category = feature.properties.tipo;
                 // Initialize the category array if not already set.
                if (typeof categories[category] === "undefined") {
                    categories[category] = L.layerGroup().addTo(map);
                    layersControl.addOverlay(categories[category], category);
                }   
                categories[category].addLayer(layer);
                layer.on('mouseover', function() { 
                    layer.openPopup(layer.bindPopup("<b>"+feature.properties.nombre+"</b>"))
                });
                layer.on('mouseout', function() { 
                    layer.closePopup(); 
                });
                layer.on('click', function () {
                    layer.bindPopup("<b>Nombre: </b>"+feature.properties.nombre+"<br><b>Barrio: </b>"+feature.properties.barrio+"<br><b>Tipo: </b>"+feature.properties.tipo+"<br><b>Ubicacion: </b>"+feature.properties.ubicacion+"<br><b>Correo: </b>"+feature.properties.contacto);
                });
            }
        }).addTo(map);
    }));

Actually it comes from one of your answer on another post ghybs.

Leaflet mapping: Assign object to fetch promise for local GeoJSON file

2 Answers2