ajout de maplibre sur les stats

2025-06-20 01:44:42 +02:00 · 2025-06-01 19:52:56 +02:00 · 2025-06-01 19:52:56 +02:00 · cf292c6266
commit cf292c6266
parent 7edab7891e
7 changed files with 216 additions and 97 deletions
--- a/assets/app.js
+++ b/assets/app.js
@ -10,13 +10,12 @@ import './styles/app.css';

 console.log('Hello World de app.js');

-function labourer() {
-  window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
-}

 // Attendre le chargement du DOM
 document.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');
+
+
  // Générer une couleur pastel aléatoire
  const genererCouleurPastel = () => {
    // Utiliser des valeurs plus claires (180-255) pour obtenir des tons pastel
--- a/labourage.sh
+++ b/labourage.sh
@ -0,0 +1,28 @@
+#!/bin/bash
+
+# Les 10 codes postaux des villes les plus peuplées de France
+codes_postaux=(
+  "75001" # Paris 1er
+  "13001" # Marseille 1er
+  "69001" # Lyon 1er
+  "31000" # Toulouse
+  "06000" # Nice
+  "44000" # Nantes
+  "67000" # Strasbourg
+  "33000" # Bordeaux
+  "59000" # Lille
+  "35000" # Rennes
+)
+
+# Pour chaque code postal
+for code in "${codes_postaux[@]}"; do
+  echo "Traitement du code postal: $code"
+
+  # Faire la requête curl
+  curl -X GET "https://osm-commerces.cipherbliss.com/admin/labourer/$code"
+
+  # Attendre 5 secondes entre chaque requête pour ne pas surcharger le serveur
+  sleep 5
+done
+
+echo "Traitement terminé"
--- a/src/Controller/AdminController.php
+++ b/src/Controller/AdminController.php
@ -193,6 +193,16 @@ final class AdminController extends AbstractController
        // on crée un commerce pour chaque résultat qui reste
        foreach ($results as $result) {
            $commerce = new Place();
+
+            if (isset($result['tags']['amenity'])) {
+                $commerce->setMainTag('amenity='.$result['tags']['amenity']);
+            }
+            if (isset($result['tags']['shop'])) {
+                $commerce->setMainTag('shop='.$result['tags']['shop']);
+            }
+            if (isset($result['tags']['tourism'])) {
+                $commerce->setMainTag('tourism='.$result['tags']['tourism']);
+            }
            $commerce->setOsmId($result['id'])
            ->setOsmKind($result['type'])
            ->setName($result['name'])
@ -248,10 +258,12 @@ final class AdminController extends AbstractController
    public function delete_by_zone(string $zip_code): Response
    {
        $commerces = $this->entityManager->getRepository(Place::class)->findBy(['zip_code' => $zip_code]);
+        $stats = $this->entityManager->getRepository(Stats::class)->findOneBy(['zone' => $zip_code]);
        
        foreach ($commerces as $commerce) {
            $this->entityManager->remove($commerce);
        }
+        $this->entityManager->remove($stats);
        $this->entityManager->flush();

        $this->addFlash('success', 'Tous les commerces de la zone '.$zip_code.' ont été supprimés avec succès de OSM Mes commerces, mais pas dans OpenStreetMap.');
--- a/src/DataFixtures/HistoryFixtures.php
+++ b/src/DataFixtures/HistoryFixtures.php
@ -29,6 +29,7 @@ class HistoryFixtures extends Fixture
            ->setOptedOut($faker->boolean)
            ->setDead($faker->boolean)
            ->setNote($faker->text)
+            ->setMainTag($faker->randomElement(['amenity=cafe', 'shop=supermarket', 'tourism=museum']))
            ->setModifiedDate($faker->dateTimeBetween('-1 year', 'now'))
            ->setAskedHumainsSupport($faker->boolean)
            ->setLastContactAttemptDate($faker->dateTimeBetween('-1 year', 'now'))
--- a/src/Entity/Place.php
+++ b/src/Entity/Place.php
@ -76,6 +76,22 @@ class Place
    #[ORM\Column(nullable: true)]
    private ?bool $has_note = null;

+    #[ORM\Column(nullable: true)]
+    private ?string $main_tag = null;
+
+    public function getMainTag(): ?string
+    {
+        return $this->main_tag;
+    }
+
+    public function setMainTag(?string $main_tag): static   
+    {
+        $this->main_tag = $main_tag;
+
+        return $this;
+    }
+    
+
    public function getCompletionPercentage(): ?int
    {
        $completion_percentage = 0;
--- a/templates/admin/stats.html.twig
+++ b/templates/admin/stats.html.twig
@ -2,6 +2,11 @@

 {% block title %}{{ 'display.stats'|trans }}{% endblock %}

+{% block stylesheets %}
+    {{ parent() }}
+    <link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
+{% endblock %}
+
 {% block body %}
 <div class="container">
    <div class="mt-4 p-4">
@ -24,9 +29,9 @@
         <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
         <br>
    </div>
-    <div id="map"></div>
+    <div id="map" style="height: 400px;"></div>
    <div class="card mt-4">
-        <h1 class="card-title">Tableau des commerces</h1>
+        <h1 class="card-title">Tableau des lieux</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
@ -41,107 +46,106 @@
                {% for commerce in stats.places %}
                    <tr>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
-                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">
-                        {% if not commerce.name |length  %}
-                        <span class="no-name">
-                         (lieu sans nom) 
-                        </span>
-                         {% endif %}
-                         {% if commerce.name |length > 50 %} {{ commerce.name |slice(0, 50) }}... {% else %} {{ commerce.name }} {% endif %}</a>
-                        
+                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">{{ commerce.name }}</a>
                        </td>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
                        <td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
                        <td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
-                          <td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>      
+                        <td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>      
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
 </div>
-{% endblock %}
-{% block javascripts %}
-    {{ parent() }}
-    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
-    <script>

-    console.log('go faire une carte ');
-
-            const request = `[out:json][timeout:25];
+<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
+<script>
+    const request = `[out:json][timeout:25];
    area["postal_code"="{{ zip_code }}"]->.searchArea;
    (
-        nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"](area.searchArea);
-        nw["shop"](area.searchArea);
-        nw["tourism"="museum|hotel|chalet|apartment"](area.searchArea);
-        nw["office"](area.searchArea);
+        nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"]["name"~"."](area.searchArea);
+        nw["shop"]["name"~"."](area.searchArea);
+        nw["tourism"="museum|hotel|chalet|apartment"]["name"~"."](area.searchArea);
+        nw["office"]["name"~"."](area.searchArea);
    );
    out center;
    >;
    out skel qt;
    `; 

+    async function fetchland() {
+        const encodedRequest = encodeURIComponent(request);
+        const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
+        const response = await fetch(overpassUrl);
+        const data = await response.json();

-        document.addEventListener('DOMContentLoaded', function() {
-            async function fetchland() {
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
+            center: [2.3488, 48.8534],
+            zoom: 12
+        });

-                // Construire la requête Overpass 
-
-                const encodedRequest = encodeURIComponent(request);
-                console.log('encodedRequest', encodedRequest);
-                const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
-                const response = await fetch(overpassUrl);
-                const data = await response.json();
-                console.log('data', data);
-                mapboxgl.accessToken = '{{ mapbox_token }}';
-                const map = new mapboxgl.Map({
-                        container: 'map',
-                        style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
-                    
-                        zoom: 17
-                    }); 
-            
-                // Ajouter les marqueurs pour chaque point
-                
-                if (data.elements && data.elements.length > 0) {
-                    const firstPoint = data.elements[0];
-                    if (firstPoint.lat && firstPoint.lon) {
-                        // Centrer la carte sur le premier point
-                        map.setCenter([firstPoint.lon, firstPoint.lat]);
-                        
-                        // Ajouter un marqueur pour le premier point
-                        new mapboxgl.Marker()
-                            .setLngLat([firstPoint.lon, firstPoint.lat])
-                            .setPopup(new mapboxgl.Popup({ offset: 25 })
-                                .setHTML(`<h3>${firstPoint.tags?.name || 'Sans nom'}</h3>`))
-                            .addTo(map);
-                    }
-                }
-
-            }
-
-
-            function colorizeHeaders() {    
-                const headers = document.querySelectorAll('th');
-                if(headers.length > 0) {
-                    headers.forEach(header => {
-                        const text = header.textContent;
-                        const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
-                        if (match) {
-                            const [_, completed, total] = match;
-                            const ratio = completed / total;
-                            const alpha = ratio.toFixed(2);
-                            header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
+        map.on('load', () => {
+            console.log(data.elements);
+            data.elements.forEach(element => {
+                if (element.lat && element.lon) {
+                    const el = document.createElement('div');
+                    el.className = 'marker';
+                    el.style.width = '20px';
+                    el.style.height = '20px';
+                    el.style.borderRadius = '50%';
+                    el.style.backgroundColor = '#ff0000';
+                    let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
+                    if (element.tags) {
+                        for (const tag in element.tags) {
+                            tagstable += `<tr><td>${tag}</td><td>${element.tags[tag]}</td></tr>`;
                        }
-                    });
+                    }
+                    tagstable += '</table>';
+
+                    new maplibregl.Marker(el)
+                        .setLngLat([element.lon, element.lat])
+                        .setPopup(new maplibregl.Popup({ offset: 25 })
+                            .setHTML(`<a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank"><h3>${element.tags?.name || 'Sans nom'}</h3></a> <br> ${tagstable}`))
+                        .addTo(map);
                }
+            });
+        });
+
+        // Calculer les limites (bounds) à partir des marqueurs
+        const bounds = new maplibregl.LngLatBounds();
+        data.elements.forEach(element => {
+            if (element.lat && element.lon) {
+                bounds.extend([element.lon, element.lat]);
            }
+        });
+
+        // Centrer et zoomer la carte pour inclure tous les marqueurs
+        if (!bounds.isEmpty()) {
+            map.fitBounds(bounds, {
+                padding: 50 // Ajoute une marge autour des marqueurs
+            });
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const headers = document.querySelectorAll('th');
+        headers.forEach(header => {
+            const text = header.textContent;
+            const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
+            if (match) {
+                const [_, completed, total] = match;
+                const ratio = completed / total;
+                const alpha = ratio.toFixed(2);
+                header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
+            }
+        });

-        console.log(request);
-        colorizeHeaders();
        fetchland();
-        })
-
-
-    </script> 
+ 
+        sortTable();
+    });
+</script>
 {% endblock %} 
