Conception et réalisation d’une carte interactive

Au cours de l’année 2024, nous avons commencé à travailler avec le département avec la récente mise en place de la GED – Gestion Electronique de Documents ; avec un portail dédié aux divers organismes agissant sur le Domaine de Bayssan.

Actuellement, la plupart des activités sont réalisés par Hérault Culture, la Médiathèque (avec la SLPOH – Service de Lecture Publique Ouest Héraultais) et les Espaces verts.

Hérault Culture organise sa planification complète via TIS – Théâtre Info Système, un logiciel qui leur permet de gérer l’ensemble de leurs activités. De leurs côtés, la SLPOH et les Espaces verts continuent de planifier et organiser leurs plannings avec Excel.

Ainsi, dans le but d’enrichir et faciliter l’expérience utilisateur, nous avons décidé de nous pousser sur un projet intermédiaire : la création d’une carte interactive.

On m'avait déjà parlé des problèmes de communication entre les organismes et rapidement, on m'a demandé : "Comment simplifier la communication entre les services du département et mettre en avant les différentes activités du domaine ?"

Les objectifs sont multiples :

• Hérault Culture souhaite garder le contrôle total du logiciel TIS et souhaite avoir une visualisation géographique des activités.
• SLPOH, Espaces verts et CD34 souhaitent voir les activités d’Hérault Culture sur le domaine et d’en rajouter dans la planification globale du domaine.

Dans un premier temps, il a fallu être en mesure d’interroger la base de données. Fort heureusement, TIS possède une API – Application Programming Interface, une interface d’application programmée. Pour faire simple, c’est un intermédiaire entre notre future site internet et la base de données de TIS – qui nous permet de simplifier et codifier les échanges selon le schéma ci-dessous.

Par la suite, il faut être en mesure de réaliser une carte – et de la rendre dynamique avec l’affichage de points.

Pour le reste de l’organisation, il a fallu réaliser un choix sur la technologie à utiliser avec un framework et une librairie de composant graphique (pour l’UI). Je me suis focalisé sur les technologies de Nextjs, Typescript et librairie Mantine couplé à Tailwindcss.

Pour réaliser ce projet, j’ai utilisé une seule requête : GetActivitePourDate. Cette requête est réalisée avec des échanges SOAP à partir de plusieurs arguments : la date et le nom de l’utilisateur/mot de passe.

Voici ce qu’on envoie au serveur pour interroger la base de données :

xmlPOST /WebServiceTIS/GestionActivite.asmx HTTP/1.1
Host: tis.herault-culture.fr
Content-Type: application/soap+xml; charset=utf-8
Content-Length: length
 
<?xml version="1.0" encoding="utf-8"?>
<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
  <soap12:Body>
    <GetActivitePourDate xmlns="http://theatreinfosys.fr/">
      <_DATE>string</_DATE>
      <_UTILISATEURTIS>string</_UTILISATEURTIS>
      <_MDP>string</_MDP>
    </GetActivitePourDate>
  </soap12:Body>
</soap12:Envelope>

Et voici une réponse type si tout c’est bien passé avec une réponse http de 200 pour le succès. Nous allons recevoir toutes nos données dans l’objet « GetActivitePourDateResult»

xmlHTTP/1.1 200 OK
Content-Type: application/soap+xml; charset=utf-8
Content-Length: length
<?xml version="1.0" encoding="utf-8"?>
<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
  <soap12:Body>
    <GetActivitePourDateResponse xmlns="http://theatreinfosys.fr/">
      <GetActivitePourDateResult>string</GetActivitePourDateResult>
    </GetActivitePourDateResponse>
  </soap12:Body>
</soap12:Envelope>

A l’aide de cette requête, nous recevons des informations sous le format string. Une étape supplémentaire est nécessaire pour convertir les données sous le format JSON, puis sous le format typé de Typescript suivant les modèles de données suivants :

Typescriptexport interface Creneau {
    DEBUT: string;
    FIN: string | null;
    TEXTE: string;
}
 
export interface Lieu {
    NOMLIEU: string;
    CRENEAU: Creneau[] | Creneau;
}
 
export interface Famille {
    NOMFAMILLE: string;
    LIEU: Lieu[] | Lieu;
}
 
export interface Filtre {
    NOMFILTRE: string;
    FAMILLE: Famille[] | Famille;
}
 
export interface Date {
    FILTRE: Filtre[] | Filtre;
}
 
export default interface Activities {
    DATE: Date;
}

Désormais, nous possédons nos diverses activités à la journée !  

Pour rendre la carte dynamique, je suis partie d’un plan existant du domaine avec tous les lieux emblématiques.

Il suffit d’intégrer notre image à notre projet web. La partie la plus subtile commence lorsque nous devons positionner les différents points d’intérêt sur la carte.

Il faut imaginer notre image avec une grille quadrillée en pourcentage : il suffit par la suite d’y aller à tâtons pour trouver la position en X et en Y.

De nouveau, j’ai dû créer deux types de donnée :

Typescriptinterface Point {
  xPercentage: number;          // Position en pourcentage
  yPercentage: number;          // Position en pourcentage
  radiusPercentage: number;     // Taille en pourcentage
}
 
export interface Place {
  name : string;                // Nom de l'emplacement
  nameTIS ?: string[];            // Nom de correspondance avec TIS => permet de faire le lien avec le webservice
  code : string;                // Code de l'emplacement
  description : string;         // Description
  coord : Point;                // Coordonnées de l'emplacement
  data : Lieu[];            // Save data
  link : string;                // Lien du dossier GED
  image : string;               // Lien de la photo
}

Je note l’existence de :

• « name » : le nom du lieu de manière globale sur le web
• « nameTIS » : les noms des lieux permettant de faire la correspondance de TIS

Exemple avec l’Espace Di Rosa composé de plusieurs entités dans TIS :

json{
    name : "Espace Hervé Di Rosa",
    nameTIS : ["Di Rosa étage", "Di Rosa gauche", "Di Rosa droite", "Di Rosa RDC", "Di Rosa extension", "Di Rosa terrasse"],
    code : "DR",
    description : "",
    coord : { xPercentage: 57.2, yPercentage: 44.3, radiusPercentage: radius},
    link : "https://ged.herault.fr/share/page/folder?id=workspace://SpacesStore/cc792e1c-e10d-4c0f-9798-f9d5820b782d",
    image : "/places/",
    data : []
}

En revanche, les noms ne doivent pas être modifiés dans TIS, sinon une mise à jour sera requise pour rétablir la comptabilité des outils.

Voici le résultat pour le moment – avec 3 sections distinctes : - La carte interactive avec les liens emblématiques du domaine de Bayssan avec 2 boutons pour les lieux externes. - La section d’information concernant le lieu OU toutes les activités de la journée. - Le calendrier et les options d’affichage

J’ai ajouté également un label RSE permettant de prouver l’éco-conception du site internet.

On peut déjà imaginer une prochaine mise à jour pour :

• Avoir une interface permettant d’ajouter des activités directement dans TIS, avec un choix du répertoire de la famille Activité, la création des phases et des dates
• Avoir une interface permettant d’ajouter des lieux et de gérer les incidents des bâtiments
• Avoir une interface permettant d’interagir avec les données utilisateurs avec pour objectif sécurisé l’accès au site aux membres des services du département
• Peut-être ajouter un CMS headless comme Strapi pour interagir avec les données

La plupart de ces objectifs seront atteignables avec une API de TIS plus complète et plus sécurisée.