📱 React Native + Google Map + Cluster ?

Parce que beaucoup se posent la question !

De plus en plus tendance, React Native devient un framework incontournable ! Article un peu technique, mais vous pouvez rester si vous êtes curieux de voir ce qu’on peut faire avec RN 😀

Cet article va être très court, pour une fois ! Il est principalement destiné à toi développeur ou à toi qui veut aider ton pote !

A la fin, je vous donne un dépôt GitHub pour avoir toutes les sources pour facilement copier/coller sur ton projet. Pas d’urgence donc !

Si cet article a été utile à quelqu’un, n’hésites pas à me lâcher un petit ❤

Comme ça, je saurai que j’ai contribué un peu 😁

On ne va pas présenter ici React Native, mais plutôt une façon simple de faire des clusters puisque je vois le sujet remonter de plus en plus sur StackOverflow et d’autres forums d’entraide.

1 — Creation du projet

Tu es nouveau sur React Native ou pas, on va commencer par déployer une solution RN. Pour cela, tu dois installer NodeJS sur ta machine ainsi que le package. Tout est ici : https://facebook.github.io/react-native/docs/getting-started.html

Tu dois impérativement installer un module qui vient de MapBox et qui s’appelle Supercluster.

npm install git://github.com/mapbox/supercluster — save

Pour le reste, j’utilise Bluebird juste pour une promise. Tu peux utiliser ce que tu veux. C’est juste un exemple !

2 — Mise en place de la map

Sur la nouvelle version de create-react-native-app, il y a déjà de préintégré tout un tas de modules natif. Notamment un dont nous avons besoin : la mapview !

Ne te fie pas à la documentation (elle n’est pas à jour), tu dois le déclarer comme ceci :

3 — Mise en place du cluster

Rien de plus simple pour utiliser ce cluster. Il suffit de l’importer, de le créer dans la fonction qui reçoit les nouvelles “props” et de conserver dans l’état du composant.

Comme tu peux le voir, je préfère avoir plusieurs catégories de cluster afin de dissocier les types de markers mais bon… c’est une autre histoire 😝

4 — Mise en place des markers

Voici la partie super importante : les markers et les données.

Si tu veux avoir un système API Driven le plus simple possible, tu dois ABSOLUMENT respecter le formalisme du geojson. 😡

Pour avoir une complète documentation, va sur le site officiel !

Pour être sympa, je t’ai mis un exemple du formalisme des données dans les sources pour que tu puisses jouer avec. 😘

Tu dois déclarer utiliser un composant Marker pour te permettre d’avoir une abstraction sur les propriétés du geojson. Cela te permet d’avoir facilement un petit switch qui va arranger le rendu comme tu le voudrais ! Et en plus, tu n’as même pas besoin de te prendre la tête sur le formalisme des données puisque tu respectes déjà un standard bien connu ! 😎

Encore un conseil, utilise au MINIMUM des vues dans le marqueur, sinon cela va te bouffer les performances ! Essaie de prémâcher le travail en faisant un png que tu afficheras. Si tu dois avoir plusieurs couleurs différentes alors, joue sur la teinte de l’image ! Moins il y a de vue, moins il y a d’images différentes et plus c’est performant ! 🤓

5 — Les sources

Comme tu commences un peu à me connaître si tu lis mes autres articles (tu les lis, n’est-ce pas ?), je te file les sources pour que tu puisses tester là maintenant !😜

davidroman0O/react-native-cluster-example

Comme ça, tu pourras déjà avoir un truc entre les mains et facilement copier/coller mon code pour le mettre dans ton application.

N’oublie pas que lorsque tu as téléchargé le code source, tu dois utiliser les commandes suivantes :

Sinon, bah tu n’auras pas installé les modules dont dépend le projet ! De plus, si tu ne démarres pas le serveur RN… Bah ça ne marche pas ! (et n’oublie pas d’être sur le même réseau wifi)