viewof affichages= Inputs.checkbox(new Map([["Plan cadastral", "image1"], ["Meuse", "image2"], ["Abbaye Saint-Jacques", "image3"], ["Cloître", "image4"], ["Complexe abbatiale", "image5"], ["Infirmerie des Moines", "image6"], ["Infirmerie", "image7"], ["Logement d'un moine", "image8"], ["Lot non bâti", "image9"], ["Remparts", "image10"], ["Rivelette", "image11"], ["Texte", "image12"], ["Oiseaux", "image13"]]), {value: ["image1","image2","image3","image4","image5","image6","image7","image8","image9","image10","image11"], label: "Afficher les éléments :"});
viewof opacity_meuse = Inputs.range([0, 1], { value: 0.75, step: 0.1, label: "Opacité de la Meuse" })
viewof opacity_rivelette = Inputs.range([0, 1], { value: 0.5, step: 0.1, label: "Opacité de la Rivelette" })
viewof opacity_remparts = Inputs.range([0, 1], { value: 0.5, step: 0.1, label: "Opacité des Remparts" })
viewof opacity_oiseaux = Inputs.range([0, 1], { value: 0.2, step: 0.1, label: "Oiseaux" })
{
//Description des couches
const couches = [
{
id: "image1",
nom: "Plan cadastral",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/fd039a13fba2701436801f003aed5ae40e49b42153e5e80ebcbf0e1169706816e6370cca313556015d146edc44caae3783c6ab95bfcb36fd15e9028d536a2a4c?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Cadastre%25201827.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=QxY5wOXSWdJsBmu-H-4uwF9AWs~xAvmt-CMVNv~HsPaJDCu~Jv0q3wGAvpewxskfi2w1j7fdDhqKu5~Q1k2GxtdMnpbCslpWbExO1NtyF~LufvtAvX-FOe~Gg5xGP9hQ5jeaI9-45rRBD9x7PI-SyJcXcpJr7r88OmJder1NKQpoJP4l8zIT8Kd0Aqo2MsVQliDYwde2tkZTyXubrEiFAVixhqn~UOfmYndwwrBtl6rm8nrc~SmMccynx15AYqSZeDDyCv2wQEeoM4W11ShzyFKO8Ttg49Elv3hWcr2wmxn2f5p8NU~J1-s5BDvGVGaPXnuWotF7Kz14mTi~pNSf0Q__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image2",
nom: "Meuse",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/6e23aacd8f2c9399909fc00721eb257f782f0f55a3b78866b807d000ceb1dc5a697d4a2eb4184824609121b30c490cb6f031efeb36acbc12fcc6e8a54a37277e?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27meuse.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=W62sPde8LnnEFSLMicW2z6Nz2QOvsHZsnVqayPzHu2Xic-eaTFk8N5fd4xdnSS8JnjDH0gtr5pj8netyOVmkTAu2ytYTuZJjZvgpzPDMr9Gw2e1-cLG3lk5mrzoJUpJNp8UF1tKn~Amv8kS3HWWNZrfkTJ8-gFzxzNU~zLPBUz7UmUG-Ip~gaXapx7S11Z2~57iZMudBpq5wVXQ-ZNE5cvYAQaR74Kv8mL4MyvlQfPaz3fTr2P7YKasmaA5yNHIZPIu8QoI5a99M-lywOGGGHSAx7pzdeS6Z89Pce58DUPNaROq25qSjMlhtXxCYOmEwS5YCU617M6W4k0SOTz4L1A__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: opacity_meuse
},
{
id: "image3",
nom: "Abbaye Saint-Jacques",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/b384a858ac38993079c11e1dd9f7cc66a081343b604c3b3e210a0257270d86a12e705bb0b2e76bd289949a0657725d8fd449746872c8f06419a7ce5d27d76393?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Abbaye%2520b%25C3%25A9n%25C3%25A9dictine%2520de%2520Saint-Jacques.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=NZgY~pQ2Fd0BBymOTWGuwD8xL4aMDcpEB3~v1DVw2d8fmUyprZc2tle8n-EHhiZhXDgjqIBNct~0~NdhPrtmyiu-nUmjuvu-8Ku2f~Q6Pp1HFCCj7dp916RXPMgkzRRSN-XJvcxKcajSBRCF79psuuyXQc~-nCIRsnIWtw7Q1VsE12gBfXV6dWTLcUywh4Ys9ptYtj1ooeHM-kl4AQKIK2i~Ey3JQipe3oaPRfgAOqys9Ks7oLKI-Zp6BpDnHkIfl0A1CMJHOKKty-I~ZKkmXilqQI~7C8rrnfkyYab843pOWwk-4twXs6t~wRhdskXI9pccYsy6txscGEOqV-G87w__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image4",
nom: "Cloître",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/1510b1370f4e5cdb571654dcf8db95b4e2ccd127231210e861ce0e78193a6a852a61cab7ebf950b246e56105106df00a1220fa84e22d77b6b4f167a8ddbe0578?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Emprise%2520hypoth%25C3%25A9tique%2520du%2520clo%25C3%25AEtre_1.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=oUBXuSailXL7qdESBMZwwwercIhNR0znGCTTr1s5pUeDMKlgx~kpBlvzAy89Tq~PESk0cPCVYF23GA4XSwDASeGrKQdsJ6nkwKXDN6ZMpKSWHfzR01~gJWF8fRqK22wLTHk0d4VIbyl8Vo5dUAJlWY4pdk7~5U8DLyQLJyYskwartAvXYWkptZx8JFONKWDAzyemvlsORrVtfqb49nhUTkocOmXE6OHzKhJJtOKgpxMRzwKLPcJ-skX2UdP4Q4EdzPRQEHDcsEY2wWnzMdaPBsbK~s7t3VYSTlzdwMvAS~z5it-iUHIWijd~Kl9~W0SHmULS44A9oa3Ba3SrtwNQcw__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image5",
nom: "Complexe abbatiale",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/29504bf3c74e905a23b47616163010404a722acdccdb1504fa597a898797d2f362f68b264755d3ae6a1d3864c29e006100fd6f65b917a03438ba533f1a009278?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Emprise%2520suppos%25C3%25A9e%2520du%2520complexe%2520abbatiale.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=eWZ1iN6Dynsls66ud6Qd97ouPaJ-H93egdx31zVHkrMjKxAcOb8SorWBTKcb~-NwEE0-UtyRLGcLg3fZWB2KoL93KbBuLcVS36AR8pk3SsLTEm0J08c-yfaOCoolHwWG19lXAH3KIcrwEhTeeOoe~bJMnrxa21Oa3SC3~S25Cb~f5Xrm9QuZ5GsPHjHFCHte~DQn4zWmxw36XXM-6p-SUSMDtTbaYUfIrVLEG4qukp-9VGRer8YA4D5XQ1mImkg~k445h2yp6aRpnKuj4UPwRVn3VGIqUizrVxG0mZ3S9fkDjvsuGZ1z06~vWD~GP75XwJVKbhJ7rGiLFJhj-T7RaQ__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image6",
nom: "Infirmerie des Moines",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/60e54b76c30d5ff651fb61b5a814d8425356dfecac99780a57256d482f1522750937fe48da7ea1c92ab67174e0a9fa00a2785c75eff7dd1b7388129c0d4ded30?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Infirmerie%2520des%2520Moines.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=MU0izKtYRuIM-sGGhfYPYQZ8KMjtGkpoJgYqkqAa17RdbbHBzTrbZp3dWU~why3ZIM2Uao3anJctvgfilzDPLEkM0SsOTxpweIPlwgAdsO8QkETurI4O0YmlUoIRQSu7ZGS2uBGuu1CSWoSIcODPBfa~bkmM1RTsouOSBrfCXeMJb2a5ZYmDaI7c2mwreKsT2HXZ6eXq7QZj55ddGWBl~3DV-3jxM7lWujYs-96BhF4y4sAZmQ-orlvih62-QsPOT4Cws4BpOKDqy4G6acVL5G0gufdy-mGRfRFSFJ8FikCSlyqIQmuc9J4wb8RatpZlfP07YIIjh3cTGomVr7-wUg__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image7",
nom: "Infirmerie",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/ce979571b50ca399377c44c70a967e521d313524436a6843677afb9c1fc2ea181f85a09863bd76ff35ccaf3b6e260e3be0fb28eb5eaaf54812547cf0681b7928?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Lot%25201%2520partie%2520orientale%2520destin%25C3%25A9%2520%25C3%25A0%2520l-infirmerie.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=Z4IDshjcsxlZNvd6n0P4uGIf3WNpguVtFO05PV8HpeN60Nv1TKLb2~MxLDmwiKUnfPJNHIER9qxSPGZDU2k0JWjMlQ9i4ROTZ6X5XoO2q6E1PVe5quxlhkVfj0UfQ~KvZYGuVpNCcYLWJ~B2LyjRQR6iDBtCPYcAx8ldCrR8y31onXunwfAG96reIKmseZPmc1e0AKgiizjj03S-sRU3kALkfj1DdBmFqSpWGYEi1jWZR~vOgsToZCXuIEDEySwlfGjue6Zc0PpbTYde2wbTe0y62mM-JOTK26gTDymyiRWtR7QLEqilgLhb8-2T2m-za0zDuMSj7k2sdQlmlOpSsg__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image8",
nom: "Logement d'un moine",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/3d61589ab952f3fd82ad225b57650198107dbb5b4f8c13a086d20a78113a91859c75b07d769ca61b9a85da76712faf21b7cfb8efe8e573cfbd6ffaf188da52aa?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Lot%25202%2520partie%2520occidentale%2520destin%25C3%25A9%2520au%2520logement%2520d-un%2520moine.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=WF6KrDu--kVdZ7lA4SqKY8VwBFALGaVSxxWGHMyIGGKoK31sVQdLQZSBmeAC~fCeFTXMweQtV76Yq7GJaheLsibVoCx~WGeWdrbxXUSbYzBmX2eLNr0sEbi9RljjSWIKNb4VskMlHWOvfFfYA~F3Fxq49SULoUYXmF2AdtXMK2FOofk2p7vAIBwt8xLCMu7f-CHwvoRTzBxsYF7yc5t4zjXlQgXzxbNEWzqLOUNx8~ItdtTDOdQ1mfbY42nwJIgkAuqE-JCbWXqpDGan7nI-AoZ6ZEuhJ1rEFQU3VWJRGUhmBOxmPux4r6t-4Pr~DjP47nXouMUVjcJHATB5Xymczg__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image9",
nom: "Lot non bâti",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/1702faff2cb8468a5438820f2370327c25903c08c236af3bad672b0eee2a85d5786e65704419d342b301252bc50d6597928812510c150d774000c19cba7c5bcd?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Lot%2520terrain%2520non%2520b%25C3%25A2ti.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=Z4pp7wUE7O9KHWsKE7atdfBs9zJJu8KsWLY6uEO-bgUhcg0kajE7aIr6~Ay09I5FsBAGFCj5zLCBoaeiV9zIynIkn8uT~olgIiGsj9HyK4TJGC9voPfDKsRa3dQhMunlSaFHtRvwiDaXoFzl5pQe13JVf55kjrG3rGAEf5AFwUn86ccUBM83v24hstlUyaKhRPdJJrcymKYYGcubF98wutlq86F8lES5FoIv58uM7wjzLiif2LG9lCRfpF70L-h4t-bb3WSHzAfsi~D6-VnDjnxuNZQ1kz1MXvLeQXUdKs8q-f7NFJq4ZOxGKpQLa2J~sR8rFXbbZKP-Mar~jfTBrA__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image10",
nom: "Remparts",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/c2ad18b04f8442ab7c1e52fb29cb8ef910d95c40182c0d6ae3de6c3204a962d1e463cc289d180de6d2da49fd4bb886b4c3c1831e9e616851484641f4fc3052de?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Remparts%2520d-Avroy%2520et%2520de%2520Saint-Jacques.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=QGROCmbZVUGw26jp3fn5ldri6Wdp4ftEEnmjsxgdPHnrCdM3yHZpZUVtK35SuvqGVoJoJ7icPXmX~YmngUfJnrchYJpIQJB15dSU4mCUTMCkYPpRmc89WzaA2rz0Ds8I1ivlPa6t4DrInSz2ILyANCZpUkLczNcw~HtazZ6wu2a9pMpJLAFyQIX8KzeT4cfZg~P81DWKcAAPYVeXbHuwMmFS9xXYg2KeOjl~VRIMigF9mZ2rmdwIS5ipu0g260yT64iN9VsM42MX5~xZcMZcxXFfVhVy0sMn1Q3G45OSUAYSs4lf4mOwZVp~pkiyofBZKrkbFjiJOGbclpEQhKOIPw__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: opacity_remparts //gestion opacité remparts
},
{
id: "image11",
nom: "Rivelette",
visible: true,
src: "https://try-map.static.observableusercontent.com/files/4e1ff25141c19581b7e33e12256d5d3ef3aa37543ca4d65e1df87c4d77e5cffdaec4f981326e135074c99424ef09119d27c986bc43b27d3e3e66b25de4a4f592?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27Rivelette.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=THTz-juO7etM6hs4xgbg5Co2iNPVPHZYYK-W6WvM60LR-rcebC72GOGhsFRSQg58~OPkIkKrnhOxg0u8waduP1awoJxgGyJ3OpzZF74srP2dp8eyrIW8J7xxmCbilL5kk~6urkaOt5bpx4r2Mhu61-ZBSgPVkfq7FwWtmHNA4ro1Dyfr1PJ7bCzXc7GTBONz5sNgqAMnLTX50vNrSP-GxHgFRqRSNLfLj5f~EGvShXBnhEonRV5FTuQUdQUvZiZ1dCpUBUPfsaTH3sAus~-K5qO-Tckwch0t2AzVgmaj6ECkkYW30QsAp~YFFYUzFA-U~gGSpsIYeRilV0OWTTVjNw__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: opacity_rivelette //gestion opacité Rivelette
},
{
id: "image12",
nom: "Texte",
visible: false,
src: "https://try-map.static.observableusercontent.com/files/23f0d3eedc4ee7c2da5e76bf56ee58a0e9e10e53fd0fbb8c4a30497a18ef3ee3338afee9bb722323ce3c6e760b4fb38c0004832797473defe67ae7ca6f9614fe?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27texte_1.png&Expires=1748088000&Key-Pair-Id=APKAIQVKCV7GBKVBR2KA&Signature=OmZNKRteZCeLGxI6-4Wfr7KZYUmd2L-LsQa0GTvWTuq~C-ED-JOv6RdIVbWXJuKr7rOX-RwofWTXXNafZ3d4TJld066OaHlenMQLk8IgNOk7Pv~tFcHmwpBhjLLUzqSuuzjoxQvbpwJeHVYqFLMimRsBu9GFwsnLxAXwv-x6ETEzJ2ecOD48NwmWZB8CjMHCs4Ck0U9R8pbb0ymEjUNU9kgJ9QSrR8Leyzo6AmqZWAnuZdj-1-nsnVOWTHlA~yWfbkgr7ttHJGGkhEdoJipI05DQWu39hi9d7wWrUO3JjfV8J8xYO4rCTqgCRLWNAg5vpt~QnR22hqK78HPsu1SPng__",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: 1
},
{
id: "image13",
nom: "Oiseaux",
visible: false,
src: "https://naturealberta.ca/wp-content/uploads/2025/04/Northern-House-Wren-11-NICK-CARTER-600x658.jpg",
x: 5,
y: 2,
width: 1000,
height: 1000,
opacity: opacity_oiseaux
}
];
//Gestion de l'affichabe des chouches visible
couches.forEach(couche => {
couche.visible = affichages.includes(couche.id);
});
//filtrage des couches visibles
const visibleImages = couches.filter(layer => layer.visible);
//Préparation du tabeau avec les couches visibles
const imageMarks = visibleImages.map(layer =>
Plot.image([layer], {
x: d => d.x,
y: d => d.y,
width: d => d.width,
height: d => d.height,
src: d => d.src,
opacity: d => d.opacity
})
);
//affichage avec PLOT
const plot = Plot.plot({
width: 1000,
height: 1000,
x: {axis: null},
y: {axis: null},
marks: imageMarks
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const targetId = this.getAttribute("href").substring(1);
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
}
});
});
return plot;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
