title: Style is not done loading: Mapbox GL JS
body: <p>My goal is to create a before and after map that shows a series of coordinate markers on the after map. </p>
  
  <p>When the code is executed, I see this error message in the console: <code>Style is not done loading</code></p>
  
  <p>The end goal is to see a cursor that would allow users to swipe horizontally and see the maps change (from before to after).</p>
  
  <p>Here's my code so far, any help would go a long way!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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
              });
          }());
      })
  });</code></pre>
  </div>
  </div>
  </p>