Besoins d'aide sur une map Leaflet

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Kywi
Messages : 1
Enregistré le : 01 févr. 2023, 09:27

Besoins d'aide sur une map Leaflet

Message par Kywi » 01 févr. 2023, 09:29

Bonjour,

Je travaille actuellement sur un site web immobilier. J'utilise leaflet pour géolocaliser les propriétés sur une carte.
Voici le code qui affiche les marqueurs sur la carte (J'utilise Webflow comme CMS pour faire le site internet)

Code : Tout sélectionner

<script>
window.GeoComponents = {
  maps2d: [],
  init2d: function () {
    // Clean up existing maps, in case this is reinitializing
    window.GeoComponents.maps2d.forEach(function (map) {
      map.remove();
    });
    window.GeoComponents.maps2d = [];
    // Set up Leaflet for each [data-geo-map]
    Array.from(document.querySelectorAll('[data-geo-map]')).forEach(function (mapEl) {
      const mapId = mapEl.getAttribute('data-geo-map');
      const map = L.map(mapEl);
      window.GeoComponents.maps2d.push(map);

      // Mise en place de la map
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);

      // Mise en place des markers
      const allCoordinates = [];
      const markers = [];
      Array.from(document.querySelectorAll('[data-geo-place="' + mapId + '"]')).forEach(function (
        placeEl
      ) {
        const coordinates = [
          placeEl.value.coordinates.latitude,
          placeEl.value.coordinates.longitude,
        ];
        allCoordinates.push(coordinates);
        const marker = L.marker(coordinates).addTo(map).bindPopup(placeEl.innerHTML);
        markers.push(marker);

        // Au clic, montre le marker et sa popup sur la map
        function clickPlace() {
          map.panTo(coordinates, {
            animate: true,
            duration: 0.5,
          });
          // Close other popups
          markers.forEach(function (otherMarker) {
            otherMarker.closePopup();
          });
          marker.openPopup();
        }
        placeEl.addEventListener('click', clickPlace);
        map.on('unload', function () {
          placeEl.removeEventListener('click', clickPlace);
        });
      });
      // Zoom to the markers added
      map.fitBounds(L.latLngBounds(allCoordinates));
    });
  },
};

window.addEventListener('DOMContentLoaded', window.GeoComponents.init2d);

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {
    console.log('Filtres CMS Finsweet chargés avec succès');

    // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
    const [filterInstance] = filterInstances;

    // The `renderitems` event runs whenever the list renders items after filtering.
    filterInstance.listInstance.on('renderitems', (renderedItems) => {
      const itemsOnScreen = Array.from(renderedItems);
      if (itemsOnScreen.length === 0) {
        console.log('Nouveau filtrage');
        console.log('Pas de nouvelles annonces.');
        const MapOnScreen = document.querySelector('.annonces_map');

        // ajoute ici une fonction pour cacher la map lorsque les résultats sont vides.
      } else {
        console.log('Nouveau filtrage');
        console.log('Plusieurs annonces.');

        //Creation des latitudes/longitude selon les annonces
        const places = Array.from(document.querySelectorAll('[data-geo-place]'));
        places.forEach(function (el) {
          const elCoords = el
            .querySelector('[data-geo-coordinates]')
            .textContent.split(',')
            .map(Number);
          const value = {
            coordinates: {
              latitude: elCoords[0],
              longitude: elCoords[1],
            },
          };
          el.value = value;
          // Just for debug(?)
          el.setAttribute('data-geo-value', JSON.stringify(value));
        });
        //Chargement de la Map
        window.GeoComponents.init2d();
      }
    });
  },
]);

</script> 

sur mon CMS Webflow j'applique 3 attributs à mes éléments HTLM

Un "data-geo-map = 2" pour cibler le div qui contiendra la carte.
Un "data-geo-place = 2" pour la pop-up à afficher sur la carte
Un élément "data-geo-coordinates=1" qui contient la latitude et la longitude pour placer les marqueurs sur la carte.

Mon problème est que je voudrais créer un filtre qui filtre en fonction d'une distance en KM d'une ville sélectionnée. Et qui fait un cercle autour de cette même propriété.

Exemple si je choisis la ville de LA avec un rayon de 20km autour de LA je veux afficher les marqueurs et les annonces immobilières qui sont dans le cercle et pas en dehors.

Voici le lien de mon site en lecture seule ou vous pourrez consulter toutes les informations.

Read-link : https://preview.webflow.com/preview/api ... ow=preview

Je vous remercie d'avance de m'aider à apporter

Avatar du membre
webmaster
Administrateur du site
Messages : 562
Enregistré le : 28 févr. 2017, 15:19

Re: Besoins d'aide sur une map Leaflet

Message par webmaster » 01 févr. 2023, 10:29

Bonjour

La carte ne s'affiche pas sur le lien de démo

Je n'utilise pas leaflet pour les cartes. J'ai pris l'habitude d'utiliser gmaps et cela fonctionne pas mal.
Par exemple mon site de gestion de rucher en ligne :
https://www.mellifere.com/apiculture/ru ... e=588972ff
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Miaksoa
Messages : 2
Enregistré le : 09 nov. 2023, 09:07

Re: Besoins d'aide sur une map Leaflet

Message par Miaksoa » 09 nov. 2023, 09:08

Determine the circle that surrounds the chosen city's coordinates. Then, utilize itdamnto filter and show only markers and advertisements that are inside the designated radius. ragdoll archers

Répondre