pnecrins / geosites

Application WEB permettant de consulter l'inventaire du patrimoine géologique

GeoSites

Application WEB permettant de consulter l'inventaire du patrimoine géologique.

Développée par le Parc national des Ecrins pour mettre à disposition du grand public les sites géologiques remarquables de son territoire : http://geologie.ecrins-parcnational.fr/.

GeoSites permet de mettre en ligne une application WEB grand public pour consulter l'inventaire du patrimoine géologique d'un territoire. Cet inventaire est coordonné au niveau national par la CPPG (Commission permanente du patrimoine géologique) et validé scientifiquement par le MNHN (Muséum national d'Histoire naturelle) et le BRGM (Bureau de Recherches Géologiques et Minières). https://inpn.mnhn.fr/programme/patrimoine-geologique/presentation http://www.brgm.fr/projet/patrimoine-geologique-outil-saisie-inventaire-i-geotope

Initialement saisi dans la base de données GEOTOPE mis en place avec Microsoft Access par le BRGM, le Parc national des Ecrins a souhaité migrer ces données dans une BDD PostgreSQL / PostGIS et développer une application WEB grand public pour consulter ces données.

Cette application WEB peut aussi être utilisée pour mettre en ligne d'autres types de données localisées. Voir rubrique Développement de la documentation.

Présentation au Forum TIC 2016 : http://forum-tic.espaces-naturels.fr/sites/default/files/fichiers/presentations/5_geosites_cmonchicourt.pdf

Technologies

• Langages : PHP, HTML, JS, CSS
• BDD : PostgreSQL, PostGIS
• Serveur : Debian ou Ubuntu
• Framework JS : AngularJS
• Framework CSS : Bootstrap
• Framework carto : LeafLet
• Fonds carto : Geoportail, OpenStreetMap, Google Maps, WMS

Fonctionnalités

• Liste des sites géologiques (sites publics uniquement)
• Carte des objets navigable avec fonds IGN, Openstreetmap et affichage de la carte géologique (WMS BRGM)
• Fiche détaillée de chaque objet (texte, photos, PDF)
• Recherche libre + filtre
• Recentrage sur une commune
• Filtre de la liste des résultats en fonction de la zone de la carte affichée
• Responsive design pour s'adapter aux différentes tailles d'écrans (dont les mobiles)

Installation

Consulter la documentation : https://github.com/PnEcrins/GeoSites/blob/master/docs/installation.rst

License

• Application développée par Thibault Romanin et Gil Deluermoz (Parc national des Ecrins)
• OpenSource - BSD
• Copyright (c) 2016 - Parc National des Écrins

geosites's Issues

CODE - rendre générique le chargement des json

permettre le chargement des json via des vues avec un select * FROM mavue dans un seul et même fichier php.

refaire le style.css compatible entre les filtres et la liste

voir les classes panel-heading ou panel surcouchées
Si besoin, faire un

main-menu panel-heading {...}

ou

filter-panel panel-heading {...}

Revoir la conf et la doc

Le fichier dbconnect.php.sample n'est plus utile.
Pas mal de paramètres sont dans /data/htmlContent.json. Les mettre dans un dossier de config ou au moins créer une version sample, faire le gitignore et le mentionner dans la doc.

Liaison carte et liste

A faire

Lorsque l'on clique sur un Marker de la carte, la vue dans la liste de la sidebar se positionne sur le site correspondant.

Piste à suivre : $anchorScroll

LEGENDE - légender la rareté et la patrimonialité

• autre si besoin

MODALE - regrouper les infos avec un "lire la suite"

Collapser les principaux sous-titre : document, description, accès, interêts, etc... et permettre leur ouverture avec un "lire la suite" ou un click sur le titre (sans lien mais un ng-click dans la div)

MODALE SITE - vignette

Ajouter une image du site en vignette

MODALE - le bouton en croix de fermeture de la modale ne fonctionne pas

ajouter un bouton "+" dans les collapses de la modal détail

Retirer le "afficher suite" dans descrition site

Loading avant la modal de détails

Faire un loading pour le chargement des documents et pour le chargement des intérêts.

LISTE - style sur tout le heading

Mettre un style sur toute la div du collapse. Actuellement le style "backgroud gris dense + texte blanc" n'est que sur le texte

FILTRE - choisir des filtres pertinents

FILTRES - Position dans l'interface

Les déplacer au dessus de la liste de résultats pour qu'ils soient plus visibles.

ERGONOMIE - permettre le téléchargement de tous les pdf

Soit en zippant les pdf à la volée. Soit en préparant un pdf complet.

AngularJS et SEO

Actuellement l'application ne dispose que d'une URL, du coup le contenu des fiches ne sera pas référencé par les moteurs de recherche.
Une alternative à cela semble être pushState - http://www.ocpsoft.org/java/seo-friendly-angularjs-with-html5-pushstate-rewrite-and-twelve-lines-of-code/

Il y a d'autres trucs à creuser pour être sur que les moteurs de recherche arrivent bien à accéder au contenu des pages, pas visible directement avec AngularJS - https://www.searchenginejournal.com/warning-youre-killing-seo-efforts-using-angular-js/142031/

http://www.angularonrails.com/get-html5-pushstate-working-angular-rails/

Optimiser taille des images et icônes

Certaines images sont trop lourdes car redimensionnées avec le style css.

Affichage carte en masquant la sidebar

Lorsque l'on masque la sidebar avec la box en bas à gauche, une bande grise apparaît sur la partie droite de la carte.

Il faut utiliser invalidateSize() pour mettre à jour l'affichage.

Responsive - Carte / Liste

La carte est à moitié sur la liste.

Affichage carte

L'affichage de la carte ne marche pas, à corriger.

MODALE SITE - permettre le téléchargement des fiches pdf

récupérer les images des pdf RHA

Ajouter des fonds de cartes et ajouter Layer Control

Ajouter d'autres fonds de cartes et ajouter Layer Control.

Pour permettre de switcher entre les différents fonds de carte.

Griser les sites absents de la carte

Lorsque l'on zoome sur la carte, les sites qui sont absents de la carte s'estompent dans la liste. Trouver un style css qui les estompent et l'événement leaflet à utiliser pour qu'à chaque action de zoom et dézoom une fonction qui recalcule l'affichage de la liste se déclanche.

Modifier l'affichage des intérêts dans la modal de détails

Il faut faire comme pour les documents pdf et créer un fichier php de génération du json afin d'afficher les intérêts liés à un site.

LAYERS - ajouter la ou les couches wms geologiques du BRGM

Le BRGM propose un wms des cartes geologiques de France mais les premiers tests de chargement des tuiles n'aboutissent pas 👍 En ajoutant ceci au data/map.json les requetes vers le service renvoient : "Aborted". A creuser et corriger si le service est toujours disponible.
{
"name": "Carte géologique",
"type": "wms",
"url" : "http://geoservices.brgm.fr/geologie",
"active" : false,
"options": {"layers":"SCAN_F_GEOL250","transparent":"true","format":"image/png"}
}

REORGANSATION DU CODE - alléger l'index.php

Déporter le code spécifique dans des templates et ne mettre dans l'index que l'appel des fichiers js et css ainsi que l'appel des templates. Notion de layout (page de maquette).

CODE - renommer les modalControllers

renommer les controllers pour que les noms soient explicites et génériques
modalController.js --> modalNavbarController.js
modalDetailsController.js = ok

Régler problème de collapse en lien avec le scroll

Régler problème de collapse en lien avec le scroll.
LOrsque l'on clique sur un marqueur ça scroll bien sur le site dans la liste mais le site ne s'ouvre pas.
Voir code commenté qui si on l'active, ouvre la div mais elle ne se referme pas si on ouvre un autre site.

Sites sensibles

S'assurer que les sites sensibles sont exclus de la vue permetttant la création du geojson

MODAL - mettre les documents jsute avant les conditions d'accès

Et renommer 'Conditions d'accès' en 'Accès'

Collapser les éléments dans la modal de détail

Faire une collapse en dessous de chaque titre important et qui contient le contenu à afficher.

CHARGEMENT centrer texte dans le masque

Interaction LISTE--->CARTE

L'interaction carte --> liste est en place.
Mettre en l'interraction liste --> carte (affichage du popup sur la carte lors du choix d'un site dans la liste.)
cf #2

