Bonjour, je cherche à creer un site au fonctionnement similaire à RbNb (sur la forme seulement)

je reviens vers vous concernant mon objectif qui consiste à ordonner des éléments de ma grille (ceux qui apparaissent sur ma carte sous forme de popup et sur la gauche de ma carte sous forme détaillée) en fonction des coordonnées du centre de ma carte.

J'ai (avec un peu beaucoup d'aide) ecrit un code qui me permet normalement de trier les éléments de ma grille en fonction de leur distance avec le centre de ma carte.


let Distance = (lat1,long1,lat2,long2) => {

  lat1 = parseFloat(lat1);
  lat2 = parseFloat(lat2);

  long1 = parseFloat(long1);
  long2 = parseFloat(long2);

  if(lat1 != lat2 || long1 != long2)
  {
      let dist;

      lat1 = Math.PI * (lat1 / 180);
      lat2 = Math.PI * (lat2 / 180);

      theta = Math.PI * ((long1-long2) / 180);

      dist = Math.acos((Math.sin(lat1) * Math.sin(lat2) ) + (Math.cos(lat1) * Math.cos(lat2) * Math.cos(theta) ) ) ;

      dist = dist > 1 ? 1 : dist;

      return ((dist * (180/Math.PI) ) * (dist * 60 * 1.1515 ) ) * 0.8684;
  }
  else
      return 0;
};

let Organise = (data) => {

  let tmp;

  let base = [];

  document.querySelectorAll("#grid .item").forEach(item => base.push(item) );

  // on  va faire un tri par permutation

  for(i = 0; i < base.length;i++)
  {
      for(i2 = i; i2 < base.length; i2++)
      {
          // on compare lles distances entre l'element i et i2
          if(Distance(base[i].dataset.lat,base[i].dataset.long,data.lat,data.long) > Distance(base[i2].dataset.lat,base[i2].dataset.long,data.lat,data.long) )
          {
              tmp = base[i];

              base[i] = base[i2];
              base[i2] = tmp;
          }
      }
  }

  for(i = 0; i < base.length; i++)
  {
      Object.assign(base[i].style,{
          order : i - base.length
      });
  }
};

Ce que je veux

j'aimerais pouvoir classer les éléments de ma grille sur la base de cette formule lorsque ma carte arrete de bouger (moveend).

Ce que j'obtiens

Je n'arrive pas à l'intégrer dans mon projet de façon fonctionnelle. Je sais qu'il faudrait aussi que j'utilise la méthode getCenter mais étant encore assez faible avec le JS je ne vois pas vraiment comment faire. Pourriez-vous m'aider SVP? Je précise que dans le cadre de mon projet, je suis vraiment bloqué du coup car sans cette fonctionnalité il ne sera pas trés pertinent.

Aucune réponse