Description projet :
Le but de ce projet était de réaliser une map sur laquelle nous avions la possibilité de positionner des pins sur la carte afin de faire apparaître une vidéo de présentation de la ville.
Eléments nécessaires :
Nous avons seulement utilisé la librairie “leaflet” qui permet d’avoir une carte fonctionnelle. C'est-à-dire qu’on peut zoomer, se déplacer ou l'on souhaite. Nous avons également utilisé du css pour harmoniser le site le site. Nous avons codé sur Visual Studio Code.
Problèmes rencontrées :
De manière générale la compréhension des documentations nous à pris du temps. Notamment pour la documentation de p5.JS où il était expliqué comment créer un bouton et le superposer aux vidéos. Les différentes fonctions de création ne fonctionnait pas. Après plusieurs tests et de l'aide extérieure nous ne sommes pas parvenu à réaliser ceci. Nous avons donc décidé d'intégrer des vidéos provenant directement de YouTube.
Utilisations :
L’utilisation de cette carte reste très simple. Son fonctionnement est le même que pour n’importe quelle carte intéractive. L'utilisateur arrive sur une page web, avec la carte. Il peut zoomer avec la molette, le pad ou le + et le - en haut à gauche de la page. On peut également se déplacer en maintenant le clic gauche de la souris. Il y a plusieurs points sur la carte, chaque point représente une ville. Quand on clic sur cette ville on à une pop-up qui s’ouvre avec une vidéo à l’intérieur qui présente la ville. L’utilisateur peut fermer la pop-up à tout moment en cliquant sur la croix ou en cliquant en dehors de la pop-up.