It can be time-consuming to render a large quantity of dynamic markers on Leaflet after receiving a response

Incorporating leaflet.js into my web project, I am faced with the challenge of creating a map view with dynamic markers. Upon receiving a response, I attempt to generate dynamic components based on the data and utilize change detection to monitor updates. The process runs smoothly when the response data is relatively small (approximately 500kb), but issues arise when dealing with larger dataset sizes. For example, if the response exceeds 3-4 Mb and includes around 29k markers, the rendering time significantly increases. In such cases, it takes about 2 minutes for the markers to load, causing the overall page loading time to stretch between 3-4 minutes, which is not ideal.

Given that I am working within the Angular framework, I am seeking solutions to optimize the rendering speed for my dynamic components in leaflet maps. Any advice or suggestions on how to enhance performance would be greatly appreciated.

Answer №1

If you're looking to boost performance, consider switching to canvas mode by visiting this link: https://leafletjs.com/reference-1.7.1.html#map-prefercanvas

Additionally, try explicitly setting a renderer using L.Canvas() which can be found at: https://leafletjs.com/reference-1.7.1.html#map-renderer

If these solutions don't improve performance, you may need to consider clustering your markers. Handling 28k markers can be challenging, so using Angular libraries like https://github.com/Asymmetrik/ngx-leaflet-markercluster could help.

Answer №2

If you're looking to try out marker clustering at scale, consider giving Kyrix a shot. This tool is specifically designed for this purpose and offers the convenience of Docker containerization, eliminating the hassle of database installation and maintenance.

Check out an example Kyrix app featuring 1.88 million wildfires displayed on an interactive map:

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

choose to display on mobile devices as a dropdown menu rather than a modal window

On mobile devices, my select elements are currently displayed as modals with options. However, I need to change this appearance to resemble the dropdown list view observed on desktop devices. Your assistance is greatly appreciated. ...

I am experiencing an issue with my post method where I am not receiving any data back from the

I am using a POST method to send data to the server and I want to receive data back after that. When I subscribe to the post method: this.categoryService.storeCategory(this.currentFileUpload, this.category).subscribe(category => { console.log(" ...

Ensuring type safety at runtime in TypeScript

While delving into the concept of type safety in Typescript, I encountered an interesting scenario involving the following function: function test(x: number){ console.log(typeof x); } When calling this method as test('1'), a compile time er ...

Evaluating Angular2 components that have indirect dependencies

Starting with Angular2, I make sure to test each component I create from scratch. When it comes to writing tests for components, I must initialize TestBed to ensure that the component under scrutiny has all its necessary dependencies resolved. Currently, ...

Having Trouble with Building After Fork and NPM Installation on GitHub

https://github.com/czeckd/angular-dual-listbox Discovering a Github repository that caught my attention, I decided to incorporate it into my Angular 5 application. However, after noticing certain styles and functionality that needed modification or additi ...

Tips for troubleshooting the error that occurs during the ng build --prod process

After creating an app, I attempted to build it using ng build --prod, only to encounter an error message related to the current version of Syncfusion. Below is the specific error I am experiencing: ERROR in ./node_modules/@syncfusion/ej2-angular-dropdown ...

Angular 2 decorators grant access to private class members

Take a look at this piece of code: export class Character { constructor(private id: number, private name: string) {} } @Component({ selector: 'my-app', template: '<h1>{{title}}</h1><h2>{{character.name}} detai ...

Failed validation for Angular file upload

I attempted to create a file validator in the front end using Angular. The validator is quite straightforward. I added a function onFileChange(event) to the file input form to extract properties from the uploaded file. I then implemented a filter - only al ...

The error occurred while using NPM watch: ReferenceError: The variable "_" is not recognized in the file "../node_modules/angular-google-maps/dist/angular-google-maps.js" at line 1, column 1 (

I'm currently working with Angular and encountered an error in the console section of my browser after restarting my computer: Unhandled Promise rejection: _ is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: _ is not de ...

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

Is Angular Template Polymorphism Failing?

So I'm working with a base class that has another class extending it. export class Person { public name: string; public age: number; } export class Teacher extends Person { public yearsTeaching: number; } Now, in my component, I need to ...

New from Firefox 89: The afterprint event!

Having an issue with this fragment of code: const afterPrint = () => { this.location.back(); window.removeEventListener('afterprint', afterPrint); }; window.addEventListener('afterprint', afterPrint); window.print(); I&apos ...

Ways to dynamically display or hide content in Angular 7

>when an English button is clicked, its corresponding div should be shown. If another button is clicked, its div should also show without closing the previous one. I want each div to close only when its respective button is clicked again. >Please not ...

Guide to combining an Angular 2 (angular-cli) application with Sails.js

I am looking to integrate the app created using angular-cli with Sails.js. My background is in PHP, so I am new to both of these frameworks. What are the steps involved in setting them up together? How can I execute commands like ng serve and/or sails li ...

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

What are the steps for creating and deploying a project that utilizes asp.net core on the server-side and Angular on the client-side

My latest project combines asp.net core 5 and angular 15 technologies for the backend and frontend, respectively. The asp.net core MVC portion of the project is contained in a dedicated folder named serverApi, while the angular part is generated in another ...

What is the best way to ensure the footer remains in an automatic position relative to the component's height?

I am struggling to position the footer component correctly at the end of my router-outlet. After trying various CSS properties, I managed to make the footer stay at the bottom but it acts like a fixed footer. However, I want the footer to adjust its positi ...

The HAProxy is encountering difficulties when trying to connect to port 80 for the Angular application that is currently running on

I currently have an Angular application running on port 4200, and I have implemented HAProxy as a reverse proxy to redirect all traffic from port 80 to 4200. However, while my HAProxy settings are correctly directing traffic from 8080 to 4200, the redire ...

The issue with the tutorial is regarding the addHero function and determining the source of the new id

Whenever I need to introduce a new superhero character, I will utilize the add(string) function found in heroes/heroes.component.ts add(name: string): void { name = name.trim(); if (!name) { return; } this.heroService.addHero({ name } as H ...

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

Issue with select dropdown not pre-selecting values in ngFor based on ngModel. Take a look at the relevant component and html code: testArr = [ { id : '1', value: 'one' }, { id : '2', ...