The style is not executed. Download: Mapbox GL JS

Question

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

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

The ultimate goal is to see a cursor that allows users to scroll horizontally and see map changes (from before and after).

Here is my code so far, any help has come 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 add a layer to the map before loading the map. Make sure you attach the tile source and 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" } }); });