© Copyright. monoloco 2026

Arbres de Genève

Une cartographie interactive

Explorer les arbres et le climat à Genève

Pour ce projet développé pour monoloco, nous avons conçu un outil de découverte des arbres de Genève et de leur environnement climatique. Le défi consiste à transformer plusieurs sources spécialisées en un parcours compréhensible : partir d’un lieu, identifier les arbres inventoriés, découvrir une espèce puis changer d’échelle pour observer la densité arborée et les données de chaleur. L’interface s’appuie sur une chaîne de traitements qui importe, normalise et enrichit les informations. Le même ensemble de données alimente les différents modes de consultation, afin d’éviter la constitution manuelle de répertoires séparés pour chaque usage ou support.

Repères du projet

Client
monoloco

Projet
application cartographique web de découverte des arbres et des données climatiques à Genève

Enjeux
rendre les données territoriales compréhensibles, relier plusieurs sources et automatiser la préparation des informations botaniques et géographiques

Publics
habitants, promeneurs et personnes souhaitant découvrir les arbres et explorer les données environnementales de Genève

Ce que nous avons réalisé

  • Carte interactive avec exploration de la zone visible et recherche autour de sa position.
  • Recherche par nom commun ou scientifique avec suggestions d’espèces.
  • Fiches associant les caractéristiques des arbres aux contenus botaniques disponibles.
  • Mise en évidence des arbres signalés comme remarquables dans l’inventaire.
  • Modes Arbres, Mixte et Chaleur avec sélection des données climatiques de jour ou de nuit.
  • Grille de densité adaptative avec nombre d’arbres et densité par hectare.
  • Import de l’inventaire SITG, normalisation et conversion des coordonnées.
  • Enrichissement des espèces depuis Wikidata et Wikipédia avec mise en cache.
  • API dédiée aux données de la carte, de la recherche et des fiches web.
  • Chargements ciblés, limites de résultats et réutilisation des données pour maîtriser le volume affiché.

Technologies

  • TypeScript, React et React Native Web dans un projet Expo.
  • Leaflet et React Leaflet pour la carte web.
  • OpenStreetMap pour le fond cartographique.
  • TanStack Query pour le chargement et le cache des requêtes.
  • API Node.js et Fastify.
  • MariaDB  avec coordonnées géographiques et index spatial.
  • Inventaire SITG, services cartographiques ArcGIS, Wikidata et Wikipédia.
  • Monorepo pnpm et contrats TypeScript partagés.

01 — La carte

Le territoire en données

La carte propose plusieurs points d’entrée : se situer, parcourir un quartier ou chercher une espèce. Un clic donne accès aux informations d’un arbre ; les modes de visualisation permettent ensuite de replacer cette découverte dans une lecture plus large du territoire. Les commandes, fiches et légendes accompagnent le passage entre ces différentes échelles.

01.01

Les arbres autour de soi

L’utilisateur peut consulter les arbres à proximité de sa position ou déplacer la carte pour explorer un autre secteur. Le parcours de proximité demande l’autorisation de localisation et recherche par défaut dans un rayon de 500 mètres. Le parcours par zone charge les arbres correspondant au cadrage de la carte. Un bouton permet de revenir à une vue de Genève. Si la localisation est refusée, un point de départ sur Genève reste disponible pour poursuivre la découverte.

  • Localisation à la demande d’autorisation du navigateur.
  • Recherche des arbres proches avec distance depuis la position retenue.
  • Actualisation des données selon la zone explorée.
  • Recentrage sur Genève et exploration sans autorisation de localisation.

01.02

Une espèce à retrouver

La recherche accepte les noms communs et scientifiques. Des suggestions apparaissent pendant la saisie pour aider à sélectionner un taxon, puis les arbres correspondants sont présentés sur la carte. Sous celle-ci, des cartes d’espèces donnent accès aux résultats et à leurs effectifs. Lorsque plusieurs variantes botaniques partagent un même nom commun, leur présentation est regroupée et leurs effectifs additionnés. Cette organisation facilite la lecture sans obliger le visiteur à parcourir une succession de noms proches.

  • Recherche par nom usuel ou nom scientifique.
  • Suggestions après les premiers caractères saisis.
  • Sélection d’un taxon ou recherche textuelle plus large.
  • Regroupement des variantes ayant le même nom commun dans le listing.
  • Accès aux arbres correspondants depuis une carte d’espèce.

