I have a had a JSON file as a layer in my Leaflet project. Now I'm trying to add it in the layer control. But somehow I can not add it. What's the problem?

Here is my code:

 var states =

    const geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8,
    $.getJSON(states).then((res) => {
       myLayer = L.geoJson(res, {
        onEachFeature: function (feature, layer) {
                layer.bindPopup('<h3>'+"The avarage PUE for this state is: "+feature.properties.pue+'</h3>')
        style: style,

   var basemaps = {
    'Open Street Map': osm,
    'Satellite': sat,
    'Greyscale': ab}

   var overlay = {

  • It looks like you are not assigning your $.getJSON call to a variable. Therefore, states inside your overlay object is the original GeoServer query string in line 1.
    – Matt
    Nov 3 at 9:38
  • @TomazicM sorry I thought I did it. I accepted it now as solution. It worked perfectly for me
    – Nicola
    Nov 3 at 10:03
  • @Matt I tried to assign a variable to the call with var myLayer = $.getJSON(states).then((res) => { myLayer = new L.geoJson(res, { ..... but it did not work...
    – Nicola
    Nov 3 at 10:22
  • Cross-post of stackoverflow.com/questions/74299331/… Nov 3 at 11:35

1 Answer 1


To elaborate on the comment by @Matt :

The problem is that you use asynchronous calls and promises, therefore you cannot simply assign the myLayer to a global variable and use that in the L.control.layers call, because the promise may not have resolved yet.

I think you should create the L.control.layers before the getJSON call, and then inside the callback add the layer to the layercontrol.

// layerControl without overlays first
var layerControl = L.control.layers(baseLayers, {}).addTo(map);

states = "(...)"

$.getJSON(states).then((res) => {
    myLayer = L.geoJson(res, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h3>'+"The avarage PUE for this state is: "+feature.properties.pue+'</h3>')
    // after we created the layer from the network call we can add it to the control. Second argument is the name to be displayed in the control.
    layerControl.addOverlay(myLayer, 'PUE');
    }); // end getJSON    

See jsfiddle at http://jsfiddle.net/x6q9guhv/1/

  • but wouldn't it be better to assign it to a variable. Because I also want to create a function for letting layers appear at a certain zooming level ect. If all just stays in the call then maybe I can not use the layer properly.
    – Nicola
    Nov 3 at 10:42
  • 1
    You have to think asynchronically. All code that needs to have a working, populated layer object needs to be run in the same temporal scope. So do all your layer-dependent stuff after the layerControl.addOverlay call. For longer code parts you can and should create functions in the global scope , and call those functions from the asynchronous block.
    – til_b
    Nov 3 at 11:28
  • Thanks, I created a zooming function out of the call and used it within the json call.
    – Nicola
    Nov 3 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.