Leaflet Ajax JSON file Add to Map as Overlay

Question

I have a JSON file that is not formatted in any way to meet geoJson standards. I am trying to load the data I parse from it on the map. I am able to create markers from the data and add them:

$.getJSON( tsdata, function ( data ) {
                //loop through all the data
                $.each( data.response.docs, function ( key, val ) {
                    //console.log(val);
                    if ( typeof val.mc_geo !== 'undefined' ) {
                        //lat lng isn't consitently 1, so getting the first only.
                        var geo = val.mc_geo;
                        var gLat = geo.toString().split( ',' )[ 0 ];
                        var gLng = geo.toString().split( ',' )[ 1 ];
                        //add markers to map
                        var marker = L.marker( [ gLat, gLng ],{icon: tsMarker,} ).bindPopup( "<p><strong><a href='" + val.filename + "'>" + val.title + "</a></strong><hr/><br/><strong>Abstract:</strong> " + truncateString( val.abstract, 350 ) + "</p><p><strong>Author(s): </strong>" + val.author + "<p><strong>Station:</strong> " + val.station_primary_full + "</p>" );

                        markerArray.push( marker );
                    }
                } );
                layer_group = L.layerGroup(markerArray);
                map.addLayer(layer_group);
            });

This adds the marker layers (layer_group) to the map no problem. However, if I try and add them to the:

L.control.layers(baseMaps, overlayMaps).addTo(map);

I get an error. Basically, L.control.layers is not seeing my layer_group. I can define it before the getJSON call, but L.control.layers will not show the layer full of data though it is "checked" in the layers panel... there are no markers displayed.

How do I dynamically create this marker layer group and have control over it showing (on / off) in my L.control.layers?

score 1 · Answer 1 · answered Apr 07 '17 at 05:19

It sounds like you add your layer_group to your Layers Control while it is empty ($.getJSON works asynchronously), then re-assign it, so there is no longer a reference between your Layers Control and the markers you have instantiated.

2 easy workarounds:

Add your layer_group to your Layers Control after it is fully built: myLayersControl.addOverlay(layer_group, "Markers")
Use a placeholder Layer Group in your Layers Control, then add your markers into it (myLayerGroup.addLayer(marker)) or simply add your layer_group at the end to it (myLayerGroup.addLayer(layer_group))

Leaflet Ajax JSON file Add to Map as Overlay

1 Answers1