--- a/templates/public/dashboard.html.twig
+++ b/templates/public/dashboard.html.twig
@ -4,26 +4,31 @@

 {% block stylesheets %}
    {{ parent() }}
-    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
+    <link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
    <style>
        .hidden {
            display: none;
        }
+        #mapDashboard {
+            height: 400px;
+            width: 100%;
+            margin-bottom: 1rem;
+        }
    </style>
 {% endblock %}

 {% block javascripts %}
    {{ parent() }}

-    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
+    <script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script> 
    <script>
+        // Définir la fonction labourer dans le scope global
        function labourer() {
            window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
        }

-        mapboxgl.accessToken = '{{ mapbox_token }}'; 
        // Créer une carte des villes avec les codes postaux
-        let map = new mapboxgl.Map({
+        let map = new maplibregl.Map({
            container: 'mapDashboard',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
            center: [2.3488, 48.8534], // Paris
@ -35,13 +40,18 @@
        async function getAllPostalCodesCoordinates() {
            const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
            
+            let postalLines = ``;
+            postalCodes.forEach(code => {
+                if (/^\d+$/.test(code)) {
+                    postalLines += `nwr["boundary"="postal_code"][postal_code=${code}]["name"~"."];`;
+                }
+            });
            const query = `[out:json];
            
                (
-                ${postalCodes.map(code => `
-                    nwr["boundary"="postal_code"][postal_code=${code}];
+                ${postalLines}
                );
-                out center;`;
+                out center;` ;
            console.log(query);
            const response = await fetch('https://overpass-api.de/api/interpreter', {
                method: 'POST',
@ -52,7 +62,8 @@
            return data.elements.reduce((acc, element) => {
                // On associe chaque code postal à ses coordonnées
                const postalCode = element.tags.postal_code;
-                if (postalCode) {
+                // Vérifier que le lieu a un nom non vide
+                if (postalCode && element.tags.name && element.tags.name.trim() !== '') {
                    acc[postalCode] = [element.lon, element.lat];
                }
                return acc;
@ -68,8 +79,10 @@

        // On récupère toutes les coordonnées en une seule fois
        getAllPostalCodesCoordinates().then(coordinatesMap => {
+            const bounds = new maplibregl.LngLatBounds();
+            
            {% for stat in stats %}
-            {% if not "-" in stat.zone  %}
+            
                const coordinatesMapped{{ stat.zone }} = coordinatesMap['{{ stat.zone }}'];
                if (coordinatesMapped{{ stat.zone }}) {
                    const el = document.createElement('div');
@ -78,18 +91,61 @@
                    el.style.borderRadius = '50%';
                    el.style.backgroundColor = getColorFromPercent({{ stat.completionPercent }});

-                    new mapboxgl.Marker(el)
+                    // Créer un élément pour le marqueur du code postal
+                    const postalEl = document.createElement('div');
+                    postalEl.style.width = '15px';
+                    postalEl.style.height = '15px';
+                    postalEl.style.borderRadius = '50%';
+                    postalEl.style.backgroundColor = '#0000ff';
+                    postalEl.style.border = '2px solid white';
+                    postalEl.style.boxShadow = '0 0 4px rgba(0,0,0,0.5)';
+
+                    // Ajouter le marqueur principal
+                    new maplibregl.Marker(el)
                        .setLngLat(coordinatesMapped{{ stat.zone }})
-                        .setPopup(new mapboxgl.Popup().setHTML(`
+                        .setPopup(new maplibregl.Popup().setHTML(`
                            <h3>{{ stat.zone }}</h3>
                            <p>Nombre de commerces: {{ stat.placesCount }}</p>
                            <p>Complétude: {{ stat.completionPercent }}%</p>
                        `))
                        .addTo(map);
+
+                    // Ajouter le marqueur du code postal légèrement décalé
+                    const [lon, lat] = coordinatesMapped{{ stat.zone }};
+                    new maplibregl.Marker(postalEl)
+                        .setLngLat([lon + 0.001, lat + 0.001]) // Décalage de 0.001 degré
+                        .setPopup(new maplibregl.Popup().setHTML(`
+                            <h4>Code Postal: {{ stat.zone }}</h4>
+                            <p>Zone: {{ stat.zone }}</p>
+                        `))
+                        .addTo(map);
+                        
+                    bounds.extend(coordinatesMapped{{ stat.zone }});
                }
-            {% endif %}
            {% endfor %}
+            
+            // Ajuster la vue pour montrer tous les marqueurs
+            if (!bounds.isEmpty()) {
+                map.fitBounds(bounds, {
+                    padding: 50
+                });
+            }
        }); 
+
+        // Attendre le chargement du DOM
+        document.addEventListener('DOMContentLoaded', function() {
+            // Récupérer le bouton labourer
+            const btnLabourer = document.querySelector('#labourer');
+            if (btnLabourer) {
+                // Ajouter l'écouteur d'événement click
+                btnLabourer.addEventListener('click', function() {
+                    // Récupérer la valeur du code postal
+                    const codePostal = document.querySelector('#app_admin_labourer').value;
+                    // Rediriger vers la route de labourage avec le code postal
+                    window.location.href = `/admin/labourer/${codePostal}`;
+                });
+            }
+        });
    </script>
 {% endblock %}

@ -100,11 +156,11 @@
            <h1>Dashboard</h1>
        </div>
        <div class="col-12">
-            <h2>Statistiques : {{ stats|length }} commerces</h2>
-mapDashboard:
+            <h2>Statistiques : {{ stats|length }} codes postaux</h2>
+ 
            <div id="mapDashboard"></div>
            <input class="form-control" type="text" id="app_admin_labourer" value="75013">
-            <button class="btn btn-default" onclick="labourer() ">Labourer</button>
+            <button class="btn btn-default" id="labourer"  >Labourer</button>


              <table class="table table-hover table-striped table-responsive">
@ -140,6 +196,7 @@ mapDashboard:
                  <thead>
                      <tr>
                          <th>Nom</th>
+                          <th>Tag</th>
                          <th>Email</th>
                          <th>Date de modification</th>
                          <th>Date de dernier contact</th>
@ -154,11 +211,13 @@ mapDashboard:
                  <tbody>
                      {% for place in places %}
                          <tr>
+
                              <td>{% if place.name %}
                                    <a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': place.name|url_encode, 'uuid': place.uuidForUrl}) }}">{{ place.name }}</a>
                                {% else %}
                                    <a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': '?', 'uuid': place.uuidForUrl}) }}"><i class="bi bi-question-circle"></i></a>
                                {% endif %} </td>
+                              <td>{{ place.mainTag }}</td>
                              <td>{{ place.email }}</td>
                              <td>{{ place.modifiedDate | date('Y-m-d H:i:s') }}</td>
                              <td>{{ place.lastContactAttemptDate | date('Y-m-d H:i:s') }}</td>