Ce cours s'appuie en grande partie sur le tutoriel DIY Soundmap de l'artiste et programmeuse Sara Lana.
Dans ce cours, nous allons utiliser les outils suivants : Soundcloud, Google Sheet, Umap / Openstreetmaps, geojson.io.
Soundcloud et Google sont des outils commerciaux qui nécessitent la création d'un compte. Openstreetmaps et geojson.io quant à eux ne nécessitent pas forcément la création d'un compte.
Openstreetmaps est un projet open-source tandis que geojson.io est un projet commercial de Mapbox.
Cliquer sur l'ongler "uploader" en haut à droite pour uploader ses sons.
Une fois l'upload terminé, cliquer sur "partager" en dessous de la piste.
2. Soundcloud : exporter ses sons
Aller dans l'onglet "intégrer".
Il est possible de personnaliser la couleur de l'onglet de lecture.
Copier le code d'intégration ainsi créé.
3. Soundcloud : modifier le code d'intégration
Dans le code fourni, on retiendra uniquement la partie en rouge sur la capture d'écran ci-dessus.
On va effectuer quelques modifications esthétiques du player, en remplaçant show_comments=true&show_user=true par show_comments=false&show_user=false (en bleu ci-dessus).
C'est ce code que l'on va intégrer dans notre tableau à l'étape suivante.
4. Google Sheet : créer le tableau
Dans Google Sheet, créer un tableau avec 5 colonnes : Embed, Title, Description, Latitude, Longitude.
Dans la colonne Embed, on va copier notre code obtenu à l'étape précédente.
La latitude et la longitude du point d'écoute doivent être en décimale.
Pour obtenir les coordonnées d'un lieu dans Google Maps, il suffit de faire clic-droit et de copier la première ligne. Dans OpenStreetMaps, clic-droit et "afficher l'adresse".
5. Google Sheet : données en texte brut
Les données du tableau doivent être en texte brut.
Pour cela, sélectionner les cellules puis aller dans >Format >Number >Plain text
6. Google Sheet : publier le tableau sur le web
Il faut ensuite publier les données du tableau pour y accéder à distance sur Umaps.
Pour cela, aller dans >File >Share >Publish to web
7. Google Sheet : paramètres d'export
Choisir l'onglet à exporter (dans l'exemple ci-dessus, "Sheet1").
Donner un nom à la carte, définir le "tilelayer" (fond de carte) ainsi que le centre et le zoom, puis enregistrer la carte.
Noter précieusement le lien fourni à l'enregistrement, pour retrouver l'accès au mode édition de la carte.
9. Umap : nouveau calque
Cliquer sur l'îcone "gérer les calques" dans le menu de droite.
Créer un nouveau calque dans lequel nous allons importer les données de notre tableau.
10. Umap : associer les données
Dans les propriétés du calque (menu à droite), cliquer sur l'onglet "remote data".
Dans la case "url", coller le lien vers les données de notre tableau (lien généré à l'étape 7).
Préciser le format des données : csv
Définir "Dynamic" sur ON : ainsi, les données seront mises à jour automatiquement à chaque mise à jour de notre tableau sur Google Sheet.
11. Umap : modifier le style des marqueurs
Une fois sauvegardé, les marqueurs devraient apparaitre aux coordonnées renseignées dans le tableau.
Dans l'onglet "Shape properties" du calque, il est possible de personnaliser leur aspect.
On peut personnaliser leur couleur et leur opacité, leur forme, importer une icône personnalisée, etc.
12. Umap : modifier les paramètres d'interaction des marqueurs
Cliquer sur l'onglet "Interaction options" dans le menu du calque.
Par défaut, les informations du marqueur s'ouvrent dans un "popup" lorsque l'on clique dessus. Dans notre cas, on veut modifier cela pour qu'elles s'affichent dans le "Side panel".
On va également modifier le contenu des marqueurs dans la case "popup content template" (l'icône [?] nous renseigne sur le formatage).
Nous allons indiquer # {Title} / {Description} / {{{{Embed}|20}}} .
Cela va afficher les données renseignées dans les colonnes "Title" et "Description" de notre tableau Google Sheet, et le lecteur soundcloud.
Il est possible de modifier la taille du lecteur soundcloud : {{{{Embed}|20}}} donne un lecteur sur une ligne, {{{{Embed}|160}}} un plus gros lecteur qui affiche la photo de couverture de soundcloud.
13. Umap : résultat d'affichage des marqueurs
Une fois sauvegardé, voilà ce qu'on devrait obtenir lorsque l'on clique sur un marqueur de la carte.
14. Umap : affichage de la description de la carte au chargement
Pour notre exercice, nous souhaitons que la carte s'ouvre avec un panneau latéral qui va nous permettre de renseigner des informations générales.
Notre texte de présentation de la carte doit être écrit dans la case "description" (l'icône [?] nous renseigne sur le formatage, il est possible d'intégrer des images, sons, vidéos...).
Dans l'onglet "User interface options", à "do you want to display a panel on load, sélectionner "caption".
15. geojson.io : dessiner des ronds ou des rectangles
Nous allons maintenant dessiner des géométries sur notre carte pour y ajouter toutes les informations souhaitées.
Dans un nouveau calque, nous pouvons dessiner des lignes ou des polygones directement dans Umap.
Néanmoins, pour dessiner facilement des ronds et rectangles, il faudra passer par geojson.io.
Une fois que l'on a dessiné sur la carte de geojson.io les formes souhaitées, sauvegarder l'url pour y revenir ultérieurement, et copier le code JSON dans l'onglet de droite.
16. Umap : importer les données geoJSON
Revenir sur notre carte Umap, et cliquer sur l'icône "import data" à droite.
Coller le code JSON de l'étape précédente dans la case "Paste your data here".
Définir le format des données : geojson.
choisir le calque dans lequel importer ces données. Il est aussi possible de créer un nouveau calque.
17. Umap : modifier le style des données importées
Dans le gestionnaire de calques, sélectionner le calque dans lequel nous venons d'importer les données.
Dans l'onglet "Shape properties", il est possible de modifier l'apparence des géométries : couleur, opacité, etc.
Définir le format des données : geojson.
choisir le calque dans lequel importer ces données. Il est aussi possible de créer un nouveau calque.
18. Umap : modifier les informations associées au calque
Par défaut les géométries dessinées sont cliquables par l'utilisateur.
Si celles-ci constituent un fond de carte avec lequel on ne doit pas interagir, aller dans les propriétés du calques et définir "show this layer in the caption" sur OFF.
Si cette option est sur ON, des informations vont s'afficher en cliquant sur les géométries. Nous pouvons les renseigner dans l'onglet "interactions options" du calque.
Définir "popup shape" sur "side panel" pour que les informations s'ouvrent dans le panneau latéral.
Renseigner toutes les informations voulues dans la case "popup content template" (l'icône [?] nous renseigne sur le formatage, il est possible d'intégrer des images, sons, vidéos...).
19. Umap : export pour intégration web
Nous allons intégrer nos cartes dans une page web.
Pour cela, cliquer sur l'icône "Share and download" à gauche de l'écran.
Ouvrir le menu déroulant "Embed and link options".
Dans notre cas, nous allons modifier les paramètres suivants :
height : 500px
include full screen link ? : OFF
Do you want to display a panel on load? : Caption
Display the search control : Never
Display the fullscreen control : Always
Display the locate control : Never
Display the control to open OpenStreetMap editor : Never
Display the tile layers control : Never
Une fois les paramètres modifiés, nous pouvons copier le code de l'onglet "Embed the map".