function map_interactive_merged(d3, proj4, france, stations, width, height, selectedDate, zoom1, selectMode = false, uniques) { if (!france || !france.features) { console.error("Données France invalides ou mal chargées"); return; } const mapWidth = width; const mapHeight = height; let data = stations.filter(d => d.LbLongParamètre === "Température de l'Eau").filter(d => d.RsAna <= 50); const RsAnacolors = data .filter(d => d.RsAna !== null && d.RsAna !== undefined) .map(d => parseFloat(d.RsAna)); const colorScale = d3.scaleSequential(d3.interpolateInferno) .domain(d3.extent(RsAnacolors.length ? RsAnacolors : [0, 1])); let filteredStations = data.filter(d => d.DatePrel === selectedDate); // Définition de la projection const lambert93 = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; //const projection = d3.geoMercator().fitSize([width, height], france); const projection = d3.geoMercator() .center([2.5, 48.6]) .scale(zoom1) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); // Création du conteneur SVG const svgContainer = d3.create("div").style("position", "relative"); const svgElement = svgContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); // Tooltip à l'intérieur du conteneur const tooltip = svgContainer.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none") .style("pointer-events", "none"); let selectedStations = []; let selectedStationsIds = new Set(); // Garder la sélection quand la date change svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let lockedTooltip = false; const mapGroup = svgElement.append('g').attr("class", "topg"); const title = svgElement.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .text("Carte des stations de mesure de la qualité de l'eau de la seine"); // Dessin du fond de carte mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', '#ccc') .style('stroke', 'white'); // // Filtrage des stations pour la date sélectionnée // stations = stations.filter(d => d.DatePrel === selectedDate); let stationsWithCoords = data.map(d => { const [lon, lat] = proj4(lambert93, "WGS84", [d.CoordXStationMesureEauxSurface, d.CoordYStationMesureEauxSurface]); const projected = projection([lon, lat]); const stationData = filteredStations.find(s => s.CdStationMesureEauxSurface === d.CdStationMesureEauxSurface); const rsAnaForDate = stationData ? stationData.RsAna : null; return { ...d, x: projected[0], y: projected[1] , RsAnaForDate: rsAnaForDate }; }); const specialPoints = [ { name: "Source-Seine", x: 826900, y: 6711200 }, { name: "Le Havre", x: 490389, y: 6935091 } ]; specialPoints.forEach(point => { const [lon, lat] = proj4(lambert93, "WGS84", [point.x, point.y]); const projected = projection([lon, lat]); point.x = projected[0]; point.y = projected[1]; }); let links = []; for (let i = 0; i < stationsWithCoords.length - 1; i++) { links.push({ from: stationsWithCoords[i], to: stationsWithCoords[i + 1] }); } const legendWidth = 15; const legendHeight = 100; const legendPadding = 10; // Calcul de la position de la légende en fonction de la taille du conteneur const legendX = Math.min(mapWidth - legendWidth - legendPadding - 10, mapWidth * 0.995 - 10); const legendY = Math.min(mapHeight - legendHeight - legendPadding, mapHeight * 0.7); const legend = svgElement.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .style("font-size", `${mapWidth * 0.008}px`); // Taille dynamique const temperatureValues = stationsWithCoords.map(d => d.RsAna); mapGroup.selectAll("line") .data(links) .enter().append("line") .attr("x1", d => d.from.x) .attr("y1", d => d.from.y) .attr("x2", d => d.to.x) .attr("y2", d => d.to.y) .attr("stroke", d => (d.from.RsAnaForDate !== null ? colorScale(d.from.RsAnaForDate) : "#999")) .attr("stroke-width", 2); // Ajout des points de mesure mapGroup.selectAll("circle") .data(stationsWithCoords) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 4) .attr("fill", d => uniques.includes(d.LbStationMesureEauxSurface) ? "blue" : (d.RsAnaForDate !== null ? colorScale(d.RsAnaForDate) : "gray")) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { d3.select(this).attr("r", 6); if (!lockedTooltip) { tooltip.style("display", "block") .html(`${d.LbStationMesureEauxSurface}
Température: ${d.RsAnaForDate !== null ? d.RsAnaForDate.toFixed(2) + " " + d.SymUniteMesure : "Pas de données"}
pH: ${d.RsAna_pH !== null ? d.RsAna_pH.toFixed(2) + " " : "Pas de données"}
Oxygène Dissous: ${d.RsAna_Ox !== null ? d.RsAna_Ox.toFixed(2) + " " + d.SymUniteMesure_Ox : "Pas de données"}
Carbone Organique: ${d.RsAna_C !== null ? d.RsAna_C.toFixed(2) + " " + d.SymUniteMesure_C : "Pas de données"}
Saturation Oxygène: ${d.RsAna_sat_O !== null ? d.RsAna_sat_O.toFixed(2) + " " + d.SymUniteMesure_sat_O : "Pas de données"}
Phosphates: ${d.RsAna_phosphate !== null ? d.RsAna_phosphate.toFixed(2) + " " + d.SymUniteMesure_phosphate : "Pas de données"}
Nitrites: ${d.RsAna_nitrite !== null ? d.RsAna_nitrite.toFixed(2) + " " + d.SymUniteMesure_nitrite : "Pas de données"}
Nitrates: ${d.RsAna_nitrate !== null ? d.RsAna_nitrate.toFixed(2) + " " + d.SymUniteMesure_nitrate : "Pas de données"}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mousemove", function (event) { if (!lockedTooltip) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); adjustTooltipPosition(tooltip, svgContainer.node().getBoundingClientRect()); } }) .on("mouseout", function () { if (!lockedTooltip) { d3.select(this).attr("r", 4); tooltip.style("display", "none"); }}) .on("click", function (event, d) { lockedTooltip = true; tooltip.style("display", "block") .html("" + d.LbStationMesureEauxSurface + "
" + "Température: " + (d.RsAnaForDate !== null ? d.RsAnaForDate + " " + d.SymUniteMesure : "Pas de données")) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }); d3.select("body").on("click", function (event) { if (!event.target.closest(".tooltip")) { lockedTooltip = false; tooltip.style("display", "none"); } }); d3.select("#playButton").on("click", function () { lockedTooltip = false; tooltip.style("display", "none"); selectedStationsIds = new Set(selectedStations.map(d => d.CdStationMesureEauxSurface)); // stocker les stations sélectionnées }); mapGroup.selectAll("circle.special") .data(specialPoints) .enter().append("circle") .attr("class", "special") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 1); //.on("mouseover", function (event, d) { //tooltip.style("display", "block") //.html(`${d.name}`) //.style("left", (event.pageX + 10) + "px") //.style("top", (event.pageY - 10) + "px"); //}) //.on("mouseout", function () { // tooltip.style("display", "none"); // }); // Ajout des étiquettes pour les points spéciaux mapGroup.selectAll("text.special-label") .data(specialPoints) .enter().append("text") .attr("class", "special-label") .attr("x", d => d.x + 10) // Décalage pour ne pas chevaucher le point .attr("y", d => d.y - 10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text(d => d.name); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); // Selection Mode if (selectMode) { let rectSelection = svgElement.append("rect") .attr("fill", "rgba(0,0,255,0.2)") .attr("stroke", "blue") .attr("stroke-dasharray", "4,4") .style("visibility", "visible"); let startX, startY; svgElement.on("mousedown", function (event) { const [startX, startY] = d3.pointer(event, svgElement.node()); rectSelection .attr("x", startX) .attr("y", startY) .attr("width", 0) .attr("height", 0) .style("visibility", "visible"); svgElement.on("mousemove", function (event) { const [endX, endY] = d3.pointer(event, svgElement.node()); rectSelection .attr("x", Math.min(startX, endX)) .attr("y", Math.min(startY, endY)) .attr("width", Math.abs(endX - startX)) .attr("height", Math.abs(endY - startY)); }); svgElement.on("mouseup", function () { svgElement.on("mousemove", null); svgElement.on("mouseup", null); let rectX = parseFloat(rectSelection.attr("x")); let rectY = parseFloat(rectSelection.attr("y")); let rectWidth = parseFloat(rectSelection.attr("width")); let rectHeight = parseFloat(rectSelection.attr("height")); selectedStations = stationsWithCoords.filter(d => d.x >= rectX && d.x <= rectX + rectWidth && d.y >= rectY && d.y <= rectY + rectHeight ); rectSelection.style("visibility", "hidden"); updateSelectedList(); selectedStations = stationsWithCoords.filter(d => selectedStationsIds.has(d.CdStationMesureEauxSurface)); renderSelectedStations(); }); }); function updateSelectedList() { d3.select("#selected-stations").remove(); svgElement.on("selected", selectedStations); // Update selectedStations in svgElement let stationList = svgElement.append("g") .attr("id", "selected-stations") .attr("transform", "translate(" + (width - 120) + ", 40)"); stationList.append("text") .text("Stations sélectionnées :") .attr("font-size", "12px") .attr("font-weight", "bold"); let distinctStations = Array.from(new Set(selectedStations.map(d => d.LbStationMesureEauxSurface))) .map(name => selectedStations.find(d => d.LbStationMesureEauxSurface === name)); stationList.selectAll("text.station") .data(distinctStations) .enter().append("text") .attr("class", "station") .attr("y", (d, i) => 20 + i * 15) .attr("font-size", "12px") .text(d => d.LbStationMesureEauxSurface); // Returning the svg element with accessible selectedStations mutable uniques = [...new Set(svgElement.node().__on[0].value.map(station => station.LbStationMesureEauxSurface))]; } function renderSelectedStations() { mapGroup.selectAll("circle.selected").remove(); mapGroup.selectAll("circle.selected") .data(selectedStations) .enter().append("circle") .attr("class", "selected") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 6) .attr("fill", "blue") .attr("stroke", "black") .attr("stroke-width", 0.5); } } function adjustTooltipPosition(tooltip, containerBounds) { const tooltipBounds = tooltip.node().getBoundingClientRect(); if (tooltipBounds.right > containerBounds.right) { tooltip.style("left", (parseFloat(tooltip.style("left")) - (tooltipBounds.right - containerBounds.right) - 10) + "px"); } if (tooltipBounds.bottom > containerBounds.bottom) { tooltip.style("top", (parseFloat(tooltip.style("top")) - (tooltipBounds.bottom - containerBounds.bottom) - 10) + "px"); } if (tooltipBounds.left < containerBounds.left) { tooltip.style("left", (containerBounds.left + 10) + "px"); } if (tooltipBounds.top < containerBounds.top) { tooltip.style("top", (containerBounds.top + 10) + "px"); } } return svgContainer.node(); }