carte et marqueurs. C'etait INTERMINABLE !!!

2026-03-27 17:23:10 +01:00
parent 4cb0b46b40
commit 24e85c4471
114 changed files with 47433 additions and 26 deletions
@@ -3,6 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <title>Parcoursup but coded by an idiot</title>
 </head>
 <body>
@@ -1,6 +1,9 @@
 const API_BASE = "https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-esr-parcoursup/records";

-export async function recupereFormations(motCle, limit = 20) {
+
+
+export async function recupereFormations(motCle, limit = 20) 
+{
  const url = `${API_BASE}?where=search("${motCle}")&limit=${limit}`;
  
  const response = await fetch(url);
@@ -1,41 +1,79 @@
 <app>
+
+
  <h1>Explorateur de formations</h1>

+
+
+
  <input 
    type="text" 
    placeholder="Ex: informatique, médecine..."
    onkeyup={ saisie }>

+
+
+
+
  <button onclick={ rechercher }>Lancer la recherche</button>

+
+
+
+
  <div if={ chargement }>Chargement...</div>

-  <div each={ formation in formations }>
+
+
+
+
+  <carte-formations formations={ state.formations }></carte-formations>
+
+
+
+
+  <div each={ formation in state.formations }>
    <ligne-resultat formation={ formation }></ligne-resultat>
  </div>

+
+
+
+
  <script>
+
    import { recupereFormations } from '../api/parcoursup.js'
    import LigneResultat from './ligne-resultat.riot'
+    import CarteFormations from './carte-formations.riot'

-    export default {
-      components: { LigneResultat },

-      state: {
+
+    export default 
+    {
+      components: { LigneResultat, CarteFormations },
+
+      state: 
+      {
        formations: [],
        chargement: false,
        motCle: ''
      },

-      saisie(keyWd) {
-        this.motCle = keyWd.target.value
+      saisie(e) 
+      {
+        this.motCle = e.target.value
      },

-      async rechercher() {
+      async rechercher() 
+      {
        this.update({ chargement: true })
        const formations = await recupereFormations(this.motCle)
        this.update({ formations, chargement: false })
      }
+
+
    }
+
  </script>
+  
 </app>
@@ -1,33 +1,85 @@
 <carte-formations>
-  <div id="carte" style="height: 500px; width: 100%;"></div>
+
+  <div id="carte" style="height: 500px; width: 600px;"></div>
+
+

  <script>
-    import L from 'leaflet'

-    export default {
-      onMounted() {
+    import L from 'leaflet'
+    import 'leaflet/dist/leaflet.css'
+    import markerIcon from 'leaflet/dist/images/marker-icon.png'
+    import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+
+
+
+    export default 
+    {
+
+      onMounted() 
+      {
+
        this.carte = L.map('carte').setView([46.603354, 1.888334], 6)

-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          attribution: '© OpenStreetMap'
-        }).addTo(this.carte)
+        L.tileLayer
+        (
+          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+          {
+            attribution: '© OpenStreetMap'
+          }
+        ).addTo(this.carte)
+
+        
+        delete L.Icon.Default.prototype._getIconUrl
+
+        L.Icon.Default.mergeOptions
+        (
+          {
+            iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+            shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+            iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+          }
+        )
+      
+
+        
      },

-      ajouterMarqueurs(formations) {
-        formations.forEach(f => {
-          const lat = f.g_olocalisation_des_formations?.lat
-          const lon = f.g_olocalisation_des_formations?.lon
+      onUpdated() 
+      {

-          if (lat && lon) {
-            L.marker([lat, lon])
-              .addTo(this.carte)
-              .bindPopup(`
+
+        this.carte.eachLayer
+        (
+          layer => 
+          {
+            if (layer instanceof L.Marker) 
+            {
+              this.carte.removeLayer(layer)
+            }
+          }
+        )
+
+        this.props.formations?.forEach
+        (
+          f => 
+          {
+            const lat = f.g_olocalisation_des_formations?.lat
+            const lon = f.g_olocalisation_des_formations?.lon
+            
+            if (lat && lon) 
+            {
+              L.marker([lat, lon]).addTo(this.carte).bindPopup
+              (
+                `
                <b>${f.fil_lib_voe_acc}</b><br>
                ${f.g_ea_lib_vx}<br>
                ${f.ville_etab}
-              `)
+                `
+              )
+            }
          }
-        })
+        )
      }
    }
  </script>
@@ -1,15 +1,29 @@
 <ligne-resultat>
+
+
+
  <div class="ligne-resultat">
+
    <h3>{ props.formation.fil_lib_voe_acc } — { props.formation.g_ea_lib_vx }</h3>
    <p>{ props.formation.ville_etab } ({ props.formation.dep_lib })</p>
    <p>Taux d'accès : { props.formation.taux_acces_ens }%</p>
+
  </div>

+
+
+
  <style>
-    .ligne-resultat {
+
+    .ligne-resultat 
+    {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 5px 0;
    }
+
+
+
  </style>
+
 </ligne-resultat>