Ajout des tuiles vectorielles et des events lors du clique sur un collège #15
Conversation
cedric-famibelle-pronzola
commented
Mar 3, 2023
cedric-famibelle-pronzola
commented
- Ajout des tuiles vectorielles
- Ajout des layers
- Ajout des events lors du clique sur un collège
cedric-famibelle-pronzola
force-pushed
the
feature-add-tiles
branch
from
8022ae5 to
888f100
Compare
cedric-famibelle-pronzola
force-pushed
the
feature-add-tiles
branch
from
888f100 to
b8acade
Compare
cedric-famibelle-pronzola
force-pushed
the
feature-add-tiles
branch
from
8244932 to
4e3f5e7
Compare
|
Attention les autres collèges sont masqués automatiquement par MapLibre s'ils chevauchent la limite d'une zone. Il faut les mettre au dessus en terme de priorité. |
| @@ -1,2 +1,16 @@ | |||
| /* eslint n/prefer-global/process: off */ | |||
| const Map = dynamic( | ||
| () => import('./map.js'), | ||
| {ssr: false} | ||
| ) |
There was a problem hiding this comment.
Il n'est pas utile d'importer dynamiquement ce composant. La création de la carte se fait dans un componentDidMount, le code sera donc bien exécuté côté client. Ici, c'est le fait que les sources soient calculées à l'aide de window qui elles sont calculées côté serveur qui pose un problème.
|
|
||
| return ( | ||
| <> | ||
| <Legend /> |
There was a problem hiding this comment.
La légende n'est pas vraiment adaptée à l'affichage mobile. Je propose de ne l'afficher que sur desktop.
| const itineraireLayer = { | ||
| id: 'itineraire-line', | ||
| type: 'line', | ||
| source: 'itineraire', | ||
| layout: { | ||
| 'line-join': 'round', | ||
| 'line-cap': 'round' | ||
| }, | ||
| paint: { | ||
| 'line-color': colors.darkGrey, | ||
| 'line-width': 4 | ||
| } | ||
| } |
There was a problem hiding this comment.
Pourquoi garder ce layer indépendant des autres ?
| const sourcesLoaded = useRef(false) | ||
| const layersLoaded = useRef(false) |
There was a problem hiding this comment.
Tu peux utiliser map.isSourceLoaded({sourceId}). C'est plus sûr qu'une référence ici, car la source peut être rechargée et ta ref ne prévoit pas de suivre le cycle de vie.
| if (selectedCollegeIdRef.current) { | ||
| map.current.setLayoutProperty('secteurs-lines', 'visibility', 'visible') | ||
| map.current.setLayoutProperty('secteurs-fill', 'visibility', 'visible') | ||
| } else { | ||
| map.current.setLayoutProperty('secteurs-lines', 'visibility', 'none') | ||
| map.current.setLayoutProperty('secteurs-fill', 'visibility', 'none') | ||
| } |
There was a problem hiding this comment.
| if (selectedCollegeIdRef.current) { | |
| map.current.setLayoutProperty('secteurs-lines', 'visibility', 'visible') | |
| map.current.setLayoutProperty('secteurs-fill', 'visibility', 'visible') | |
| } else { | |
| map.current.setLayoutProperty('secteurs-lines', 'visibility', 'none') | |
| map.current.setLayoutProperty('secteurs-fill', 'visibility', 'none') | |
| } | |
| const visibilityState = selectedCollegeIdRef.current ? 'visible' : 'none' | |
| map.current.setLayoutProperty('secteurs-lines', 'visibility', visibilityState) | |
| map.current.setLayoutProperty('secteurs-fill', 'visibility', visibilityState) |
| useEffect(() => { | ||
| if (!map.current) { | ||
| return | ||
| } | ||
|
|
||
| map.current.on('click', 'colleges', e => handleCollegeClick(e, selectedCollegeFeatureRef)) | ||
| map.current.on('mousemove', 'colleges', onCollegeHover) | ||
| map.current.on('mouseleave', 'colleges', onCollegeLeave) | ||
|
|
||
| return () => { | ||
| map.current.off('click', 'colleges', e => handleCollegeClick(e, selectedCollegeFeatureRef)) | ||
| map.current.off('mousemove', 'colleges', onCollegeHover) | ||
| map.current.off('mouseleave', 'colleges', onCollegeLeave) | ||
| } | ||
| }, [map, handleCollegeClick, selectedCollegeFeatureRef]) |
There was a problem hiding this comment.
Les ajouts d'évènement devraient se faire dans le même useEffect que la création de la carte.
Le risque dans ce genre de cas, c'est d'ajouter plusieurs fois les évènements sans les supprimer, car le useEffect va ajouter des évènements à chaque fois qu'une modification est détecté dans ses hooks.
Le piège ici, c'est que tu as "wrappé" tes méthodes inutilement des dans useCallback donc en les utilisant ici, le useEffect les demandes dans les hooks.
Je te conseille donc de retirer les useCallback inutile et déclarer même tes fonctions en dehors du composant quand cela a du sens et de gérer tes évènements de carte dans le même useEffect que la carte.
