Display the information on the same Position. Uncluster

[Johjoh-6]

Hi, I was wondering if somebody has a solution for displaying the information properties for the multiple features on the same point. 

I found a solution with the cluster and uncluster or spiderfier. Actually, I try to make this one Spiderfier
with TypeScript support and some updates. 

But I would like to know if the uncluster or spiderfier will be in implemented natively. Or an official plugging. 

I can share what I did with some code snippets. But I am sure that can be improved.

[HarelM]

I think a plugin is a good solution for this, note that there's a demand to keep bundle size, so things that are not considered critical usually don't get in.
There was no request to move this under the maplibre umbrella so that it's more "official", but there's no objection from my point of view.
The main requirement for moving something under the maplibre umbrella is that there's a will to continue maintain it.
The linked repo doesn't seem well maintained if the last commit is dated 2 years ago.
Having said that, I'm pretty sure the code there is relatively small.
I've implemented something simliar, which looks a lot less impressive but does the work well:
When clicking the cluster the following popup shows:

[Johjoh-6]

Thanks for your answer.
I understand.
I found this feature very useful, but yes this repo doesn't seem to be maintained and has no TypeScript support.
I think would be great to make something up to date.

Actually, I got something like this.

import type { Map, Marker } from "maplibre-gl";
import  mapLibre  from "maplibre-gl";

interface SpiderLegParam {
    x: number;
    y: number;
    angle: number;
    legLength: number;
    index: number;
}

export interface SpiderLeg {
    feature: GeoJSON.Feature;
    maplibreMarker: Marker;
    param: SpiderLegParam;
}

export interface OptionsSpiderfier {
    animate: boolean;
    animationSpeed: number;
    customPin: boolean;
    onClick?: (e: Event, spiderLeg: SpiderLeg) => void;
    circleSpiralSwitchover: number;
    circleFootSeparation: number;
    spiralFootSeparation: number;
    spiralLengthStart: number;
    spiralLengthFactor: number;
    offset?: number;
}

export default class Spiderfier {
    private map: Map;
    private options: OptionsSpiderfier;
    private previousSpiderLegs: SpiderLeg[] = [];

    constructor(map: Map, userOptions: Partial<OptionsSpiderfier>) {
        this.map = map;
        this.options = {
            animate: false,
            animationSpeed: 0,
            customPin: false,
            circleSpiralSwitchover: 10,
            circleFootSeparation: 25,
            spiralFootSeparation: 28,
            spiralLengthStart: 15,
            spiralLengthFactor: 4,
            ...userOptions
        };
    }

    public spiderfy(latLng: [number, number], features: any[]) {
        const spiderLegs = this.generateSpiderLegs(latLng, features);

        this.animateSpiderLegs(spiderLegs);

        this.previousSpiderLegs = spiderLegs;
    }

    public unspiderfy() {
        this.animateSpiderLegsRemoval(this.previousSpiderLegs);

        this.previousSpiderLegs = [];
    }

    private generateSpiderLegs(latLng: [number, number], features: any[]): SpiderLeg[] {
        const spiderLegParams = this.generateSpiderLegParams(features.length);

        return features.map((feature, index) => {
            const spiderLegParam = spiderLegParams[index];
            const maplibreMarker = this.createMaplibreMarker(latLng, spiderLegParam);
            const spiderLeg: SpiderLeg = {
                feature,
                maplibreMarker,
                param: spiderLegParam
            };

            this.initializeSpiderLeg(spiderLeg);

            return spiderLeg;
        });
    }

    private initializeSpiderLeg(spiderLeg: SpiderLeg) {
        if (this.options.onClick && typeof this.options.onClick === 'function') {
            spiderLeg.maplibreMarker.getElement()?.addEventListener('click', (e) => {
                this.options.onClick!(e, spiderLeg);
            });
        }
    }

    private animateSpiderLegs(spiderLegs: SpiderLeg[]) {
        spiderLegs.reverse().forEach((spiderLeg, index) => {
            const container = spiderLeg.maplibreMarker.getElement();
            if (container) {
                container.classList.remove('initial');
                container.style.transitionDelay = `${(this.options.animationSpeed / 1000) / spiderLegs.length * index}s`;
            }
        });
    }

    private animateSpiderLegsRemoval(spiderLegs: SpiderLeg[]) {
        spiderLegs.reverse().forEach((spiderLeg, index) => {
            const container = spiderLeg.maplibreMarker.getElement();
            if (container) {
                container.style.transitionDelay = `${(this.options.animationSpeed / 1000) / spiderLegs.length * index}s`;
                container.classList.add('exit');
                setTimeout(() => {
                    spiderLeg.maplibreMarker.remove();
                }, this.options.animationSpeed + 100);
            }
        });
    }
    private generateSpiderLegParams(count: number): SpiderLegParam[] {
        return count >= this.options.circleSpiralSwitchover
            ? this.generateSpiralParams(count)
            : this.generateCircleParams(count);
    }

