Style is not done loading: Mapbox GL JS

Question

My goal is to create a before and after map that shows a series of coordinate markers on the after map.

When the code is executed, I see this error message in the console: Style is not done loading

The end goal is to see a cursor that would allow users to swipe horizontally and see the maps change (from before to after).

Here's my code so far, any help would go a long way!

$(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

The problem is that you are adding the layer to the map before the map is loaded. Be sure you are attaching the tile source and the style layer in the load event handler.

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"     }   }); });