Erreur Mapbox: le chargement du style n'est pas terminé

J'essaie de dessiner sur une carte mapbox, basée sur les résultats de suncalc et en utilisant geojson. J'ai d'abord essayé de créer 2 fonctions, une pour chaque ligne que j'essayais de tracer. Mais quand je l'ai fait, cela n'affichait que la dernière fonction appelée. J'ai donc conclu que je ne sais pas comment gérer les couches, car je suis nouveau dans la syntaxe de mapbox et de brochure.

En utilisant des exemples de brochures, je suis arrivé à ce 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);
        });
    }

Lorsque la fonction est appelée, j'obtiens l'erreur suivante:

Erreur: le chargement du style n'est pas terminé

"use strict"; fonction 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.glyphes), 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, {_ chargé:! 1, _validateLayer: fonction (e) {var t = this.sources [e.source]; e.sourceLayer && t && t.vectorLayerIds && - 1 === t.vectorLayerIds.indexOf (e.sourceLayer) && this.fire ("error", {error: new Error ('Couche source "'+ e.sourceLayer +'" n'existe pas sur la source "'+ t.id +'" comme spécifié par le calque de style "'+ e.id +'" ')})}, chargé: function () {if (! this ._loaded) renvoie! 1; pour (var e dans this.sources) si (! this.sources [e].Load ()) return! 1; return! this.sprite || this.sprite.loaded ()}, _ resolve: function () {var e, t; this._layers = {}, this._order = this.stylesheet. couches.map (fonction (e) {return e.id}); pour (var r = 0; rMath.floor (e) && (t.lastIntegerZoom = Math.floor (e + 1), t.lastIntegerZoomTime = Date. now ()), t.lastZoom = e},_checkLoaded: function () {if (! this._loaded) renvoie une nouvelle erreur ("Le style n'est pas terminé lors du chargement")} , update: function (e, t) {if (! this._updates.changed) renvoie ceci; 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. clés (this._updates.sources); pour (s = 0; s = 0; r -) pour (var s = this._order [r], i = 0; i

Je peux repérer l'erreur (mise en évidence à l'intérieur de blockquote), mais je n'ai aucune idée de la façon de la corriger ... Ma tentative de la corriger utilisait le map.on('load', function()), mais j'obtiens toujours la même erreur.

Des pensées?

Prenez la L.marker([ln, lt], {icon: marker}).addTo(map);ligne et déplacez-la dans la fonction de rappel pour map.on('load')(une ligne directement au-dessus de l'endroit où vous ajoutez l' L.geoJsonobjet). Cela empêchera le code d'essayer d'ajouter le marqueur à la carte avant l'initialisation du style.