    private generateSpiralParams(count: number): SpiderLegParam[] {
        let legLength = this.options.spiralLengthStart;
        let angle = 0;

        return Array.from({ length: count }, (_, index) => {
            angle += this.options.spiralFootSeparation / legLength + index * 0.0005;
            legLength += (2 * Math.PI * this.options.spiralLengthFactor) / angle;

            return {
                x: legLength * Math.cos(angle),
                y: legLength * Math.sin(angle),
                angle,
                legLength,
                index,
            };
        });
    }

    private generateCircleParams(count: number): SpiderLegParam[] {
        const circumference = this.options.circleFootSeparation * (2 + count);
        const legLength = circumference / (2 * Math.PI); // = radius from circumference
        const angleStep = (2 * Math.PI) / count;

        return Array.from({ length: count }, (_, index) => ({
            x: legLength * Math.cos(index * angleStep),
            y: legLength * Math.sin(index * angleStep),
            angle: index * angleStep,
            legLength,
            index,
        }));
    }

    private createMaplibreMarker(latLng: [number, number], spiderLegParam: SpiderLegParam): Marker {
        const marker = new mapLibre.Marker({
            color: '#ff0000',
            className: 'spider-leg-marker',
        }).setLngLat(latLng);

        // Set marker properties based on spiderLegParam
        const container = marker.getElement();
        if (container) {
            container.style.marginLeft = spiderLegParam.x + 'px';
            container.style.marginTop = spiderLegParam.y + 'px';

            // const lineElem = container.appendChild(document.createElement('div'));
            // lineElem.className = 'spider-leg-line';
            // if (container.querySelector('.spider-leg-line')) {
            //     lineElem.style.height = spiderLegParam.legLength + 'px';
            //     lineElem.style.transform = 'rotate(' + (spiderLegParam.angle - Math.PI / 2) + 'rad)';
            // }
            // else {
            //     console.warn('Line element not found in marker container.');
            // }
        } else {
            console.warn('Marker container not found.');
        }

        const popupOffset = this.calculatePopupOffset(spiderLegParam);

        const popup = new mapLibre.Popup({ className: "custom-popup", offset: popupOffset['top'] }).setLngLat(latLng);

        marker.setPopup(popup); // Add popup to marker
        marker.addTo(this.map); // Add the marker to the map

        const markerElement = marker.getElement();
        // Add animation
        if (markerElement) {
            markerElement.classList.add('initial');
        }

        return marker;
    }

    public calculatePopupOffset(spiderLegParam: SpiderLegParam): Record<string, [number, number]> {
        const pinOffsetX = spiderLegParam.x;
        const pinOffsetY = spiderLegParam.y;

        const offset = this.options.offset || 0;

        return {
            'top': this.offsetVariant([0, offset], pinOffsetX, pinOffsetY),
            'top-left': this.offsetVariant([offset, offset], pinOffsetX, pinOffsetY),
            'top-right': this.offsetVariant([-offset, offset], pinOffsetX, pinOffsetY),
            'bottom': this.offsetVariant([0, -offset], pinOffsetX, pinOffsetY),
            'bottom-left': this.offsetVariant([offset, -offset], pinOffsetX, pinOffsetY),
            'bottom-right': this.offsetVariant([-offset, -offset], pinOffsetX, pinOffsetY),
            'left': this.offsetVariant([offset, 0], pinOffsetX, pinOffsetY),
            'right': this.offsetVariant([-offset, 0], pinOffsetX, pinOffsetY),
        };
    }

    private offsetVariant(offset: [number, number], variantX: number, variantY: number): [number, number] {
        return [offset[0] + (variantX || 0), offset[1] + (variantY || 0)];
    }
}

I am still working on it. It works. 

[HarelM]

Cool! Thanks for sharing the code!

[FutureBuddha]

I hope this message finds you well. I wanted to inquire whether there are any plans to integrate a spiderfier feature into Maplibre as a default functionality. While the current clustering capability is quite effective, it sometimes falls short when we need to display multiple markers that are geographically co-located. Implementing a spiderfier function could elegantly expand these clustered markers, enhancing user experience by making it easier to view individual markers without overcrowding the map.

Such a feature could significantly improve usability in dense marker scenarios, making Maplibre an even more appealing option for developers looking for robust mapping solutions. It could also encourage more interactive and informative map interactions, which are crucial for applications involving complex datasets or those requiring high levels of user engagement.

Thank you for considering this enhancement. I am really excited about the potential to see such a feature in upcoming versions and am keen to hear your thoughts or any plans regarding this suggestion.

[sbachinin]

Check map-gl-js-spiderfy plugin

[Johjoh-6]

Hi, Actually this plugin doesn't have support for Typescript.

After depending your need of course.
I made an update of the code snippet I provide.
I can share it if you want.

[FutureBuddha]

That would be wonder full Thank you

[FutureBuddha]

Check map-gl-js-spiderfy plugin

Still is this what you consider to implement it as a default function, also with Typescript support?

[HarelM]

Plugin are design to do exactly that, enhance the capabilities of the library for specific needs, such as this one.
You can add typescript support by opening a PR to the above repo, or to definitely typed repo.