Discussion :

[sylvain257]

Bonjour,

Pour une application cartographique, j'utilise MapLibreGL/MapBoxGL.

Il existe des contrôles tels que le zoom, l'échelle, arbre des couches etc dont la place est définie par rapport à la page (bottom-left, bottom-right, top-left, top-right). C'est natif.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var navigation = new MapboxGL.navigationcontrol();
map.addControl(navigation)

Par défaut, la position est fixée en haut à droite.

Dans mon application, j'ai une sidebar avec un panneau destiné à recevoir l'arbre des couches.

A moins de modifier dans le code source, ce qui pourrait créer des erreurs, je voulais savoir s'il était possible d'écrire dans une div définie, et contourner les valeurs natives ?

Merci pour vos retours.

Sylvain

[SpaceFrog]

https://docs.mapbox.com/mapbox-gl-js/api/markers/

=> container

[sylvain257]

Bjr,

Pour finir je suis reparti de cet exemple de MapBox.

https://docs.mapbox.com/mapbox-gl-js...ilter-markers/

pour arriver à une liste de couches que l'on peut switcher et à dragger.

J'ai la carte avec les layers, j'ai la liste avec les couches. Les checkboxes sont liées à l'objet map.

En revanche, les élements draggable ne sont pas liées à l'objet map cad que si je passe "land_ly" en dessous du "cpa_ly", c'est pas pour autant que les points bleus seront au dessus du polygone marron.

Est ce que qqun aurait une idée de comment changer l'ordre des couches ? (par exemple avec un z-index dynamique).
Il me semble qu'il faut modifier la fonction initSortableList, mais j'en suis pas sûr.

Qu'en pensez vous ?

Merci pour vos retours

Sylvain






Sinon voilà le code :
La première partie est une adaptation du code proposé par Mapbox, la seconde partie est plus ou moins le code proposé par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
    map.on('idle', () => {
        // If these two layers were not added to the map, abort
        if (!map.getLayer('land_ly') || !map.getLayer('cpa_ly')) {
            return;
        }
        const layers = document.getElementById('menu');
        // Enumerate ids of the layers.
        const toggleableLayerIds = ['land_ly', 'cpa_ly'];
 
        // Set up the corresponding toggle button for each layer.
 
        var line = document.createElement('ul');            
        line.classList.add('sortable-list');
        line.classList.add('mapbox-ctrl');
 
        layers.appendChild(line);
 
        for (const id of toggleableLayerIds) {
            // Skip layers that already have a button set up.
            if (document.getElementById(id)) {
                continue;
            }
 
            var list = document.createElement('li');
            list.classList.add('item');
            list.setAttribute('draggable', true);
            line.appendChild(list);
 
            const symbol = document.createElement('i');
            symbol.classList.add('fa-solid');
            symbol.classList.add('fa-grip-vertical');
            symbol.classList.add('symbol-item');
            list.appendChild(symbol);
 
            var input = document.createElement('input');
            input.type='checkbox';
            input.id = id;
            input.checked = true;
            list.appendChild(input);
 
            const label = document.createElement('label');
            label.setAttribute('for', id);
            label.textContent = id;
            list.appendChild(label);
 
            // Show or hide layer when the toggle is clicked.
            input.addEventListener('change', (e) => {
                e.preventDefault();
                e.stopPropagation();
 
                console.log(this);
 
 
                map.setLayoutProperty(
                    id, 'visibility', e.target.checked ? 'visible' : 'none'
                );
            })
 
        }
        // Moves between layers
            const items = document.querySelectorAll(".item");
            const sortableList = document.querySelector(".sortable-list");
 
        items.forEach(item => {
        item.addEventListener('dragstart', () => {
        setTimeout(() => item.classList.add("dragging"),0);
        });
        item.addEventListener("dragend", () => item.classList.remove("dragging"));
        });
 
        const initSortableList = (e) => {
            e.preventDefault();
 
            const draggingItem = document.querySelector(".dragging");
        // Getting all items except currently dragging and making array of them
            let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")];
        // Finding the sibling after which the dragging item should be placed
            let nextSibling = siblings.find(sibling => {
            return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
        });
        // Inserting the dragging item before the found sibling
            sortableList.insertBefore(draggingItem, nextSibling);
        }
 
        sortableList.addEventListener("dragover", initSortableList);
        sortableList.addEventListener("dragenter", e => e.preventDefault());
 
 
 
 
    });

[NoSmoking]

Bonjour,

Est ce que qqun aurait une idée de comment changer l'ordre des couches ? (par exemple avec un z-index dynamique).

lorsque tu modifies l'ordre dans ta liste il te faut remettre les layers dans l'ordre.

↪ Moves a layer to a different z-position.

[sylvain257]

En effet, j'ai regardé ça semble fonctionner.

Mais il y a deux trucs :

1) L'action ne semble pas réversible.

2) L'array de layers c'est à dire ToggleLayersId est un array qui est rempli par un appel à une API.
MoveLayer a donc des paramètres dynamiques, ce qui pourrait régler le problème évoqué au point 1.


MAJ : Pour finir, j'ai repris le code fourni sur https://github.com/TheGartrellGroup/...-JS-Layer-Tree que j'ai adapté
Merci pour vos participations

Sylvain

[sylvain257]

La solution est en fait très simple, cependant peu documentée. Ce n'est pas limité au module cité plus haut mais cela s'applique à tous les modules qui se déclare en map.addControl(control).

Pour mettre un addControl dans une div perso :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="maDiv"></div>
 
<script>
 
const control = new Control({ etc....
 
 
document.getElementById("maDiv").appendChild(control.onAdd(map))
 
 
</script>

A+