Exploring the capabilities of Mapbox GL by creating and animating multiple points and symbols

My goal is to incorporate real-time, web-socket event-based data onto my map.
Each time a new point is received, I need to either add it or update it on the map. What would be the most effective approach?

A) One option is to create a FeatureCollection and set up a source and corresponding layer. When updating, modify the FeatureCollection and utilize setData();
B) Another possibility is to create a unique source and layer for each individual point. Then, when updating, simply adjust the specific source and use setData();

I personally have doubts regarding option B), as I question its efficiency. However, I am also uncertain about the performance of option A) (or perhaps I am looking at it from the wrong angle).

Answer №1

When working with Mapbox Draw, I find a middle ground between using two layers: one for editing features and another for static features. In your scenario, it would be beneficial to create a new layer for every batch of 100 features. This helps optimize Mapbox GL's performance by reducing the workload of restructuring geojson data into tiles every time a new feature is added. However, keep in mind that having too many layers can also cause issues.

While I mentioned using 100 features as a guideline, it's important to experiment with different numbers to strike the right balance between the number of layers and the number of features within a source.

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

Tips for automatically aligning the camera to a specific point in three.js

Is there a built-in feature in three.js for automatically focusing a camera on a specific point, causing the rest of the environment to blur like in these examples? The XG library code that enables auto focus looks something like this: renderer.dofEnable ...

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

How can we nest a div within the outermost parent element?

Consider a scenario where there are 3 different divs named grandParent, Parent, and Child. Although the parent's tag is placed inside the grandParent, due to the use of position: absolute; property, the parent ends up being displayed outside the grand ...

Why does the function yield two distinct outcomes?

I can't figure out why, but when I execute the function (kpis1) by itself, it returns the result (100), however, when I run the function (kpis2) alone, I get the result (97). But when I run both functions together, the results are kpis1=100 and kpis2 ...

Add the content script to a webpage just one time

I am looking to inject a content script on context menu click in an extension manifest version 3. I need a way to determine if the script is already injected or not. If it hasn't been injected yet, I want to inject the content script. This condition m ...

What is the best way to create vertical spacing between Material UI Grid Paper components?

The spacing of the goal components is not as I would like it to be. This is how they currently appear. https://i.stack.imgur.com/jApzK.png So far, I have attempted setting the display of the Paper selector to flex. Additionally, I experimented with adjus ...

retrieve all users from the mongodb database

How can I modify this function to retrieve all users? I am currently in the process of learning async await and struggling with understanding how to access the request body. Here's my function: export const get: Operation = async ( req: express.Req ...

Is there a way to create a recurring Promise .then statement?

Is there a way to create a loop with a repeated .then clause? I need to continue executing the .then clause promise, and if the exit condition is not met, I have to repeat the same process until the condition is satisfied. My scenario involves making mult ...

Achieving uniform width in material ui: Tips for maintaining consistency

I am encountering an issue with the width of my Goal components and can't figure out what is causing it. https://i.stack.imgur.com/jPlyf.png Despite setting the width of the Paper selector to 100%, each Goal component's width remains inconsiste ...

Utilizing Javascript for a Stopwatch/Countdown in the Format: 00:00:00

I am currently working with this block of code: function startStopwatch() { vm.lastTickTime = new Date(); $interval.cancel(vm.timerPromise); vm.timerPromise = $interval(function() { var tickTime = new Date(); ...

What are some techniques for emulating resizing functionality in Angular?

Is there a way to simulate resize in Angular without using jQuery? In the past, I used the following code: $(window).resize(); I also have a question about focusing on an element: angular.element(document.querySelector('.kb-active')).focus(); ...

Vue JS Router Index File

Screenshot1 Hello everybody, Displayed in the image is a menu from a website created using vue js. My goal is to be able to redirect users to external resources like google.com when they click on this particular menu. I'm wondering if it's achi ...

Adding colors dynamically upon page reload with javascript and jQuery

I have created an array of colors and am attempting to use colors.forEach inside the ready function to call addBox for each color in the array. My goal is to ensure that all the colors are added when the page is reloaded. Please let me know if you require ...

Numerous routers available for enhancing functionality in an Ember application

Can an Ember app have multiple router.js files? By default, one router.js file will look like this: import Ember from 'ember'; import config from '../../config/environment'; var Router = Ember.Router.extend({ location: config.locat ...

How to remove the black border on a material-ui button

I am currently working with the material-ui datepicker and buttons. Whenever I click on the datepicker icon to select a date or any of the buttons, I notice a black border appearing. How can I remove this black border from the design? https://i.sstatic.ne ...

Invoke functions within a separate function

I am facing an issue when it comes to invoking functions within another function. Below is a snippet of the code I am working with: <script> function saveInfo() { function returnEmail() { var _e = document.getElementById("em ...

What are the best practices for effectively utilizing the nodejs Stream API?

I am currently working on an application that reads input from various sources, including files, sockets, and other parts of the same program that produce buffers or strings. While I have successfully handled sockets and files using node's Stream API ...

Tips for breaking free from an html string with numerous double quotation marks

After receiving a string from an ajax request, the content looks like this: According to json doc, "quotes should be escaped" This information is stored in data.description, and inserted into the template like so: '<a href="#"' + ' ...

Organizing shared components into a dedicated repository

What is the best way to transfer my React components to a separate repository? I attempted moving the files to a new repo and installing them with npm using the git URL, but when I try to import them they are not functioning as expected. ...

What is the best way to showcase the chosen items in a dropdown menu?

There seems to be an issue with the selected item not appearing in the input field. export default function BasicSelect() { const [sortBy, setSortBy] = useState(""); const [condition, setCondition] = useState(""); const [delivery, ...