viewof inputMap = { let mapDivLeft = htl.html`

`; let mapDivRight = htl.html`

`; // Le rendu de la valeur de retour de la cellule (accessible via 'viewof', cf https://observablehq.com/@observablehq/views) let wrapperDiv = htl.html`

${mapDivLeft} ${mapDivRight}

`; // La valeur retournée par la cellule hors "viewof" wrapperDiv.value = { left: { markers: [], coords: [] }, right: { markers: [], coords: [] } }; const mapLeft = L.map(mapDivLeft).setView([38.553, 15.048], 5); const mapRight = L.map(mapDivRight).setView([38.553, 15.048], 5); L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors, © CARTO", maxZoom: 18 } ).addTo(mapLeft); L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors, © CARTO", maxZoom: 18 } ).addTo(mapRight); mapLeft.on("click", function (e) { const { lat, lng } = e.latlng; // Ajouter un nouveau marqueur const newMarker = L.marker([lat, lng]).addTo(mapLeft); // Ajouter le marqueur et ses coordonnées // Vincent: création de nouveaux tableaux plutôt que l'appel à push pour que les cellules se mettent à jour wrapperDiv.value = { left: { markers: [...wrapperDiv.value.left.markers, newMarker], coords: [...wrapperDiv.value.left.coords, { lat, lng }] }, right: { markers: [...wrapperDiv.value.right.markers], coords: [...wrapperDiv.value.right.coords] } }; // Vérifier si le nombre de marqueurs dépasse 5 if (wrapperDiv.value.left.markers.length > 5) { // Retirer le plus ancien marqueur de la carte const oldestMarker = wrapperDiv.value.left.markers.shift(); mapLeft.removeLayer(oldestMarker); wrapperDiv.value.left.coords.shift(); wrapperDiv.value = { left: { markers: [...wrapperDiv.value.left.markers], coords: [...wrapperDiv.value.left.coords] }, right: { markers: [...wrapperDiv.value.right.markers], coords: [...wrapperDiv.value.right.coords] } }; } // Dispatch d'un event pour que les autres cellules du notebook réagissent au changement de valeur de la cellule mapDivLeft.dispatchEvent(new Event("input", { bubbles: true })); }); mapRight.on("click", function (e) { const { lat, lng } = e.latlng; // Ajouter un nouveau marqueur const newMarker = L.marker([lat, lng]).addTo(mapRight); // Ajouter le marqueur et ses coordonnées // Vincent: création de nouveaux tableaux plutôt que l'appel à push pour que les cellules se mettent à jour wrapperDiv.value = { left: { markers: [...wrapperDiv.value.left.markers], coords: [...wrapperDiv.value.left.coords] }, right: { markers: [...wrapperDiv.value.right.markers, newMarker], coords: [...wrapperDiv.value.right.coords, { lat, lng }] } }; // Vérifier si le nombre de marqueurs dépasse 5 if (wrapperDiv.value.right.markers.length > 5) { // Retirer le plus ancien marqueur de la carte const oldestMarker = wrapperDiv.value.right.markers.shift(); mapRight.removeLayer(oldestMarker); wrapperDiv.value.right.coords.shift(); wrapperDiv.value = { left: { markers: [...wrapperDiv.value.left.markers], coords: [...wrapperDiv.value.left.coords] }, right: { markers: [...wrapperDiv.value.right.markers], coords: [...wrapperDiv.value.right.coords] } }; } mapDivRight.dispatchEvent(new Event("input", { bubbles: true })); }); return wrapperDiv; }