<p> const listaNormalizada = estadosPermitidos.map(normalizarParaComparar);</p> <p> // Obtener dimensiones del contenedor PADRE (el body del iframe) const container = document.getElementById('map-container'); const width = container.clientWidth; const height = container.clientHeight;</p> <p> const svg = d3.select("#mexico-map") .attr("width", width) .attr("height", height);</p> <p> const tooltip = d3.select("#tooltip");</p> <p> const projection = d3.geoConicConformal() .rotate([102, 0]) .center([0, 24]) .parallels([17.5, 29.5]) .scale(width * 1.5) .translate([width / 2, height / 2]);</p> <p> const path = d3.geoPath().projection(projection); const geojsonUrl = "https://raw.githubusercontent.com/angelnmara/geojson/master/mexicoHigh.json";</p> <p> async function drawMap() { try { const response = await fetch(geojsonUrl); const data = await response.json();</p> <p> const g = svg.append("g");</p> <p> g.selectAll("path") .data(data.features) .enter() .append("path") .attr("d", path) .each(function(d) { const originalName = d.properties.name || d.properties.STATE_NAME; let displayName = originalName; if (originalName === "Distrito Federal") displayName = "Ciudad de México"; if (originalName === "México") displayName = "Estado de México";</p> <p> const esActivo = listaNormalizada.some(item => normalizarParaComparar(displayName).includes(item) || normalizarParaComparar(originalName).includes(item) );</p> <p> const element = d3.select(this);</p> <p> if (esActivo) { const slug = generarSlugUrl(displayName); const url = `https://www.mmiopenings.com/distribuidores/${slug}/`;</p> <p> element.attr("class", "state-active") .on("mouseover", function(event) { d3.select(this).raise(); tooltip.style("display", "block") .html(`<span>${displayName}</span><br /><small style="color:#005F84">Clic para ver distribuidores</small>`); }) .on("mousemove", function(event) { tooltip.style("top", (event.pageY - 60) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }) .on("click", function() { window.open(url, '_blank'); }); } else { element.attr("class", "state-static"); } });</p> <p> } catch (error) { console.error("Error cargando el mapa:", error); document.getElementById('map-container').innerHTML = `</p> <p class="text-red-500 p-4">Error al cargar los datos del mapa.</p> <p>`; } }</p> <p> // Redibujar al cambiar tamaño de la ventana (opcional, pero útil) window.addEventListener('resize', () => { const newWidth = container.clientWidth; const newHeight = container.clientHeight;</p> <p> svg.attr("width", newWidth) .attr("height", newHeight);</p> <p> projection.scale(newWidth * 1.5) .translate([newWidth / 2, newHeight / 2]);</p> <p> svg.selectAll("*").remove(); drawMap(); });</p> <p> drawMap(); </script><br /> </body><br /> </html><br /> ‘ style=”width: 100%; height: 800px; border: none; overflow: hidden;”>
