2a:null 2b:["$","title",null,{"children":"enquête quali toilettes Vesoul | Erwan Vinot | Observable"}] 30:T1169,map = { // Création d'un conteneur HTML pour la carte avec une hauteur fixée à 800px const container = yield htl.html`

`; // Initialisation de la carte Leaflet en définissant le point central et le niveau de zoom const map = L.map(container).setView([47.6245, 6.1443], 14); // Ajout de la couche de tuiles (tiles) à la carte, avec l'URL spécifiée et un attribut de crédit L.tileLayer( "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg", { attribution: "Erwan Vinot - 2024" } ).addTo(map); // Ajout d'une échelle L.control.scale().addTo(map); // Fonction pour déterminer la couleur des marqueurs en fonction de leur type function getColor(type) { switch (type) { case "Public": return "green"; case "Sauvage": return "yellow"; case "Disparu": return "gray"; case "Public - HS": return "red"; case "Privé - libre service": return "blue"; default: return "black"; } } // Ajout d'une légende const legend = L.control({ position: "bottomright" }); legend.onAdd = function (map) { var div = L.DomUtil.create("div", "info legend"), types = [ "Public", "Sauvage", "Disparu", "Public - HS", "Privé - libre service" ], labels = []; // Générer un label avec une couleur carrée pour chaque type de point types.forEach(function (type) { labels.push(' ' + type); }); div.innerHTML = labels.join("
"); return div; }; legend.addTo(map); // Chargement et ajout des données GeoJSON à la carte fetch( "https://raw.githubusercontent.com/erw-1/observable-dump/main/wc/wc.geojson" ) .then((response) => response.json()) // Transformation de la réponse en JSON .then((data) => { L.geoJson(data, { // Création d'une couche GeoJSON avec les données pointToLayer: function (feature, latlng) { // Personnalisation de l'apparence des points return L.circleMarker(latlng, { radius: 8, fillColor: getColor(feature.properties.Type), color: "#555", weight: 1, opacity: 1, fillOpacity: 0.8, className: "aquarelle-style-marker" }); }, onEachFeature: function (feature, layer) { // Ajout d'un popup pour chaque entité var imageId = feature.properties.id + 1; var imageUrl = `https://raw.githubusercontent.com/erw-1/observable-dump/main/wc/img/${imageId}.jpg`; // Contenu du popup, y compris l'image et d'autres informations sur le point var popupContent = `

` + `

` + "

" + feature.properties.Nom + "

" + "Type: " + feature.properties.Type; // Affichage conditionnel du prix si le type n'est pas 'Sauvage' if (feature.properties.Type !== "Sauvage") { popupContent += "
Prix: " + (feature.properties.Prix === "0" ? "Gratuit" : feature.properties.Prix + " €"); } popupContent += "

Note: " + feature.properties.Note + "

"; layer.bindPopup(popupContent); // Association du popup avec le marqueur } }).addTo(map); // Ajout de la couche GeoJSON à la carte }); // Injection de CSS pour les marqueurs directement dans le code JavaScript const style = htl.html` `; document.head.append(style); }31:[{"id":"a2a052937df698c74a270d5a55cf516c32f70d8e9d83be3765a4d6715dbaa1d5038655556d2af6eae77fee3797fa967a13e9f6d234ac298fafb46c998b9ef998","href":"https://static.observableusercontent.com/files/a2a052937df698c74a270d5a55cf516c32f70d8e9d83be3765a4d6715dbaa1d5038655556d2af6eae77fee3797fa967a13e9f6d234ac298fafb46c998b9ef998","name":"image@1.png","type":"image/png","lastModified":1701094736223.823,"size":6489847}] 2e:{"id":"e21d8aa505ca44dc","slug":"wc","title":"enquête quali toilettes Vesoul","thumbnail":"700c59440c422309c7fd59b3c94bc0cc0510612b82bf2a75030b593f11dbc202","access_level":"public","create_time":"$D2023-11-27T14:18:56.223Z","update_time":"$D2024-01-12T14:57:28.378Z","view_time":null,"first_public_time":"$D2023-11-27T14:18:56.223Z","fork":{"id":"662080314eb2cb2c","slug":"blog-post","title":"Blog Post","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d566c5eefde45f57","login":"ve","name":"Erwan Vinot","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":"starter_2024"},"version":223,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cbd4af09aa30bccc","login":"ve","name":"Erwan Vinot","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null}],"members":[{"type":"individual","id":"cbd4af09aa30bccc","login":"ve","name":"Erwan Vinot","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"enquête quali toilettes Vesoul","cells":[{"id":0,"value":"# enquête quali toilettes Vesoul\n## ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"## Carte interactive de synthèse de observations terrain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"Vous pouvez cliquer sur les points pour plus de détails","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"