9

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?

  • Welcome to GIS SE! As a new user be sure to take the Tour to learn about our focussed Q&A format. – PolyGeo Jul 2 '16 at 1:27
10

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.