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?
