Représentation des observations en fonction de seuil de zoom

[jonath35]

Bonjour,

Je cherche à adapter la symbologie des observations en fonction du seuil de zoom. J'ai regardé un peu le fichier : /frontend/src/app/programs/base/map/map_component.ts

Mais je n'ai pas l'impression que ce soit prévu dans ce fichier.

J'ai également vu qu'il y a de nombreux fichiers leaflet dans : frontend/node_modules/leaflet.markercluster/src/

Mais je me dis que je peux peut être gagner du temps ou éviter d'en perdre grâce à votre aide.

Avez-vous déjà réalisé ce paramétrage ? Si oui merci d'avance pour votre aide.

Je profite de cette question pour ajouter une question subsidiaire : serait-il possible de passer selon le zoom sur une représentation de type gridlayer (comme on en trouve sur géonature) ?

Merci

[camillemonchicourt]

A ma connaissance, ce n'est pas une fonctionnalité disponible dans GeoNature-citizen. Leaflet.markercluster est la librairie Leaflet permettant de faire des clusters quand plusieurs points sont proches ou au même endroit :

Donc je ne pense que cela soit là qu'il faut que tu interviennes. Mais plutôt sur le style global Leaflet des objets.

Peux-tu préciser ce que tu souhaiterais faire et sur quelles pages ?

Afficher les données par maille quand on est à une échelle plus large est possible bien sur, avec des développements.

[jonath35]

Merci pour ce retour rapide ! En effet, pour mon deuxième chemin, j'ai été trop loin. J'ai effectivement testé une modif du rayon des clusters qui semble avoir fonctionné. Je souhaiterais gérer plus précisément (selon le seuil de zoom) la représentation des objets sur la page des observations principalement (+détail mais pour ca c'est bon avec le symbole png). Je suis passé à coté pour le style global. C'est dans frontend/node_modules ? Et pourquoi pas, être capable d'afficher une grille avec densité d'objet dans le genre de celle-ci :

Cordialement

[camillemonchicourt]

OK cette carte est pour la saisie, pour indiquer si l'espèce est vue dans la maille (vert), non vue (rouge) ou ne sait pas (bleu) donc c'est un peu différent. Je pense donc que ce que tu veux faire est plutôt comme ce qu'on fait dans GeoNature-atlas : https://biodiversite.ecrins-parcnational.fr/espece/61057

Je pense pas que cela soit dans les node_modules où sont juste installées les librairies JS, mais je ne maîtrise pas le sujet. Et pour afficher des densités, il faut d'abord calculer le nombre d'observations par maille avec une intersection géographique.

Donc y a un peu de boulot et il faut des compétences en développement que je n'ai pas. Bon courage :-)

[jonath35]

Oui en effet, je me doute que pour un maillage de densité il y a un certain nombre de chose à faire.

Du coup quand vous indiquez

Mais plutôt sur le style global Leaflet des objets.

Est-ce que vous savez quel fichier est concerné ?

Merci

[camillemonchicourt]

Est-ce que vous savez quel fichier est concerné ?

Non pas du tout.

[mvergez]

Bonjour @jonath35 et @camillemonchicourt,

Je ne pense pas avoir compris pour le "style global leaflet des objets", que voulez-vous entendre par là ?

[jonath35]

Bonjour,

Merci pour vos retours. Je vais essayer de trouver le code source correspondant au lien indiqué plus haut :

Je pense donc que ce que tu veux faire est plutôt comme ce qu'on fait dans GeoNature-atlas : https://biodiversite.ecrins-parcnational.fr/espece/61057

[jonath35]

De façon basique, j'ai modifié le fichier /frontend/src/app/programs/base/map/map.component.ts

En ajoutant des variables qui définissent différentes icônes, une variable d'affectation et une variable pour récupérer le niveau de zoom :

var Icon_petite = L.icon({iconUrl: MAP_CONFIG['OBS_POINTER'],iconSize: [200, 200],iconAnchor: [100, 100]});
var Icon_grande = L.icon({iconUrl: MAP_CONFIG['OBS_POINTER'],iconSize: [600, 600],iconAnchor: [300, 300]});
var icon_nom;
var zoom;

Plus bas dans la partie :

export abstract class BaseMapComponent implements OnChanges {
[....]
        this.observationMap.on('zoomend', () => {
            //recuperer le zoom
            zoom = this.observationMap.getZoom();
            //tester le zoom, affecter le symbole
            if (zoom > 15) {
                icon_nom = Icon_grande;
            } else {
                icon_nom = Icon_petite;
            }
            this.loadFeatures();
        });
[...]

Il ne s'agit que d'une configuration simpliste et certainement perfectible mais elle permet de remonter le niveau de zoom.

[jonath35]

Bonjour,

Je constate que si cette modification permet d'adapter le comportement sur le module observation, un bug apparait dans le module "site". Si on rafraichie la page d'un programme "site", une erreur apparait :

TypeError: Cannot read property 'parentNode' of undefined at remove (/home/geonatadmin/gncitizen/frontend/dist/server.js:255569:20) at NewClass.onRemove (/home/geonatadmin/gncitizen/frontend/dist/server.js:264091:5) at NewClass.removeLayer (/home/geonatadmin/gncitizen/frontend/dist/server.js:259936:12) at NewClass.removeFrom (/home/geonatadmin/gncitizen/frontend/dist/server.js:259817:10) at NewClass.remove (/home/geonatadmin/gncitizen/frontend/dist/server.js:259806:17) at NewClass.remove (/home/geonatadmin/gncitizen/frontend/dist/server.js:257056:22) at SitesMapComponent../src/app/programs/base/map/map.componentOrig.ts.BaseMapComponent.ngOnDestroy (/home/geonatadmin/gncitizen/frontend/dist/server.js:341400:29) at callProviderLifecycles (/home/geonatadmin/gncitizen/frontend/dist/server.js:24530:18) at callElementProvidersLifecycles (/home/geonatadmin/gncitizen/frontend/dist/server.js:24498:13) at callLifecycleHooksChildrenFirst (/home/geonatadmin/gncitizen/frontend/dist/server.js:24488:29)

l'utilisation de variable devrait certainement être mieux implémentée dans ma modif mais ce qui est étonnant c'est que ce problème n'apparait pas sur le module observation.

J'ai du mal à identifier les corrections à apporter.

Merci d'avance pour votre aide.

[jonath35]

J'ajoute un commentaire en espérant faire avancer le sujet.

Pour mieux cerner le problème, j'ai simplement ajouté :

        this.observationMap.on('zoomend', () => {
            this.loadFeatures();
        }); 

l. 236 du ficher /base/map/map.component.ts, avant la fin de initMap(...} sans autre code.

Le problème ci-dessus se manifeste toujours avec un F5 sur un programme "site" alors qu'il ne se présente pas sur un programme "observation". Il semble donc que dans l'appel ou l’exécution de la fonction loadFeatures() et visiblement sur le RemoveLayer il y ait un problème de contexte.. Mais je bloque toujours.

Merci d'avance