Leaflet GEOJson marker pins are not a Layer?

Question

I currently have the following code which is used to display a series of GEOJson marker pins on a LeafletJS 1.5.1 map and it also displays a KML layer which can be toggled on and off using a checkbox.

    <script src="/Scripts/KML.js"></script>
    <script>

        // Center the map
        var map = L.map('map').setView([54.233669, -4.406027], 6);


        // Attribution
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.REMOVED.REMOVED', {
            attribution: 'Map &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
            id: 'mapbox.streets'
        }).addTo(map);


        // Popup content
        function forEachFeature(feature, layer) {

            // Author
            var Author
            if (feature.properties.By) {
                Author = " <small>(By " + feature.properties.By + ")</small>"
            } else {
                Author = ""
            }

            // Image
            var ImageContent
            if (feature.properties.ImageURL) {
                ImageContent = "<img src='" + feature.properties.ImageURL + "' width='300' height='200' /><br /><br />"
            } else if (feature.properties.YouTubeID) {
                    ImageContent = "<img src='https://img.youtube.com/vi/" + feature.properties.YouTubeID + "/hqdefault.jpg' width='300' height='200' /><br /><br />"

            } else {
                ImageContent = ""
            }

            // Comments
            var CommentsContent
            if (feature.properties.Comments) {
                CommentsContent = feature.properties.Comments + "<br /><br />"
            } else {
                CommentsContent = ""
            }

            // Build the popup content
            var popupContent = "<h4>" +
                feature.properties.Title +
                Author +
                "</h4>" +
                ImageContent +
                CommentsContent +
                "View and discuss this location";
            layer.bindPopup(popupContent);
        }


        // Build each marker
        $.getJSON("JSONMapPoints.json", function (data) {
            locations = L.geoJson(data, {
                onEachFeature: forEachFeature,
                pointToLayer: function (feature, latlng) {
                    return L.marker(latlng, {
                        icon: L.icon({
                        iconUrl: "images/pins/" + feature.properties.CategoryID + ".png",
                        iconSize: [32, 37],
                        iconAnchor: [10, 32],
                        popupAnchor: [5, -30]
                        }),
                    })
                }
            });
            map.fitBounds(locations.getBounds());
            locations.addTo(map);
        });


        // Build Locations layer
        var LayerLocations = new L.LayerGroup([
            // Not ready yet
        ]).addTo(map);


        // Build FRZ layer 
        var LayerFRZ = new L.LayerGroup([
            new L.KML("/kml/UA_FRZ_AIRAC_08_2019_CRC_E23FE9E2.kml", { async: true })
        ]).addTo(map);


        // Layer controls
        var layerControl = new L.Control.Layers(null, {
            // 'layer name': LayerFRZ,
            'Flight Restriction Zones': LayerFRZ
        }).addTo(map);


    </script>

    <div id="map" style="width: 100%; height: 600px;"></div>

I wish to also be able to toggle the GEOJson marker pins on and off too.

Which means I want to have have two check boxes, one to turn off the KML layer (already working) and one to turn off the marker pins too.

It should look like this:

I moved my geojson code in to the new L.LayerGroup code block but now I have an error in the browser console:

Error: The provided object is not a Layer.

My code now looks like this:

    <script src="/Scripts/KML.js"></script>
    <script>

        // Center the map
        var map = L.map('map').setView([54.233669, -4.406027], 6);


        // Attribution
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.REMOVED.REMOVED', {
            attribution: 'Map &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
            id: 'mapbox.streets'
        }).addTo(map);


        // Popup content
        function forEachFeature(feature, layer) {

            // Author
            var Author
            if (feature.properties.By) {
                Author = " <small>(By " + feature.properties.By + "</small>"
            } else {
                Author = ""
            }

            // Image
            var ImageContent
            if (feature.properties.ImageURL) {
                ImageContent = "<img src='" + feature.properties.ImageURL + "' width='300' height='200' /><br /><br />"
            } else if (feature.properties.YouTubeID) {
                    ImageContent = "<img src='https://img.youtube.com/vi/" + feature.properties.YouTubeID + "/hqdefault.jpg' width='300' height='200' /><br /><br />"

            } else {
                ImageContent = ""
            }

            // Comments
            var CommentsContent
            if (feature.properties.Comments) {
                CommentsContent = feature.properties.Comments + "<br /><br />"
            } else {
                CommentsContent = ""
            }

            // Build the popup content
            var popupContent = "<h4>" +
                feature.properties.Title +
                Author +
                "</h4>" +
                ImageContent +
                CommentsContent +
                "View and discuss this location on";
            layer.bindPopup(popupContent);
        }



        // Build Locations layer
        var LayerLocations = new L.LayerGroup([

            // Build each marker
            $.getJSON("JSONMapPoints.json", function (data) {
                locations = L.geoJson(data, {
                    onEachFeature: forEachFeature,
                    pointToLayer: function (feature, latlng) {
                        return L.marker(latlng, {
                        icon: L.icon({
                        iconUrl: "images/pins/" + feature.properties.CategoryID + ".png",
                        iconSize: [32, 37],
                        iconAnchor: [10, 32],
                        popupAnchor: [5, -30]
            }),
                        })
                    }
                });
                // map.fitBounds(locations.getBounds());
                // locations.addTo(map);
            })

        ]).addTo(map);


        // Build FRZ layer 
        var LayerFRZ = new L.LayerGroup([
            new L.KML("/kml/UA_FRZ_AIRAC_08_2019_CRC_E23FE9E2.kml", { async: true })
        ]).addTo(map);


        // Layer controls
        var layerControl = new L.Control.Layers(null, {
            'Locations': LayerLocations,
            'Flight Restriction Zones': LayerFRZ
        }).addTo(map);


    </script>

What do I need to change here to fix this?

Answer 1

So you're doing something like:

var LayerLocations = new L.LayerGroup([
    $.getJSON( /* stuff */ )
]);

You're trying to create a L.LayerGroup out of the return value of a $.getJSON call. According to the docs, that's an instance of jQuery's jqXHR, and (should be obvious) not an instance of L.Layer.

There are several approaches to this problem. I always prefer to replace all jQuery stuff with fetch just to try to get rid of the dependency on jQuery:

// Create an empty layergroup
var layerLocations = L.layerGroup();

fetch("JSONMapPoints.json")
  .then(function(response){ return response.json() })
  .then(function(data){

  // Once the browser has got the json file and has parsed it,
  // Create a L.GeoJSON out of that data...
  var locations = L.geoJson(data, { /* L.GeoJSON options, including pointToLayer */ });

  // ...and add the L.GeoJSON instance to the empty layergroup
  layerLocations.addLayer(locations);

});

An implementation with jQuery's $.getJSON instead of fetch should be trivial from this point.

Some possible approaches to the problem are, among others:

• Creating an empty L.GeoJSON and using the addData method
• Create the L.Control.Layers first, and use its addOverlay method after the GeoJSON data has been loaded and the L.GeoJSON instance has been created.

Answer 2

In the first code you had LayerLocations layer but it is not there in second, so it says it is not a layer. in the 2nd part you have locations instead of LayerLocations so the last lines should be

// Layer controls var layerControl = new L.Control.Layers(null, { 'Locations': locations, 'Flight Restriction Zones': LayerFRZ }).addTo(map);