Style is not done loading: Mapbox GL JS

mapbox-gl-js
Johnny G. picture Johnny G. · Nov 11, 2016 · Viewed 11.6k times · Source

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!

Answer

Danny Delott picture Danny Delott · Nov 15, 2016

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

Related questions

Drawing a circle with the radius in miles/meters with Mapbox GL JS

I'm in the process of converting a map from using mapbox.js to mapbox-gl.js, and am having trouble drawing a circle that uses miles or meters for its radius instead of pixels. This particular circle is used to show …

Read More
How to add "click" listener on marker in mapbox-gl-js

I added few markers on the map using folowing this example: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ Now I want to show popup when user clicks on marker image, but i can not find elegant solution. Any help?

Read More
Mapbox GL JS vs. Mapbox.js

From the Mapbox glossary, Mapbox.js Mapbox.js is a JavaScript library that allows you to add an your interactive map to your website. It is a plugin for Leaflet, and it is an open source library that’s free …

Read More