92 lines
2.4 KiB
Plaintext
92 lines
2.4 KiB
Plaintext
|
<maMap>
|
||
|
|
<script>
|
||
|
|
export default function maMap() {
|
||
|
|
let markers = [];
|
||
|
|
let map;
|
||
|
|
|
||
|
|
return {
|
||
|
|
onBeforeMount(props, state) {
|
||
|
|
// création de la carte Leaflet
|
||
|
|
map = L.map("map");
|
||
|
|
|
||
|
|
map.fitWorld();
|
||
|
|
|
||
|
|
// ajout d'un calque de tuiles OpenStreetMap
|
||
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||
|
|
attribution: "© OpenStreetMap contributors",
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
// écouteur pour l'événement "moveend"
|
||
|
|
map.on("moveend", this.onMoveEnd);
|
||
|
|
},
|
||
|
|
|
||
|
|
onUpdated() {
|
||
|
|
if (this.props.records) {
|
||
|
|
this.removeMarks();
|
||
|
|
this.afficheMarks(this.getLoc(this.props.records));
|
||
|
|
this.onMoveEnd();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
removeMarks() {
|
||
|
|
markers.forEach((marker) => {
|
||
|
|
marker.remove();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
afficheMarks(loc) {
|
||
|
|
loc.forEach((coord) => {
|
||
|
|
var marker = L.marker([coord[0], coord[1]]).addTo(map);
|
||
|
|
markers.push(marker);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
getVisibleMarkers() {
|
||
|
|
let visibleMarkers = [];
|
||
|
|
|
||
|
|
map.eachLayer((layer) => {
|
||
|
|
if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {
|
||
|
|
visibleMarkers.push(layer);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return visibleMarkers;
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
getLoc(records) {
|
||
|
|
let loc = [];
|
||
|
|
records.forEach((formation) => {
|
||
|
|
loc.push(formation.fields.g_olocalisation_des_formations);
|
||
|
|
});
|
||
|
|
return loc;
|
||
|
|
},
|
||
|
|
|
||
|
|
// méthode pour gérer l'événement "moveend"
|
||
|
|
onMoveEnd() {
|
||
|
|
let visibleMarkers = this.getVisibleMarkers();
|
||
|
|
|
||
|
|
// filtrer les éléments du tableau records qui ont une localisation correspondant à un marker visible
|
||
|
|
let recordsWithLoc = this.props.records.filter((record) => {
|
||
|
|
let loc = record.fields.g_olocalisation_des_formations;
|
||
|
|
for (let marker of visibleMarkers) {
|
||
|
|
if (marker.getLatLng().equals(L.latLng(loc[0], loc[1]))) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
let fin=[];
|
||
|
|
|
||
|
|
recordsWithLoc.forEach((forma) => {
|
||
|
|
fin.push(forma.recordid)
|
||
|
|
})
|
||
|
|
|
||
|
|
this.props.modifyByLoc(fin);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</maMap>
|