title: Handling ajax-request in leaflet map
body: <p>I have a very basic leaflet map using <code>leaflet-panel-layers</code> to create a pretty layer control. I have two functions to create my layers and overlays. My data is in external geoJSON-Files what seems to be my problem as leaflet does not offer anything to get an external geoJSON. I also use <code>proj4leaflet</code> library to use the projection given in my json. 
  So google told me to use ajax about which I unfortunately don't know anything. I copy-pasted something like this:</p>
  
  <pre><code>function getOverlays(){
      var url = 'myServerUrl';
      overlays = [];
  
      $.ajax({
          url: url,
          dataType: 'jsonp',
          jsonpCallback: 'getJson',
          success: function(response) {
              overlays.push({
                  name: "Something",
                  layer: L.Proj.geoJson(response, {
                  ...
                  }
              });
          }
      });
      return overlays;
  }
  </code></pre>
  
  <p>my map is built like this:</p>
  
  <pre><code>var map = L.map('map', {
      layers: layers[0].layer
  });
  var layers = getBaseLayers();
  var overlays = getOverlays();
  var panelLayers = new L.Control.PanelLayers(layers,overlays);
  map.addControl(panelLayers);
  </code></pre>
  
  <p>This actually works fine if I want to add the layers to the map directly. But in my case the asynchronous request seems to be ready <strong>after</strong> my layer switcher is added to my map so the layers don't appear there.
  Is there any way to solve this simply without diving into callbacks?</p>