On n’a pas trouvé de meilleur nom pour ce planisphère du campus d’Arlon (Arlon Campus Environnement – ACE). Bref, c’est simplement une petite application d’une carte du monde où sont représentés les pays d’origine des étudiants du campus d’Arlon pour l’année académique 2013-2014. En cliquant sur les pays entourés en gras, on visionne une vidéo de présentation du pays. Les vidéos ont été réalisées par les étudiants à l’occasion de la soirée multiculturelle 2013.
La carte en grand ici.
Techniquement, c’est fait avec OpenLayers et un petit bout de javascript pour lancer les vidéos. La division de la page internet en deux fenêtres (carte & vidéos) se fait dans du pur HTML/CSS. La partie “vidéos” en bas de l’écran est dans une balise DIV cachée à l’ouverture de la page par les propriétés “visibility” et “display”, les deux étant nécessaires pour de shistoires de compatibilité de navigateur.
<div id="content" style="visibility: hidden; display: none;">
Le fond cartographique vient de MapBox, et donc des données d’OpenStreetMap. Outre la beauté graphique toute simple de ce fond, j’aime particulièrement bien que les noms des pays sont affichés dans la langue officielle ( et l’alphabet!) de ces pays et non pas en anglais comme sur GoogleMaps ou BingMaps.
L’appel des vidéos se fait lors du clic sur un pays, ce qui actionne la fonction “onFeatureSelect” qui affiche simultanément un popup et la vidéo. Vous pouvez voir le détail dans le code source de la page (taper CTRL+u sur la page de la carte).
Enfin, je me suis rendu compte qu’afficher des vidéos à partir de fichiers vidéos dans un site web est une vraie plaie pour assurer une compatibilité de l’affichage entre tous les navigateurs, surtout à cause de la nécessité de plugins vidéos dans ces navigateurs. Une solution de facilité est donc d’héberger les vidéos sur une plateforme en ligne (par ex. YouTube) et de les afficher au travers d’une iframe, ce que j’ai fait.