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:
'© <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