epfl-enac / alice-perl-eerl-urbtrees

URBTREES webmap

ALICE-PERL-EERL URBTREES

Configuration

Two external json files to load configuration in .env :

• VITE_PARAMETERS_URL: Webmap parameters following this JSON Schema
• VITE_STYLE_URL: MapLibre style

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

alice-perl-eerl-urbtrees's Issues

Ajustements variés

Rapporté par Aurèle

• Quand tu fermes le panel de gauche la carte ne prend pas tout l'écran (il reste un bande blanche à droite de l’écran) - je n’ai pas ce problème sur mon ordi

• Dans la case de sélection de l'espèce "Specie" prend un "s" en anglais même au singulier -> donc “Species"

• Quand on sélectionne la variable Ozone forming potential, dans la légende en couleur c'est marqué "more emissions"/"less emissions". C'est pas vraiment correct car les arbres n'émettent pas directement de l'ozone, cela peut donc porter à confusion pour quelqu'un qui ne connaît pas. Il faudrait donc changer cela avec par exemple "more ozone formed"/"less ozone formed”

• Dans la partie "Measures", les valeurs sont des moyennes par genre. Donc je pense qu'il faut mettre l'unité kg/tree/year pour être plus précis

• Toujours dans cette partie, il est noté "PM10 particules deposition", je mettrai juste "PM10 deposition”

• Dans le texte explicatif sur les PM10 je rajouterai un paragraphe expliquant l'impact des arbres sur ces particules. Par exemple: "Tree canopies act as natural filters that trap PM10 particles from the air. The leaves and branches of trees can capture and hold onto these particles, helping to remove them from the atmosphere.” - tu peux déjà ajouter ça et je compléterai

• Pareil pour le texte explicatif de O3 deposition, expliquer comment les arbres influencent l'équilibre de l'ozone en milieu urbain - je compléterai

• Dans la légende il manque encore une explication quant à la taille des points sur la carte (sur quelle variable se base cette taille)

• il a redimensionné les pop-ups sur la carte, c’est mieux mais les barres ne suivent plus les valaurs.

• on trouvait que la coche “montrer tous les arbres du genre” pourrait se trouver directement sous le titre “Genres et espèces”

• l’option de tout montrer pourrait également être une coche pour ne pas devoir le cherche dans le menu déroulant : “Afficher tous les arbres étudiés” qui viendrait avant la coche “montrer tous les arbres du genre”

• A l’ouverture de la plateforme, afficher tous les arbres et zoomer/cadrer sur le centre ville (rade+jonction)

• Une précision par rapport à la légende des cercles : le cercle gris vide peut aller avec les cercles colorés (en ajoutant dans le texte: si le cercle est vide, les variables n’ont pas été calculées pour cette espèce), dans ce cas il s’agit aussi de la surface totale de feuilles mais d’une espèce non considérée dans l’étude (les variables n’ont pas été calculées) alors que pour le cercle gris plein, il s’agit de tous les arbres existants d’un genre donné représenté par le diamètre de la couronne.

• A l’ouverture de la plateforme, il n’est pas possible de changer la langue du texte d’accueil ni de revenir à celui-ci une fois entré sur la plateforme… un bouton intro pourrait être ajouter en haut à droite à côté entre EN/FR et info pour pouvoir y revenir.

• Mettre à jour le texte d'intro 231212 URBTREES platform text.docx

UI adjustments

1_disposition générale:

• inverser l’ordre entre nom commun et nom scientifique, par ex. Chêne (Quercus)
• sur le panneau de gauche, toutes les infos devraient s’afficher sans devoir scroller, avec une première section “Genre et espèces” et une seconde “Mesures” (tout condenser, moins de blancs et textes plus petits)
• section “Légendes” à déplacer sur la carte, par ex. avec un bouton popup
• prévoir des boutons [infos] assez systématiques (destinés à chaque fois à 1-2 phrases d’explications)

2_pop-up sur carte:

• reporter les mêmes entrées que les menus déroulants pour genre et espèce
• ajouter des boutons [infos]
• indiquer les entrées des valeurs en texte: par ex. émissions de composés volatils organiques (kg/arbre/année)
• indiquer toutes les valeurs en kg arrondi à 2 décimales
• sur la carte, enlever complètement les cercles gris correspondant au diamètre de la couronne et ne laisser que les cercles colorés correspondant aux valeurs d’émission/absporption
• lorsqu’un genre est actif, afficher tous les arbres de l’inventaire correspondant au genre mais non pris en compte dans l’étude avec un petit point noir est un pop-up affichant uniquement genre/espèce/commune/type de feuillage

3_arrière-plan:

• la vue aérienne est très floue, est-ce qu’il y a une possibilité d’amélioration? sinon on peut s’en passer!

230904_urbtrees_platform_feedback.pdf

pixel-ratio

@ymarcon @sphamba
I talked with Aurèle this morning, and my intuition is that because we're using mac book with high-dpi screen. We may have a scaling problem with maplibre.

By googling a bit I found two issues/pull-rrequest. I don't have more time to investigate though.
maplibre/maplibre-gl-js#769
maplibre/maplibre-gl-js#772
cf the screen shot for information