Photos géolocalisées

Affichez / Gérez vos photos géolocalisées avec Kinto.

Il y a quelques temps, une amie me demandait si il était possible d'avoir un système permettant de gérer une "carte interactive avec des photos".

Elle voulait avoir le tout sous la forme d'un site Web. Il fallait donc avoir un moyen de a) enregistrer de nouvelles données et de les éditer depuis une interface d'administration et b) afficher l'ensemble des photos sur une carte.

Comme vous imaginez j'ai sauté sur l'occasion pour utiliser Kinto au niveau du stockage des données.

Stockage des fichiers

Kinto, via son plugin "attachments" permet d'associer des fichiers à des enregistrement en base.

Il suffit de faire une requête sur le bon endpoint en passant le fichier associé:

  function uploadFile(file, data) {
    var recordID = uuid4();
    var formData = new FormData();
    // Store the file in "attachments"
    formData.append('attachment', file, file.name || "unamed");
    // Store the data in "data"
    formData.append('data', JSON.stringify(data));

    // And then do a request using the fetch API
    var url = `${serverUrl}/buckets/${bucket}/collections/${collection}/records/${recordID}/attachment`;
    fetch(url, {
      method: "POST",
      body: formData,
      headers: headers}
    ).then(function (result) {
        if (result.status > 400) {
          throw new Error('Failed');
        }
        // Everything worked !
     })
     .catch(function (error) {
       throw error;
     });
  }

J'ai donc développé un petit backend qui permet d'administrer ses photos (et j'en ai profité pour découvrir Angular.js)

Ça ressemble à ça:

Interface d'administration (1) Interface d'administration (2)

Affichage des photos sur une carte

Pour la partie la plus visible, celle qui affiche les photos en question sur la carte, j'ai dégoté une bibliothèque qui pré-mache tout le travail. Basée sur leaflet.js elle affiche directement les photos qui lui sont passés dans une liste.

Capture d'écran de l'interface principale

Il "suffit" donc de faire une petite requête sur l'API Kinto qui va bien (/records) pour avoir l'ensemble des photos enregistrées dans la base, puis les passer à Leaflet.Photo et le tour est joué.

Je suis assez content d'avoir pu hacker quelque chose assez rapidement, ça montre que Kinto gagne en maturité ?

Et le mieux dans cette histoire, c'est que le tout s'intègre assez magiquement bien avec l'interface d'administration de Kinto :)

Si vous voulez en savoir plus, le code est disponible et bien sûr vous pouvez essayer par vous même !