map = {
// Création d'un conteneur HTML pour la carte avec une hauteur fixée à 800px
const container = yield htl.html`<div style="height: 800px;">`;
// 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('<i style="background:' + getColor(type) + '"></i> ' + type);
});
div.innerHTML = labels.join("<br>");
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 =
`<img src="${imageUrl}" alt="Image" style= "height:100%;"><br>` +
`<div style="line-height:1.5;">` +
"<h1>" +
feature.properties.Nom +
"</h1>" +
"<b>Type:</b> " +
feature.properties.Type;
// Affichage conditionnel du prix si le type n'est pas 'Sauvage'
if (feature.properties.Type !== "Sauvage") {
popupContent +=
"<br><b>Prix:</b> " +
(feature.properties.Prix === "0"
? "Gratuit"
: feature.properties.Prix + " €");
}
popupContent +=
"<br><br><b>Note:</b> " + feature.properties.Note + "</div>";
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`
<style>
path.aquarelle-style-marker.leaflet-interactive {
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
}
path.aquarelle-style-marker.leaflet-interactive:hover {
filter: brightness(120%);
}
.legend {
padding: 6px 8px;
font: 14px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
line-height: 24px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>`;
document.head.append(style);
}
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.
