Error de Mapbox: el estilo no se está cargando

Estoy tratando de dibujar en un mapa mapbox, basado en los resultados de suncalc y usando geojson. Primero intenté crear 2 funciones, una para cada línea que intentaba dibujar. Pero cuando hice eso, solo mostraría la última función llamada. Así que concluí que no sé cómo administrar las capas, ya que soy nuevo en la sintaxis de mapbox y leaflet.

Usando ejemplos de folletos, llegué a este código:

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

Cuando se llama a la función, aparece el siguiente error:

Error: el estilo no se está cargando

"use estricto"; función 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 anular 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 en 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.glifos), 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) para (var r en 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: nuevo error ('Capa de origen "'+ e.sourceLayer +'" no existe en la fuente "'+ t.id +'" según lo especificado por la capa de estilo "'+ e.id +'" ')})}, cargado: función () {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. ahora ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) throw new Error ("El estilo no se carga")} , actualice: function (e, t) {if (! this._updates.changed) devuelva esto; 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. teclas (this._updates.sources); for (s = 0; s = 0; r -) for (var s = this._order [r], i = 0; i

Puedo detectar el error (resaltado dentro de blockquote), pero no tengo idea de cómo solucionarlo ... Mi intento de solucionarlo fue usando el map.on('load', function()), pero todavía recibo el mismo error.

¿Alguna idea?

Tome la L.marker([ln, lt], {icon: marker}).addTo(map);línea y muévala a la función de devolución de llamada para map.on('load')(una línea directamente encima de donde agrega el L.geoJsonobjeto). Esto evitará que el código intente agregar el marcador al mapa antes de que se inicialice el estilo.