Skip to main content

260302 - Transformation du Frontend en page SIG

Maintenant, il ne nous reste plus qu'à s'assurer que ton fichier index.html (le frontend) est prêt à réceptionner ces données pour les dessiner.

Voici le code complet et propre pour ton fichier index.html. Il contient la carte, le chargement automatique des zones au démarrage, et la gestion du clic.

Mise à jour de index.html

  1. Ouvre le fichier :

    Bash 
    nano /var/www/alteris-geomatic/public/index.html

  2. Remplace tout le contenu par celui-ci :

HTML 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alteris - SIG Interactif</title>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <style>
        body { margin: 0; padding: 0; }
        #maCarte { width: 100vw; height: 100vh; background: #f0f0f0; }
        .info-panel {
            position: absolute; top: 10px; right: 10px; z-index: 1000;
            background: white; padding: 10px; border-radius: 5px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2); font-family: sans-serif;
        }
    </style>
</head>
<body>

    <div class="info-panel">
        <b>Alteris Geomatic</b><br>
        Cliquez sur la carte pour tester.
    </div>
    <div id="maCarte"></div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    
    <script>
        // 1. Initialisation de la carte sur Paris
        const map = L.map('maCarte').setView([48.85, 2.35], 11);

        // 2. Ajout du fond de plan OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap'
        }).addTo(map);

        // 3. Fonction pour charger et dessiner les zones depuis l'API
        async function chargerZones() {
            try {
                const reponse = await fetch('/api/zones');
                const data = await reponse.json();

                L.geoJSON(data, {
                    style: {
                        color: '#e67e22',   // Orange Alteris
                        weight: 3,
                        fillOpacity: 0.3
                    },
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup("<b>Zone :</b> " + feature.properties.nom);
                    }
                }).addTo(map);
                console.log("Zones chargées avec succès");
            } catch (err) {
                console.error("Erreur chargement zones:", err);
            }
        }

        // 4. Gestion du clic pour vérification spatiale
        map.on('click', async function(e) {
            const point = {
                type: "Point",
                coordinates: [e.latlng.lng, e.latlng.lat]
            };

            try {
                const reponse = await fetch('/api/check-zone', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(point)
                });
                const res = await reponse.json();

                L.popup()
                    .setLatLng(e.latlng)
                    .setContent(res.message)
                    .openOn(map);
            } catch (err) {
                console.log("Erreur lors du clic:", err);
            }
        });

        // Lancement au chargement
        chargerZones();
    </script>
</body>
</html>

Finalisation

  1. Sauvegarde avec Ctrl+O, Entrée et quitte avec Ctrl+X.

  2. Tu n'as pas besoin de redémarrer PM2 pour un changement de fichier HTML (Nginx/Express le servent en direct), mais fais-le par sécurité si tu as un doute :

    Bash 
    pm2 restart alteris-api

Le test ultime

Rends-toi sur https://alteris.juxjux.ovh.

Normalement :

  • Le carré de Paris apparaît immédiatement en orange dès que la page s'ouvre.

  • Si tu cliques dedans, la bulle confirme la présence.

  • Si tu cliques dehors, elle confirme l'absence.

Est-ce que le tracé orange est enfin visible sur ton navigateur ? Si oui, souhaites-tu que je t'apprenne comment insérer de nouvelles zones dans la base sans passer par la ligne de commande ?

 

 

No comments to display

Back to top