01.03

La botanique à portée de clic

Chaque arbre affiché peut ouvrir une fiche associant deux niveaux d’information : les caractéristiques de l’individu inventorié et les connaissances sur son espèce. Le nom, la hauteur, la circonférence ou la commune sont présentés lorsque ces données sont disponibles. Un résumé et une image issus de Wikipédia peuvent compléter la fiche, avec un lien vers l’article. Les arbres remarquables sont distingués sur la carte à partir du signalement fourni par l’inventaire.

  • Sélection d’un arbre depuis son marqueur cartographique.
  • Affichage du nom commun, du nom scientifique et des mesures disponibles.
  • Repérage visuel des arbres remarquables.
  • Description et illustration de l’espèce lorsqu’un contenu correspondant existe.
  • Lien vers Wikipédia et indication de la provenance des informations.

01.04

Arbres et chaleur en regard

Trois modes permettent de régler le niveau d’information : Arbres affiche les individus inventoriés ; Mixte associe les arbres, la couche climatique et la grille de densité ; Chaleur conserve les données climatiques et la densité sans les marqueurs individuels. L’utilisateur peut aussi passer de la vue diurne à la vue nocturne. Ces commandes facilitent la comparaison visuelle d’un même secteur et permettent de réduire les éléments affichés selon la question explorée. Les couches de chaleur représentent une modélisation climatique, pas une mesure météorologique en temps réel.

  • Bascule entre les modes Arbres, Mixte et Chaleur.
  • Vue de la température de l’air modélisée à 14 h.
  • Vue de l’intensité de l’îlot de chaleur nocturne à 4 h.
  • Superposition des informations sur un fond cartographique commun.

01.05

La densité à toutes les échelles

La zone explorée est découpée en cellules dont la taille s’adapte à l’étendue visible. Le système compte les arbres inventoriés dans chaque cellule et rapporte cet effectif à sa surface pour calculer une densité par hectare. La bordure verte des cellules traduit cette densité, tandis que le fond reste disponible pour la couche climatique. La sélection d’une cellule affiche l’effectif, la densité et les dimensions approximatives du carré. La comparaison repose ainsi sur des valeurs explicites, en complément des marqueurs individuels.

  • Grille adaptative, du quartier à une vue plus large du territoire.
  • Comptage des arbres inventoriés par cellule.
  • Calcul de la densité en arbres par hectare.
  • Affichage de la taille des cellules et de leurs valeurs au clic.
  • Lecture simultanée de la densité et du fond climatique.

01.06

Des repères pour comprendre

Un panneau repliable rassemble les indications nécessaires à la lecture : couleurs des arbres, distinction des sujets remarquables, échelles de chaleur et de densité, taille de la grille et gestes de navigation. Les fiches et les fenêtres cartographiques rappellent également l’origine des données. Ces informations restent accessibles à proximité de la carte, pour que l’utilisateur puisse comprendre les représentations sans quitter son exploration.

  • Panneau « Légende, informations et données » ouvrable à la demande.
  • Explication des marqueurs et des échelles de couleur.
  • Indication de la taille de grille correspondant à la vue courante.
  • Aide à la navigation et attribution des sources dans les fiches.

02 — Les données

Des données ouvertes à la carte

La carte repose sur une chaîne de traitements qui relie les sources à leurs usages. L’import transforme l’inventaire en fiches géolocalisées ; la base distingue les arbres et leurs espèces ; l’API produit les résultats de recherche et les densités ; l’enrichissement botanique complète les contenus disponibles. Cette organisation évite de saisir les arbres un par un et de rechercher un article pour chaque individu.

02.01

Un inventaire sans ressaisie

