viewof interfazComparar = { const contenedor = document.createElement("div"); contenedor.style.position = "absolute"; contenedor.style.top = "10px"; contenedor.style.left = "50%"; contenedor.style.transform = "translateX(-50%)"; contenedor.style.backgroundColor = "#f9f9f9"; contenedor.style.border = "2px solid #01f3b3"; contenedor.style.padding = "10px"; contenedor.style.borderRadius = "8px"; contenedor.style.boxShadow = "0px 4px 8px rgba(0, 0, 0, 0.1)"; contenedor.style.zIndex = "1001"; contenedor.style.fontFamily = "Helvetica, Arial, sans-serif"; contenedor.style.display = "flex"; contenedor.style.flexDirection = "column"; contenedor.style.alignItems = "center"; const titulo = document.createElement("h2"); titulo.innerText = "Compara el precio del m2 entre dos estaciones"; titulo.style.fontFamily = "Helvetica, Arial, sans-serif"; titulo.style.textAlign = "center"; titulo.style.marginBottom = "20px"; titulo.style.fontSize = "18px"; const inputEstacion1 = document.createElement("input"); inputEstacion1.type = "text"; inputEstacion1.placeholder = "Estación 1"; inputEstacion1.style.marginRight = "5px"; inputEstacion1.style.fontFamily = "Helvetica, Arial, sans-serif"; const sugerencias1 = document.createElement("ul"); sugerencias1.style.listStyleType = "none"; sugerencias1.style.padding = "0"; sugerencias1.style.margin = "0"; sugerencias1.style.position = "absolute"; sugerencias1.style.backgroundColor = "white"; sugerencias1.style.border = "1px solid #ccc"; sugerencias1.style.maxHeight = "150px"; sugerencias1.style.overflowY = "auto"; sugerencias1.style.display = "none"; const inputEstacion2 = document.createElement("input"); inputEstacion2.type = "text"; inputEstacion2.placeholder = "Estación 2"; inputEstacion2.style.marginRight = "5px"; inputEstacion2.style.fontFamily = "Helvetica, Arial, sans-serif"; const sugerencias2 = document.createElement("ul"); sugerencias2.style.listStyleType = "none"; sugerencias2.style.padding = "0"; sugerencias2.style.margin = "0"; sugerencias2.style.position = "absolute"; sugerencias2.style.backgroundColor = "white"; sugerencias2.style.border = "1px solid #ccc"; sugerencias2.style.maxHeight = "150px"; sugerencias2.style.overflowY = "auto"; sugerencias2.style.display = "none"; // Contenedor de botones const contenedorBotones = document.createElement("div"); contenedorBotones.style.display = "flex"; contenedorBotones.style.justifyContent = "center"; contenedorBotones.style.marginTop = "5px"; const botonComparar = document.createElement("button"); botonComparar.innerText = "Comparar"; botonComparar.style.marginRight = "10px"; botonComparar.style.fontFamily = "Helvetica, Arial, sans-serif"; const botonMapaCompleto = document.createElement("button"); botonMapaCompleto.innerText = "Consulta el mapa completo"; botonMapaCompleto.style.fontFamily = "Helvetica, Arial, sans-serif"; botonMapaCompleto.style.backgroundColor = "#01f3b3"; botonMapaCompleto.style.color = "white"; botonMapaCompleto.style.border = "none"; botonMapaCompleto.style.padding = "10px 20px"; botonMapaCompleto.style.borderRadius = "5px"; botonMapaCompleto.style.cursor = "pointer"; const url = "https://observablehq.com/embed/ee7cb54bcfaf0811?cells=viewof+zoomedImage"; botonMapaCompleto.addEventListener("click", () => { window.open(url, "_blank"); }); contenedorBotones.appendChild(botonComparar); contenedorBotones.appendChild(botonMapaCompleto); const resultado = document.createElement("div"); resultado.style.marginTop = "10px"; resultado.style.fontFamily = "Helvetica, Arial, sans-serif"; const botonReiniciar = document.createElement("button"); botonReiniciar.innerText = "Reiniciar"; botonReiniciar.style.display = "none"; botonReiniciar.style.marginTop = "10px"; botonReiniciar.style.fontFamily = "Helvetica, Arial, sans-serif"; contenedor.appendChild(titulo); contenedor.appendChild(inputEstacion1); contenedor.appendChild(sugerencias1); contenedor.appendChild(inputEstacion2); contenedor.appendChild(sugerencias2); contenedor.appendChild(contenedorBotones); contenedor.appendChild(resultado); contenedor.appendChild(botonReiniciar); const estacionesNombres = infoEstaciones.map(estacion => estacion.ESTACION); const normalizarTexto = (texto) => { return texto.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(); }; const mostrarSugerencias = (input, sugerencias, estaciones) => { const valorInput = normalizarTexto(input.value); sugerencias.innerHTML = ""; sugerencias.style.display = "none"; if (valorInput.length > 0) { const coincidencias = estaciones.filter(estacion => normalizarTexto(estacion).includes(valorInput)); coincidencias.forEach(coincidencia => { const item = document.createElement("li"); item.innerText = coincidencia; item.style.cursor = "pointer"; item.addEventListener("click", () => { input.value = coincidencia; sugerencias.innerHTML = ""; sugerencias.style.display = "none"; }); sugerencias.appendChild(item); }); if (coincidencias.length > 0) { sugerencias.style.display = "block"; } } }; inputEstacion1.addEventListener("input", () => { mostrarSugerencias(inputEstacion1, sugerencias1, estacionesNombres); }); inputEstacion2.addEventListener("input", () => { mostrarSugerencias(inputEstacion2, sugerencias2, estacionesNombres); }); botonComparar.addEventListener("click", () => { const estacion1 = inputEstacion1.value.trim(); const estacion2 = inputEstacion2.value.trim(); if (!estacion1 || !estacion2) { resultado.innerHTML = "Por favor, introduce dos estaciones."; return; } const datosEstacion1 = infoEstaciones.find(row => row.ESTACION === estacion1); const datosEstacion2 = infoEstaciones.find(row => row.ESTACION === estacion2); if (!datosEstacion1 || !datosEstacion2) { resultado.innerHTML = "Una o ambas estaciones no se encontraron."; } else { const precio1 = parseFloat(datosEstacion1.PRECIO.replace(',', '.')); const precio2 = parseFloat(datosEstacion2.PRECIO.replace(',', '.')); let estacionMayor, estacionMenor, precioMayor, precioMenor; if (precio1 > precio2) { estacionMayor = datosEstacion1.ESTACION; estacionMenor = datosEstacion2.ESTACION; precioMayor = precio1; precioMenor = precio2; } else { estacionMayor = datosEstacion2.ESTACION; estacionMenor = datosEstacion1.ESTACION; precioMayor = precio2; precioMenor = precio1; } const diferencia = precioMayor - precioMenor; const porcentaje = Math.round(((precioMayor - precioMenor) / precioMenor) * 100); resultado.innerHTML = ` ${datosEstacion1.ESTACION}: ${precio1.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €/m2
${datosEstacion2.ESTACION}: ${precio2.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €/m2

El m2 en alquiler en ${estacionMayor} es un ${porcentaje}% más caro que en ${estacionMenor}: cuesta ${diferencia.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} € más. `; botonReiniciar.style.display = "inline-block"; } }); botonReiniciar.addEventListener("click", () => { inputEstacion1.value = ""; inputEstacion2.value = ""; resultado.innerHTML = ""; botonReiniciar.style.display = "none"; }); const svgContainer = viewof svgMapaRenderizado.closest("div"); svgContainer.style.position = "relative"; document.body.appendChild(contenedor); }