Change map's layer's opacity

[CarlaRGanier]

Description

What is the valuable outcome that cannot be achieved because of this bug?

On the map (using Google Maps), there is a layer showing the tombs. However, the layer doesn't allow us to see correctly the map under to locate in relation to the surface. The reading of the location of the graves is then not effective.

For which stakeholder (people, role, project, domain) is it important?

Every user using the map to see the location of the vases.

Which user action should be enabled ? For who ?

Every user should be able to set the opacity of the map layer

Additional details (solutions you think about, or workarounds you tried)

We could add a slider, or radio buttons, enabling the user to set the opacity easily

Reproduction scenario

Steps to reproduce the behavior:

1. Go to 'https://vases.porphyry.org/'
2. Zoom on the north-west part of the map, with a cluster of localized vases.
3. See the cluttered map, with the tomb layer covered the surface.

Workaround

Add an "opacity" attribute to let us seeing everything we need on the map.

Deliverables status

Phase 1

• [x] Scenarios (Gherkin)
• [x] Mock up
• [x] Implementation strategy

Phase 2

• [x] Implementation

Phase 3

• [x] Screencast

[DariaSegalard]

Peut-être en ajoutant une règle CSS sur le calque des tombes ?

#root > div > div.container-fluid > div > div.col-md-8.p-4 > div > div:nth-child(3) > div > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div > div > img {
opacity : 70%;
}

[DariaSegalard]

-> https://github.com/orgs/Hypertopic/teams/vases-grecs-du-kerameikos/discussions/12 Peut-être renommer le ticket "The layer on the map should have a settable opacity", vu que la partie prenante voudrait un curseur pour définir l'opacité ? ;)

[MaximeDrml]

Maquette :

Edit : Maquette mise à jour qui montre la transparence du calque :

[rooooose]

Scénario :

Soit l’utilisateur est connecté sur le portfolio
Et l’utilisateur est sur la page d’accueil où se situe la carte
Quand l’utilisateur ajuste l'opacité du calque sur la carte à 50%
Alors L’opacité du calque sur la carte est définie à 50%

[DariaSegalard]

Stratégie d'implémentation

Quelle partie du code sera impactée (classes, méthodes) ?

• Opacité du calque : composant GeographicMap : Ajout d'un paramètre afin de définir l'opacité de l'objet GroundOverlay de la méthode render() du composant GeographicMap (qui permet de placer un calque (layer) sur la carte retournée par l'API de Google Maps). Ajout d'une méthode pour changer l'opacité du composant lorsque l'utilisateur utilise la glissière. -> Voir cet exemple.
• Glissière : composant Corpora : Modification de la méthode return() du composant Corpora afin d'ajouter la glissière sur la page du portfolio.

Y aura-t-il des difficultés d'un point de vue algorithmique ? Avez-vous des pistes pour les résoudre ?

Dépendance à l'API de Google Maps. -> Piste de résolution : se baser sur la doc de l'API et sur la doc React.

Les données dont vous avez besoin sont-elles déjà chargées par la page ?

Non (pas de carte sur la version de test de Porphyry), mais le code comprend bien les composants de cette fonctionnalité donc nous devrions pouvoir travailler dessus. Nous aurons cependant besoin de l'affichage d'une carte avec un layer pour nos tests.

Existe-t-il des bibliothèques qui pourraient simplifier l'implémentation ? Quelles sont celles que vous choisiriez et pourquoi ?

Nous pourrons continuer à utiliser l'API de Google Maps. Nous pourrons éventuellement utiliser BootStrap pour le design de la glissière.

Doit-on intégrer des services extérieurs (ex : cartographie) ? De quelles fonctionnalités en particulier aura-t-on besoin ? Est-ce que le service choisi les propose ou doit-on passer chez un concurrent ? Comment s'utilisent ces fonctionnalités ? Avec quels paramètres ?

Nous continuerons d'utiliser l'API de Google Maps. Nous aurons besoin des fonctionnalités de gestions des options de la classe GroundOverlay afin d'en régler l'opacité.

Co-éditeurs : Maxime D, Shir F, Daria S.

[DariaSegalard]

Voici la vidéo de démonstration et d'illustration de la fonctionnalité de modification de l'opacité des calques de la carte.

L'utilisateur se rend sur la page d'accueil du portfolio, où la carte avec les calques est affichée. Il change l'opacité des calques sur la glissière localisée à côté des options de tris. L'opacité des calques sur la carte est alors modifié. Si le portfolio ne comprend pas de calques, la glissière n'est pas affichée.

Jeu de données : Portfolio : Vases. Calques : Layers du portfolio Vases.

Co-éditeurs : Shir F., Maxime D., Daria S.

https://user-images.githubusercontent.com/71147115/173016642-072e0d22-e693-4dcd-bb42-363f093911d5.mp4