ERGONOMIE - Retirer le rouge et mettre un fond différent

Par exemple un fond gris dense et le texte/nom du site en blanc

REORGANSATION DU CODE - créer des templates

Au moins un template pour la liste à gauche.
Un template pour la popup de détails du site.
Un template pour les filtres (futurs).

MODALE SITE - Galerie d'images

Permettre le visionnage d'une série d'images du site (s'il y en a) dans la modale du site.

LISTE - mettre une photo dans la liste

restaurer le fonctionnement du bouton du fermeture ouverture de la sidebar

Créer fichier de config php

Créer un fichier de config qui contiendra les variables à modifier pour le fonctionnement générique de l'application :
La vue, la connexion à la BDD...

Création d'une modal pour les détails d'un site

A faire

Dès qu'on clique sur le bouton Afficher détails en dessous d'un site dans la liste de la sidebar, une modal s'ouvre et on a l'affichage dans une modal de détails plus précis concernant le site ainsi que pour certains sites un pdf consultable pour encore plus de précisions.

Piste à suivre : récupérer l'id grace à ng-click

Mise en place d'un système de filtrage

A faire

Mettre quelque part dans la sidebar un système de filtrage sur les éléments de la couche.

Piste à suivre : le filtre sur ng-mapCreator-fp

CARTE - mettre en place le fond IGN

Voir si besoin de permettre le choix entre plusieurs fonds : non prioritaire.

ERGONOMIE - ouvrir les pdf dans l'application

Si on ouvre pls pdf et d'autant plus s'ils viennent de plusieurs sites, on ne sait plus ce qui correspond à quoi. Voir s'il est possible d'ouvrir les pdf sans quitter l'onglet de l'application.

Interaction carte liste - le rouge reste allumé quand on choisi un autre site dans la liste

Quand on choisi un site sur la carte, il s'allume en rouge dans la liste mais si dans la foulée on choisi un site dans la liste, le site en rouge reste rouge

PDF - bug chargement en cours

Si on collapse le bloc documents, et qu'on l'ouvre de nouveau, le "Chargement en cours..." s'affiche.

Ouverture par défaut d'une modal au lancement de l'application

Après avoir fini de chargé l'appli et dès que le loadingMask disparaît, il faut ouvrir par défaut une modal d'informations concernant l'application.

LISTE - mettre la commune à la place de la surperficie

et mettre le lieu dit ensuite

Faire un gif de chargement

Mettre un gif de chargement tant que tous les éléments ne sont pas chargés.

Duplication des config

Les params de config de connexion à la base de données sont dans deux fichiers.
config.php et dbconnect.php
Ne conserver qu'un fichier pour la config :
mettre les variables de connexion dans le config.php
dans le dbconnect.php include le config.php et faire directement la connexion en supprimant les variables.