mapboxはloadURLで複数のGEOJSONファイルを処理します

Question

現在、config.jsonファイルに基づいてさまざまなソースから複数のレイヤーを読み込むためのマップを作成しています。

各レイヤーにもポップアップが表示されるはずですが、何らかの理由で最後にロードされたレイヤーのポップアップが表示されます。

私は、すべてのデータがロードされることを確認する層にreadyイベントを使用して、それらをポップアップまだありません成功をバインドする前に.eachLayer方法を使用して、私が行方不明ですかを把握することはできませんを反復処理しています。 plnkr.co

var myMap = function(options) { 
    var self = this; 

    this.settings = $.extend({ 
    layersConfig: 'config.json', 
    layerData: 'layer', 
    accessToken: 'pk.eyJ1IjoibWF0dGJsaXNzIiwiYSI6ImNpb3dwczBwZjAwOTh3OWtqOWZ1aG5ob3gifQ.Ot6GdtKew9u27TROm_4A6Q' 
    }, options); 

    this.map; 
    this.layers; 

    $.ajax({ 
    url: this.settings.layersConfig, 
    cache: true 
    }).done(function(data) { 
    self.init(data); 
    }); 
}; 

myMap.prototype = { 
    init: function(data) { 
    var self = this, 
     settings = this.settings; 

    L.mapbox.accessToken = settings.accessToken; 

    var map = this.map = L.mapbox.map('map', 'mapbox.streets') 
     .setView([54.6, -2.3], 4); 

    var popup = new L.Popup({ 
     minWidth: 250 
    }); 

    for (var i = 0; i < data.length; i++) { 

     var featureLayers = this.layers = L.mapbox.featureLayer(null, { 
     style: { 
      weight: 2, 
      color: data[i].color, 
      fillColor: data[i].color, 
      fillOpacity: 0.4 
     } 
     }).addTo(map); 
     // load layers data 
     featureLayers.loadURL(settings.layerData + data[i].layerId + '.json') 
     .on('ready', function(e) { 
      featureLayers.eachLayer(function(layer) { 
      // cache layer properties 
      var layerProps = layer.feature.properties; 
      // cache feature bounds 
      var bounds = layer.getBounds().toBBoxString(); 
      // bind modal 
      layer.bindPopup(showPopup(layer, bounds)); 
      }); 
     }); 
    } 

    map.on('popupopen', function() { 
     $('.zoom-to').on('click', function() { 
     var array = $(this).data('zoom').split(','); 

     map.fitBounds([ 
      [array[1], array[0]], 
      [array[3], array[2]] 
     ]) 
     }); 
    }); 

    function showPopup(popup, bounds) { 
     var popupData = popup.feature.properties; 
     var popupLabel = popupData.NAME; 
     var popupStructure = '<div class="leaflet-popup-label">' + popupLabel + '</div><button class="zoom-to" data-zoom="' + bounds + '">Zoom to</button></div>' 

     return popupStructure; 
    } 
    } 
} 

var map = new myMap(); 

Answer 1

は、問題を発見しました。

ちょうどfeatureLayers.eachLayerをe.target.eachLayerに置き換えると、必要に応じてポップアップが表示されます。

Answer 2

.on('ready',...) 

^AJAX呼び出しとは何の関係もありません：

上の再生が同様に私のコードの下に見つけてください。

ajaxコールが終了した後、つまりAJAXコールバック内でアクションを実行する必要があります。ここで

：

}).done(function(data) { 
    /* do stuff */ 
    });