31:T106d,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; }32:T438,viewof inputs = { const d3Wrapper = d3 .create("div") .style("display", "flex") .style("gap", "5px") .style("justify-content", "center"); const wrapper = htl.html`

${d3Wrapper}

`; let nbClicks = 0; wrapper.value = nbClicks; let defaultText = "Bonjour !"; const button = d3Wrapper .append("button") .text(defaultText) .on("click", (e) => { button.text(button.text() + " " + ++nbClicks); wrapper.value = nbClicks; p.text(pText + nbClicks + " fois"); wrapper.dispatchEvent(new Event("input", { bubbles: true })); }); let pText = "Je suis aligné à droite du bouton cliqué "; const p = d3Wrapper.append("p").text(pText + nbClicks + " fois"); const resetButton = d3Wrapper .append("button") .text("reset") .on("click", (e) => { nbClicks = 0; wrapper.value = nbClicks; button.text(defaultText); p.text(pText + nbClicks + " fois"); wrapper.dispatchEvent(new Event("input", { bubbles: true })); }); return wrapper; }33:[] 2f:{"title":"Layout manuel et interaction dans une cellule","cells":[{"id":0,"value":"# Layout manuel et interaction dans une cellule\n---","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"## 1er exemple avec htl.html\\`...\\`","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"inputMap","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"## 2eme exemple avec d3","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"inputs","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}