Quand on code une carte Leaflet ou un site web en général, on doit chaque fois que l’on apporte des changements sauvegarder dans son éditeur (ex. Atom), ensuite rafraîchir la page html dans le navigateur. Mine de rien, c’est chronophage. Or, il existe une façon plus rapide de coder et c’est Codepen. Cela présente aussi l’avantage de pouvoir facilement partager son code. Récemment, j’ai demandé de l’aide dans un forum et j’ai mis le lien vers mon Pen et l’on m’a répondu super rapidement parce que la personne voyait d’un coup l’ensemble de mon code. Codepen est également excellent pour enseigner la programmation, puisque tout est à la même place et les résultats sont évidents immédiatement. Après avoir créé un compte (gratuit) dans Codepen, on crée dans le menu un nouveau Pen.

La fenêtre suivante est composée de 4 volets. Le premier (en bas, mais on peut le mettre ailleurs avec Change View) visualise le résultat et les 3 autres sont composés de ce qui normalement dans votre éditeur serait 3 fichiers séparés, soit votre fichier html, votre feuille de style CSS et votre fichier Javascript (comme on l’a vu, on peut mettre le JS directement dans le <body> du html entre <script> et </script>, mais c’est une meilleure pratique d’en faire un fichier à part, que l’on invoque juste avant de fermer le </body>).

Rien de trop compliqué jusqu’à maintenant, mais il est important de savoir comment invoquer leaflet.js et leaflet.css si vous travaillez sur un projet Leaflet, par exemple. Normalement, dans votre éditeur, ce serait dans le <head>, genre:

<script src="js/leaflet.js"></script>

Mais dans Codepen, il faut cliquer sur la roue d’engrenage du CSS et/ou du JS

puis entrer l’adresse du CDN (Content delivery network)

On trouve les CDN de Leaflet sur le site officiel.

Si vous avez des images dans votre code, il faudra les invoquer en utilisant l’url du serveur (ex. AWS) où elles sont stockées. C’est un peu plus de travail ici, mais quand vous travaillez avec des animations (comme nous le ferons dans ce projet), vous sauvez quand même avec Codepen beaucoup de temps, plutôt que de constamment rafraîchir votre page. Un dernier avantage de Codepen, c’est que beaucoup de développeurs qui l’utilisent y partagent leur code et on y trouve parfois des animations vraiment cool. Codepen a d’ailleurs une vitrine des meilleurs réalisations. Dans les prochains articles, nous allons nous servir de Codepen pour créer, visualiser et comprendre des animations Javascript.

So Excited GIFs - Get the best GIF on GIPHY