I would like to link a slider to a Leaflet map on Observable, but I am unable to do so. Here is the link to my project.
this is my code :
map18 = {
const container = html`<div style="height: 600px;"></div>`;
const map = L.map(container).setView([50.439255, 5.5330], 18.5);
const googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: 'Google satellite'
}).addTo(map);
// Multiplier la vitesse de déplacement par 3
moveVectors.forEach(vector => {
vector.vx *= 4;
vector.vy *= 4;
});
// Fonction pour mettre à jour les coordonnées des points
function updatePoints() {
for (let i = 0; i < coordonnee.length; i++) {
const point = coordonnee[i];
const distanceX = point.Lon_fin - point.Lon_in;
const distanceY = point.Lat_fin - point.Lat_in;
// Si le point est déjà à sa destination finale, passer au point suivant
if (point.Lon_in === point.Lon_fin && point.Lat_in === point.Lat_fin) {
continue;
}
// Mettre à jour les coordonnées du point dans la direction du vecteur
if (Math.abs(distanceX) > Math.abs(moveVectors[i].vx)) {
point.Lon_in += moveVectors[i].vx;
}
if (Math.abs(distanceY) > Math.abs(moveVectors[i].vy)) {
point.Lat_in += moveVectors[i].vy;
}
// Si le point est arrivé à sa destination, le positionner directement à sa position finale
if (Math.abs(distanceX) <= Math.abs(moveVectors[i].vx) && Math.abs(distanceY) <= Math.abs(moveVectors[i].vy)) {
point.Lon_in = point.Lon_fin;
point.Lat_in = point.Lat_fin;
}
}
}
// Mettre à jour les coordonnées des points et les afficher sur la carte jusqu'à ce qu'ils atteignent leur destination finale
function updateAndShowPoints() {
updatePoints();
map.eachLayer(function(layer) {
if (layer instanceof L.CircleMarker) {
layer.remove();
}
});
for (let i = 0; i < coordonnee.length; i++) {
const point = coordonnee[i];
// Récupérer la distance depuis la colonne "Dist" des données coordonnée
const distance = point.Dist;
// Déterminer la couleur en fonction de la distance
const color = getColor1(distance);
// Récupérer la taille du point en fonction de la colonne "Axe b (mm)" et la diviser par 8 pour réduire la taille
const size = Math.max(point['Axe b (mm)'] / 8, 2); // La taille minimale du point est de 2 pixels
L.circleMarker([point.Lat_in, point.Lon_in], { radius: size / 4, color: color }).addTo(map); // Divisez par 4 pour réduire la taille
}
// Vérifier si tous les points ont atteint leur destination finale
const allPointsReachedDestination = coordonnee.every(point => point.Lon_in === point.Lon_fin && point.Lat_in === point.Lat_fin);
// Si tous les points ont atteint leur destination, arrêter la boucle de mise à jour
if (allPointsReachedDestination) {
clearInterval(intervalId);
}
}
// Ajouter un écouteur d'événements sur le slider pour mettre à jour les points lorsque sa valeur change
form.option2.oninput = updateAndShowPoints;
// Appeler la fonction de mise à jour et d'affichage des points périodiquement
const intervalId = setInterval(updateAndShowPoints, 1000); // Mettez à jour toutes les secondes
// Créer la légende de la taille des symboles
const sizeLegend = createSymbolSizeLegend(2, 10); // Taille minimale : 2, Taille maximale : 10
// Ajouter la légende à l'élément body ou à tout autre conteneur HTML de votre choix
document.body.appendChild(sizeLegend);
// Créer la légende continue
const legend = createContinuousLegend(getColor1, minValue, maxValue, numIntervals);
// Ajouter la légende à la carte
//legend.addTo(map);
// Ajouter une échelle à la carte
L.control.scale().addTo(map);
return container;
}
the error is : map18 = TypeError: Cannot create property ‘oninput’ on number ‘65’. 65 is the nimber in the slider…