Display multiple layers on Mapbox GL JS after the map has finished loading

I am working on a project where I need to showcase a large amount (~1 million) of GPS coordinates using Mapbox gl js. To handle this data fetch from the server, I have set up multiple sequential Ajax requests. My goal is to update the map with a new layer after each Ajax request and have it immediately displayed.

However, I encountered an issue when trying to place the code inside the 

map.on('style.load', function() {})
event. The map would not render until all the Ajax calls are completed. The current structure of my code looks something like this:

function loadData(finished) {
    if (finished) {
        return;
    }
    // Perform ajax request and wait for completion
    // If it's the last request, set finished = true
    // Call map.addSource()
    // Call map.addLayer()
    // Recursive call to loadData()
}

map.on("style.load", function() {
    loadData();
});

Can anyone suggest a solution to overcome this issue?

javascriptajaxmapbox-gl-js

Answer №1

To overcome this issue, I replaced the map.on(...) function with the code below:

function checkForMapLoad() {
    if(!map.isLoaded()) {
        window.setTimeout(checkForMapLoad, 100);
    } else {
        fetchMapData();
    }
}
checkForMapLoad();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing Protractor to execute each line of code without delay?

Why is Protractor executing each line of code immediately? I have a non-angular webpage that I need my selenium-based automation to interact with. I've written selenium webdriver-js code to accomplish this task. For example, after logging in, the use ...

javascriptangularjsnode.jsselenium-webdriverprotractor

When we employ AOT and JIT, we operate in the present moment

I've reviewed the definitions of AOT and JIT, but I'm still unsure about when to use each method in real-world scenarios. ...

javascriptnode.jsangulartypescriptecmascript-6

Tips for importing the mongoose-long plugin using the ES6 method

How can I rewrite the given import syntax into ES6 import format? import mongoose from 'mongoose'; import 'mongoose-long'(mongoose); import { Types: { Long } } from mongoose; ...

javascriptnode.jsmongoosees6-modulesmongoose-plugins

Creating a Jquery function to clone a select element with an inline onchange event and handle multiple ajax requests

I am dealing with a select dropdown that gets populated with numbers 14 through an ajax request. Each time a number is chosen from the dropdown, two signs are displayed as options. These signs are fetched using an onchange function attached to the select e ...

jqueryajaxclonehtml-select

Is it possible to validate the data first before returning a resolve?

How can we use a Promise to resolve if all fields are valid or reject if any field is invalid? let validateData = (data) => { let fields = [ 'Field1', 'Field2', 'Field3' ]; return new P ...

javascriptnode.js

Which one to use: AngularJs ui-router $location or $state?

Is there a way to convert the following code snippet: $location.path('/app/home/' + id).search({x:y}); into this: $state.go('/app/home/' + id).search({x:y}); I've attempted to make the switch, but I'm struggling to find e ...

javascriptangularjsstateangular-ui-router

What is the best method for transferring a string from JavaScript to a JSON file?

Is there a way to update the value of "JSValue" in my JSON (JSValue) using JavaScript? Specifically, how can I assign JSValue to a variable called Value using JavaScript? JavaScript var Value = 1 + 1 JSON { "DATA": [ { "JSValue": "0" } ...

javascriptjson

JavaScript Sort Error: 'Arithmetic operations can only be performed on variables of type 'any', 'number', 'bigint', or an enum type'

Encountering an error in my Angular 7 project related to the sort function in TypeScript. The error message states: "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type&apos ...

javascriptangulartypescript

How to maintain global position, rotation, and scale when adding an object to a group in Three.js

I need to transfer an object from one group (or world/scene) to another group while maintaining its global transformation. I want the object to appear unchanged. Here is an example of what I am trying to achieve: //store the current world transformation ...

javascriptmatrix3dthree.js

My C++ program seems to be lagging behind in speed compared to the JavaScript code I

My project involves using the same data. In my C++ code, it takes 17 seconds to train 100 data points, while in the JavaScript code from this specific project https://github.com/CodingTrain/Toy-Neural-Network-JS, it only takes about 10 seconds to train 24 ...

javascriptc++performancevisual-c++neural-network

Issues with JSON.parse in node.js on Windows 8.1 system

I've encountered an issue with the JSON.parse function in node.js on Windows, resulting in this error message in my command line: SyntaxError: Unexpected token ´╗┐ at Object.parse <native> at R:\filelocation\server\server.js ...

javascriptjsonnode.jssocket.io

Infinite scroll functionality does not function properly with jQuery

I recently completed a custom WordPress theme and implemented the following script to create an accordion-like effect: ( function( $ ) { var $ele = $('.entry-content').hide(); $(".entry-header").click(function(e) { e.preventDef ...

jqueryajaxwordpress

What steps are needed to set up React SPA authentication using Keycloak and the PKCE flow?

This is my first time diving into the world of Keycloak. I have successfully set up a Keycloak instance on my local machine where I can create realms, clients, and more. I've come across several examples of using React with Keycloak, but none of them ...

javascriptreactjsoauth-2.0keycloakopenid-connect

The curious case of Jade view caching in Express

Recently, I updated my Node.js and Express to versions 0.10.21 and 3.4.4, respectively, and now I'm encountering some strange view caching issues during development (as well as production). It appears that the HTML generated from views included withi ...

javascriptnode.jscachingexpresspug

Is the "require" function absent in Firebase?

I'm encountering an issue while trying to execute an HTML file in the Firebase staging environment. I have included the Firebase npm package in my JavaScript code, but when it runs in the browser, I get an error stating "require is not defined". HTML ...

javascriptnode.jsfirebase

Learn the process of transferring user IDs from one table to another

Hey there! I'm currently working with the user table where the ID is auto-incremented. However, I need to gather some information about these users on a separate page and insert it into a new table. The challenge here is that I want to transfer the ID ...

phpmysqlajax

What are the steps to reset a JavaScript game?

I'm currently working on a JavaScript game project. Once the game is finished, I'd like to give players the option to go back to the main menu by clicking a button, then start a new game by clicking play again. However, I've run into an issu ...

javascriptreloadrestart

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

How can I execute a function when the user submits a form using an external JavaScript file? index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example</title> ...

javascripthtmlcss

Having Difficulties Initiating Click Actions on Save Buttons Located in Child Components

I'm facing a challenge with triggering click events on save buttons located in child components within my React app. Within my parent component called AddQuestionsPage, I have multiple instances of a child component named Question. Each Question comp ...

javascriptreactjs

Creating multiple routes within a single component in Angular without triggering unnecessary redraws

Within the ChildComponent, there is a reactive form that allows for data entry. Upon saving the filled form, the route should be updated by appending an id to the current route. Currently, when saving, the component renders twice and causes screen flicke ...

javascriptangularangular-routingangular-routerangular-routerlink