Navigation

L'application a beau être centrée sur la carte, l'utilisateur peut naviguer entre les différents territoires (assimilables à des communautés de communes) et, sur chaque territoire, à différentes visions de ce territoire. Si un équivalent accessible de chaque écran n'est pas fourni, nous tenions à ce que le visiteur puisse naviguer via les boutons précédent / suivant de son navigateur, ainsi que mettre en favoris n'importe quelle "page" virtuelle de cette application.

Nous avons choisi ici d'utiliser le framework Javascript Backbone, qui permet de gérer automatiquement cette navigation. Voici le code (réduit à sa portion significative pour le "routage" de notre application) :

(function (Backbone, _, $, undefined) {
  "use strict";
  Backbone.$ = $;

  var CaueApp = Backbone.Router.extend({
    routes: {
        "":                         "home",
        ":communaute(/:category)":  "map"
    },

    home: function() {
      // Afficher la carte de la page d'accueil (voir plus bas dans l'article).
      CaueViews.displayHomePage();
    },

    map: function(community, category) {
      // On utilise une catégorie "par défaut".
      var myCategory = category;
      if (myCategory === null) {
        myCategory = 'portrait';
        this.navigate(community + '/' + myCategory, {replace: true});
      }
      // On affiche la carte correspondante.
      CaueViews.displayMapPage(community, myCategory);
    }
  });

  var app = new CaueApp();
  Backbone.history.start();

})(Backbone,  _, jQuery);

Si vous consultez le code sur le dépôt du projet, vous constaterez que nous faisons un certain nombre de choses en plus, notamment ajouter certaines classes pour permettre les mises à jour de style de l'application, mais vous constaterez également une route "menu" qui sert simplement à réaliser une transition entre l'accueil brut et la version sans message de bienvenue.

Notre utilisation de Backbone est ici limitée à son composant "Router". Nous aurions pu nous en passer, mais lors de la conception de l'application, nous n'avions pas encore une vision complète des fonctionnalités dont nous aurions besoin, cela nous permettait de réaliser un prototype fonctionnel très rapidement, avec de bonnes possibilités d'évolutivité.

Le problème purement "technique" de la gestion d'URLs étant mis de côté, nous avons pu nous concentrer sur le cœur de métier de l'application, la partie webmapping.

Gestion dynamique d'évènements

Nous ne savons pas à l'avance quelle couche le client ajoutera à l'application, ni quelle couche déclenchera un évènement. Nous devons donc permettre au client dynamiquement d'ajouter du contenu. Comme pour les GeoJSON, nous définissons donc une nomenclature "data/features/[territoire]/[categorie]/[id].html". La page correspond à une page de contenu éditable directement par le client via Prose.io. Son identifiant est généré à partir des coordonnées géographiques de la zone de clic (en utilisant un composant externe de hash réalisé à partir de https://github.com/chrisdickinson/git-object-hash). Pour plus de détails sur ce composant de hash, consultez le fichier "assets/js/rusha.js" dans le dépot. Voici le code qui permet cette gestion dynamique d'évènement :

CaueViews.clickLayer = function(layer, community, category) {
  // Création de l'id associé à l'entité géographique.
  var layerHash = L.Util.hash(layer),
      featureId = layerHash.substring(0, 6);
  // Récupérer la page associée.
  $.ajax({
    url: "data/features/" + community + "/" + category + "/" + featureId + ".html",
  }).done(function(data) {
      // On affiche les données récupérées depuis la page.
      CaueViews.displayData(layer, data);
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // En cas d'erreur, une simple popup avec le lien prose.io pour créer la page.
    layer.bindPopup("Créez un contenu pour cet élement en allant sur cette page.", {autoPanPadding:[0,50]})
         .openPopup();
  });
};

A noter, en cas d'absence d'évènement : l'application affiche une popup avec un lien direct vers prose.io permettant la création du contenu à associer à la couche (seulement sur les couches "interactives" (voir l'article précédent)). Cet ajout permet une utilisation ergonomique pour le client qui ajoute ses couches, puis simplement clique dessus pour créer les contenus associés.

Parsing de pages HTML

Pour récupérer les données issues de Jekyll (les pages saisies par le client dans Prose.io), nous effectuons une requête Ajax vers la page (vue dans l'article précédent), et nous devons parser le résultat de cette requête :

CaueViews.displayData = function(layer, rawHtml) {
  var dom$ = $(rawHtml);
  // On parse le contenu HTML récupéré (j'ai mis pas mal de temps à trouver la syntaxe exacte...).
  var popup = '';
  $.each(dom$, function() {
    popup = popup + $(this)[0].outerHTML;
  });
  // On active la popup.
  layer.bindPopup(popup, {autoPanPadding:[0,50]}).openPopup();
};

Conclusion

Il serait trop long de détailler l'intégralité du code Javascript réalisé pour ce projet, cependant, j'ai essayé de mettre en avant des problématiques récurrentes en web mapping avec Leaflet, ainsi que quelques autres bouts de code significatifs, et la plupart du code produit pour ce projet est commenté dans cet article. Le reste concerne essentiellement des modifications basiques de style ou de gestions d'évènements, trop spécifiques au projet.