Mapbox Error: Style is not done loading

Question

I'm trying to draw on a mapbox map, based on suncalc results and using geojson. First I tried to create 2 functions, one to each line I was trying to draw. But when I did that, it would only display the last function called. So I concluded I don't know how to manage the layers, since I'm new to mapbox and leaflet syntax.

Using leaflet examples, I got to this code:

JAVASCRIPT

 function drawOnMap(sAz){
 //sun calculation stuff, doesn't matter for the problem
 var lt = parseFloat(document.getElementById('lat').value);
 var ln = parseFloat(document.getElementById('long').value); 
 var R = 6371000; //Earth's radius
 var d = 10000* Math.sin(1); // Distance
 var brngSR = deg2rad(sAz);
 var ltr = deg2rad(lt); 
 var latSR = rad2deg(Math.asin( Math.sin(ltr)*Math.cos(d/R) + Math.cos(ltr)*Math.sin(d/R)*Math.cos(brngSR) ));
 var lonSR = ln + rad2deg(Math.atan2(Math.sin(brngSR)*Math.sin(d/R)*Math.cos(ltr), Math.cos(d/R)-Math.sin(ltr)*Math.sin(latSR)));
 var out3 = calculateNOAA(lat, lon, timeZone, year, month, day, out[6], out[7], out[8]);
 var sEl2 = out3[11];
 var sAz2 = out3[9];
 var brngSS = deg2rad(sAz2); 
 var latSS = rad2deg(Math.asin( Math.sin(ltr)*Math.cos(d/R) + Math.cos(ltr)*Math.sin(d/R)*Math.cos(brngSS) ));
 var lonSS = ln + rad2deg(Math.atan2(Math.sin(brngSS)*Math.sin(d/R)*Math.cos(ltr), Math.cos(d/R)-Math.sin(ltr)*Math.sin(latSS)));
 //GeoJSON to display 2 lines 
 var sunPos = [
 {
 "type": "Feature",
 "geometry": {
 "type": "LineString",
 "coordinates": [
 [ln, lt], 
 [lonSR, latSR]
 ]
 },
 "properties": {"id": "sunrise"}
 },
 {
 "type": "Feature",
 "geometry": {
 "type": "LineString",
 "coordinates": [
 [ln, lt],
 [lonSS, latSS]
 ]
 },
 "properties": {"id": "sunset"}
 }
 ];
 //setting map to current position
 mapboxgl.accessToken = 'pk.<mytoken>'; //I'm using a real token
 var map = new mapboxgl.Map({
 container: 'map',
 style: 'mapbox://styles/mapbox/streets-v9',
 center: [ln, lt],
 zoom: 15
 }); 
 var marker = L.icon({
 iconUrl: 'actpin.png',
 iconAnchor: [20, 50]
 });
 L.marker([ln, lt], {icon: marker}).addTo(map);
 //adding the layer to map with different colors each line
 map.on('load', function () {
 L.geoJson(sunPos, {
 style: function(feature) {
 switch (feature.properties.id) {
 case 'sunrise': return {color: "#FFFF33"};
 case 'sunset': return {color: "#FF9933"};
 }
 }
 }).addTo(map);
 });
 }

When the function is called, I get the following error:

Error: Style is not done loading

"use strict";function Style(e,t,r){this.animationLoop=t||new AnimationLoop,this.dispatcher=new Dispatcher(r||1,this),this.spriteAtlas=new SpriteAtlas(512,512),this.lineAtlas=new LineAtlas(256,512),this._layers={},this._order=[],this._groups=[],this.sources={},this.zoomHistory={},util.bindAll(["_forwardSourceEvent","_forwardTileEvent","_forwardLayerEvent","_redoPlacement"],this),this._resetUpdates();var s=function(e,t){if(e)return void this.fire("error",{error:e});if(!validateStyle.emitErrors(this,validateStyle(t))){this._loaded=!0,this.stylesheet=t,this.updateClasses();var r=t.sources;for(var s in r)this.addSource(s,r[s]);t.sprite&&(this.sprite=new ImageSprite(t.sprite),this.sprite.on("load",this.fire.bind(this,"change"))),this.glyphSource=new GlyphSource(t.glyphs),this._resolve(),this.fire("load")}}.bind(this);"string"==typeof e?ajax.getJSON(normalizeURL(e),s):browser.frame(s.bind(this,null,e)),this.on("source.load",function(e){var t=e.source;if(t&&t.vectorLayerIds)for(var r in this._layers){var s=this._layers[r];s.source===t.id&&this._validateLayer(s)}})}var Evented=require("../util/evented"),StyleLayer=require("./style_layer"),ImageSprite=require("./image_sprite"),GlyphSource=require("../symbol/glyph_source"),SpriteAtlas=require("../symbol/sprite_atlas"),LineAtlas=require("../render/line_atlas"),util=require("../util/util"),ajax=require("../util/ajax"),normalizeURL=require("../util/mapbox").normalizeStyleURL,browser=require("../util/browser"),Dispatcher=require("../util/dispatcher"),AnimationLoop=require("./animation_loop"),validateStyle=require("./validate_style"),Source=require("../source/source"),styleSpec=require("./style_spec"),StyleFunction=require("./style_function");module.exports=Style,Style.prototype=util.inherit(Evented,{_loaded:!1,_validateLayer:function(e){var t=this.sources[e.source];e.sourceLayer&&t&&t.vectorLayerIds&&-1===t.vectorLayerIds.indexOf(e.sourceLayer)&&this.fire("error",{error:new Error('Source layer "'+e.sourceLayer+'" does not exist on source "'+t.id+'" as specified by style layer "'+e.id+'"')})},loaded:function(){if(!this._loaded)return!1;for(var e in this.sources)if(!this.sources[e].loaded())return!1;return!this.sprite||this.sprite.loaded()},_resolve:function(){var e,t;this._layers={},this._order=this.stylesheet.layers.map(function(e){return e.id});for(var r=0;rMath.floor(e)&&(t.lastIntegerZoom=Math.floor(e+1),t.lastIntegerZoomTime=Date.now()),t.lastZoom=e},_checkLoaded:function(){if(!this._loaded)throw new Error("Style is not done loading")},update:function(e,t){if(!this._updates.changed)return this;if(this._updates.allLayers)this._groupLayers(),this._updateWorkerLayers();else{var r=Object.keys(this._updates.layers);r.length&&this._updateWorkerLayers(r)}var s,i=Object.keys(this._updates.sources);for(s=0;s=0;r--)for(var s=this._order[r],i=0;i

I can spot the error (highlighted inside blockquote), but I have no idea how to fix it... My attempt to fix it was using the map.on('load', function()), but I still get the same error.

Any thoughts?

• PolyGeo: Welcome to GIS SE! As a new user be sure to take the Tour to learn about our focussed Q&A format.

Answer 1

Take the L.marker([ln, lt], {icon: marker}).addTo(map); line and move it into the callback function for map.on('load') (one line directly above where you add the L.geoJson object). This will prevent the code trying to add the marker to the map before the style is initialized.