Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. React JS

Mapping Millions: How to Cluster Thousands of Markers with Next.js, Leaflet, and Supercluster

Imago voragine.net
• , , , ,

The easier approach is to cluster the markers on the client-side, due to leaflet plugins like Leaflet.markercluster.

…client-side clustering has its limitations. In order to ake it work, you need to load all the markers at once! This is not a problem if you have a small number of markers, but when you have thousands or millions of markers, it can quickly become a performance bottleneck.

Backend clustering addresses this problem by processing the data on the server. Only clusters for the current viewport and zoom level are sent to the client. This minimizes bandwidth usage and reduces client-side processing. In my solution, I utilized Supercluster, a high-performance clustering library suitable for Leaflet maps.

A Leaflet Developer’s Guide to High-Performance Map Visualizations in React

Imago voragine.net
• , , , , , ,

When I tried to render around 40k Geojson objects in Leaflet’s canvas mode, it took around 30 seconds to render the map. When I used Leaflet’s GeoJSON, instead of React Leaflet GeoJSONs, initial rendering took a few seconds. The response from the library maintainer was that React Leaflet is an additional abstraction and it’s expected that rendering is less performant. My first advice would be avoid leaning solely on this library.

While Leaflet’s canvas mode is an option, rendering over 100k objects stretches its limits. Fortunately, there are solutions that perform very well with large amounts of data, such as WebGL rendering engines and Vector Tiles. Leaflet doesn’t support WebGL or Vector Tiles out of box, but its plugins bridge the gap.

Leaflet.markercluster seems like a go-to solution, yet its performance falters beyond 100k markers. For a leap in performance, consider supercluster.

React & TypeScript: What is React.FC and Why should i use it?

Imago voragine.net
• , , ,

React.FC is a type that stands for «Function Component» in React. It is a generic type that allows you to specify the props that a function component will accept.

Using React.FC can be helpful for a number of reasons:

It provides type safety for the props that a component expects to receive. This can help catch bugs early on and make your code easier to understand.

It makes it easier to refactor your component’s props. For example, if you want to rename a prop, the TypeScript compiler will catch any places where that prop is used and help you update them.

It makes it easier to see the expected shape of a component’s props just by looking at its type definition.

How to Create a Custom WordPress Gutenberg Block: Tutorial Series

Imago voragine.net
• , , , ,

In the first parts we focus on the basics. We set up a development environment with running compilation of our code. And the basics of how to register a block and the necessary PHP parts of it as well. We’ll learn about the huge library of components and methods available to us from WordPress Gutenberg.

Moving on we’ll learn about how to add sections and settings for our block in the editor sidebar (Inspector) as well as customizing the toolbar. Along the way we’ll touch a lot of different input types and how to use Gutenberg’s component for these. And of course we’ll learn how to save, update and output the saved information to our block – and how that works behind the scenes.

At the end we’ll look at more advanced things like dynamic blocks and how to use PHP to render the block output. And finally how to make post queries inside the editor – allowing the user to select a post from a list for render.