Un importeur récupère l’archive officielle du SITG ou utilise un fichier déjà téléchargé. Il lit les enregistrements, prépare les espèces puis insère les arbres par lots. Les identifiants de l’inventaire servent à actualiser les arbres déjà présents lors d’un nouvel import. Les noms, caractéristiques et coordonnées rejoignent ainsi la base depuis la source, sans constitution manuelle du catalogue. Le traitement fournit un bilan du nombre d’enregistrements pris en charge et rejetés.

  • Lecture d’une archive SITG distante ou disponible localement.
  • Création et actualisation des espèces et des arbres.
  • Traitement par lots de 500 enregistrements.
  • Réutilisation des identifiants source pour les mises à jour.
  • Bilan des enregistrements importés et rejetés.

02.02

Des coordonnées vérifiées

Les informations de l’export sont transformées en champs utilisables par l’application : noms, mesures, dates, commune et indicateurs de l’inventaire. Les lignes dépourvues d’identifiant ou de coordonnées exploitables sont écartées. Les coordonnées suisses LV95 sont converties en latitude et longitude WGS84 pour alimenter les cartes et les recherches géographiques. Un mode de validation permet d’examiner un export et de compter les enregistrements exploitables sans écrire dans la base métier.

  • Contrôle de l’identifiant et des coordonnées indispensables.
  • Normalisation des textes, nombres et dates.
  • Conversion des coordonnées pour les usages cartographiques.
  • Conservation des caractéristiques disponibles sans inventer les valeurs manquantes.
  • Validation d’un export avant son import en base.

02.03

Une base, plusieurs lectures

La base distingue chaque arbre de l’espèce à laquelle il appartient. Les coordonnées sont conservées dans un format géographique avec un index spatial. L’API exploite cette organisation pour rechercher autour d’un point, sélectionner une zone, retrouver une espèce et agréger les effectifs dans la grille. Les descriptions botaniques sont associées à l’espèce et peuvent donc servir à plusieurs arbres. Cette séparation évite de dupliquer les mêmes contenus sur chaque fiche et relie naturellement le détail individuel aux vues d’ensemble.

  • Fiches d’arbres reliées à un référentiel d’espèces.
  • Recherche par proximité, zone visible ou nom botanique.
  • Calcul des effectifs d’espèces et des densités à partir de la même base.
  • API partagée entre les différents parcours de l’interface web.
  • Contrats de données partagés entre l’interface et le serveur.

02.04

Des fiches enrichies automatiquement

Lorsqu’une fiche est consultée, l’API peut rechercher le nom scientifique dans Wikidata puis récupérer le résumé et l’illustration de l’article Wikipédia francophone correspondant. Elle vérifie que le candidat est déclaré comme taxon botanique pour réduire les confusions avec des homonymes. Le résultat est enregistré au niveau de l’espèce et réutilisé lors des consultations suivantes. Une vérification de fraîcheur prévoit son renouvellement à la consultation lorsque le contenu devient ancien ; les échecs récents sont temporisés pour éviter des requêtes répétées inutiles.

  • Recherche de contenus à partir du nom scientifique.
  • Filtrage des candidats Wikidata selon leur nature botanique.
  • Récupération du résumé, de l’image et du lien vers l’article.
  • Mise en cache partagée entre les arbres de la même espèce.
  • Renouvellement conditionnel après six mois et temporisation des tentatives en échec.

03

Des chargements maîtrisés

La navigation cartographique peut solliciter beaucoup de données. Le projet charge les arbres selon le cadrage, conserve temporairement les résultats avec TanStack Query et permet d’annuler certaines requêtes devenues inutiles après un déplacement. Sur le web, les marqueurs utilisent un rendu Canvas et les mises à jour de la zone sont déclenchées à la fin du mouvement. Les réponses de l’API sont plafonnées. Ces choix visent à limiter les transferts et le coût de rendu, tout en conservant les comptages nécessaires aux vues de synthèse.

  • Chargement ciblé sur la zone ou la recherche choisie.
  • Cache des résultats et conservation de l’affichage pendant certains rechargements.
  • Rendu Canvas des marqueurs sur le web.
  • Limites de résultats pour les cartes et recherches volumineuses.
  • Calcul de la densité indépendant de la liste plafonnée des marqueurs.

D’autres projets, d’autres défis

Voir d’autres
études de cas

Des besoins concrets, des réponses sur mesure. Découvrez ce que nous avons développé pour d’autres organisations.

Toutes les études de cas