スタイルが完了していませんロード：Mapbox GL JS

Question

私の目標は、アフターマップ上に一連の座標マーカーを表示する前後のマップを作成することです。

コードが実行されると、私はコンソールにこのエラーメッセージが表示されます。Style is not done loading

最終的な目標は、ユーザーが水平方向にスワイプして（後に前から）マップの変更を見ることができるようになるカーソルを確認することです。

これまでのところ私のコードは、どんな助けも遠くに行くでしょう！

$(document).ready(function() { 
 
    var request_one = $.ajax({ 
 
     url: "https://geohack-framework-gbhojraj.c9users.io/ny", 
 
     dataType: 'json' 
 
    }) 
 
    var request_two = $.ajax({ 
 
     url: "https://geohack-framework-gbhojraj.c9users.io/man", 
 
     dataType: 'json' 
 
    }); 
 
    $.when(request_one, request_two).done(function(response_one, response_two) { 
 
     console.log(response_one, response_two); 
 
     //create map of ny state 
 
     var nyGeo = response_one[0]; 
 
     var manGeo = response_two[0]; 
 
     (function() { 
 
      mapboxgl.accessToken = 'pk.eyJ1IjoiamdhcmNlcyIsImEiOiJjaXY4amM0ZHQwMDlqMnlzOWk2MnVocjNzIn0.Pos1M9ZQgxMGnQ_H-bV7dA'; 
 
      //manhattan map 
 
      var manCenter = manGeo.features[0].geometry.coordinates[0][0][0]; 
 
      console.log('man center is', manCenter); 
 
      var beforeMap = new mapboxgl.Map({ 
 
       container: 'before', 
 
       style: 'mapbox://styles/mapbox/light-v9', 
 
       center: manCenter, 
 
       zoom: 5 
 
      }); 
 
      console.log('man geo is ', manGeo); 
 
      //ny state map 
 
      var nyCenter = nyGeo.features[0].geometry.coordinates[0][0]; 
 
      console.log('the ny center is ', nyCenter); 
 
      var afterMap = new mapboxgl.Map({ 
 
       container: 'after', 
 
       style: 'mapbox://styles/mapbox/dark-v9', 
 
       center: nyCenter, 
 
       zoom: 9 
 
      }); 
 
      console.log('ny geo homie', nyGeo); 
 
      afterMap.on('load', function() { 
 
       afterMap.addSource("points", { 
 
        "type": "geojson", 
 
        "data": nyGeo 
 
       }) 
 
      }); 
 
      afterMap.addLayer({ 
 
       "id": "points", 
 
       "type": "symbol", 
 
       "source": "points", 
 
       "layout": { 
 
        "icon-image": "{icon}-15", 
 
        "text-field": "{title}", 
 
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
 
        "text-offset": [0, 0.6], 
 
        "text-anchor": "top" 
 
       } 
 
      }); 
 
      var map = new mapboxgl.Compare(beforeMap, afterMap, { 
 
       // Set this to enable comparing two maps by mouse movement: 
 
       // mousemove: true 
 
      }); 
 
     }()); 
 
    }) 
 
});

Answer 1

問題は、マップがロードされる前に、マップにレイヤを追加しているということです。 loadイベントハンドラにタイルソースとスタイルレイヤーを添付していることを確認してください。

afterMap.on('load', function() { 
    afterMap.addSource("points", { 
    "type": "geojson", 
    "data": nyGeo 
    }) 
    afterMap.addLayer({ 
    "id": "points", 
    "type": "symbol", 
    "source": "points", 
    "layout": { 
     "icon-image": "{icon}-15", 
     "text-field": "{title}", 
     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
     "text-offset": [0, 0.6], 
     "text-anchor": "top" 
    } 
    }); 
});