Buenas tardes. Siempre se me ha atranca el javascript de Velneo, a ver si me podéis echar una mano.
Tengo una rejilla donde se muestran cultivos. En dicha rejilla, he añadido en la barra de herramientas una opción para mostrar la localización de dichos cultivos en un mapa.
El mapa está construido con HTML y javascript, usando el control visor HTML. Cuando hago click encima de un marcador, se muestra información sobre la finca y el cultivo en sí, hasta aquí todo perfecto.
He añadido dos botones, para que al pulsar sobre uno u otro, me lleve o bien a la ficha del centro, o bien a la ficha del cultivo, y aquí es donde estoy atrancado, ¿cómo podría hacerlo?
En este manejador de evento es donde recojo toda la información, y donde fijo el valor de la variable HTML, que es el contenido del visor.
Y este es el código que contiene la variable HTML.
"<!DOCTYPE html>
<html lang=\ces\c>
<head>
<meta charset=\cUTF-8\c>
<meta name=\cviewport\c content=\cwidth=device-width, initial-scale=1.0\c>
<title>Mapa con Múltiples Marcadores</title>
<link rel=\cstylesheet\c href=\chttps://unpkg.com/leaflet/dist/leaflet.css\c />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#map {
width: 100%;
height: 100%;
}
.popup-buttons {
display: flex;
justify-content: space-around;
margin-top: 10px;
}
.popup-buttons button {
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class=\ccontainer\c>
<div id=\cmap\c></div>
</div>
<script src=\chttps://unpkg.com/leaflet/dist/leaflet.js\c></script>
<script>
const map = L.map(\cmap\c).setView([36.773796, -3.536507], 10);
L.tileLayer(\chttps://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\c, {}).addTo(map);
L.tileLayer(\chttps://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\c, {attribution: \c© OpenStreetMap contributors\c, opacity: 0.5}).addTo(map);
const CULTIVOS = " + ARRAY_CTR_PRC_PNF + "
if (typeof CULTIVOS !== \cundefined\c && Array.isArray(CULTIVOS) && CULTIVOS.length > 0) {
CULTIVOS.forEach(entry => {
const LAT = entry[\cLATITUD\c];
const LON = entry[\cLONGITUD\c];
const CTR_NAME = entry[\cNOMBRE_CENTRO\c];
const M2_CTR = entry[\cM2_CENTRO\c];
const CTR_PRC_PNF_NAME = entry[\cNOMBRE_CULTIVO\c];
const ART = entry[\cPRODUCTO\c];
const M2_CTR_PRC_PNF = entry[\cM2_CULTIVO\c];
if (LAT && LON) {
const marker = L.marker([LAT, LON]).addTo(map);
const popupContent = \`
<b>Centro:</b> \${CTR_NAME}<br>
<b>Extensión del centro:</b> \${M2_CTR}<br>
<b>Cultivo:</b> \${CTR_PRC_PNF_NAME}<br>
<b>Producto:</b> \${ART}<br>
<b>Extensión del cultivo:</b> \${M2_CTR_PRC_PNF}<br>
<div class=\cpopup-buttons\c>
<button onclick=\cgoToCenter('\${CTR_NAME}')\c>Ir a centro</button>
<button onclick=\cgoToCrop('\${CTR_PRC_PNF_NAME}')\c>Ir a cultivo</button>
</div>\`;
marker.bindPopup(popupContent);
} else {
console.warn(\cCoordenadas no válidas para el objeto:\c, entry);
}
});
} else {
console.error(\cEl array de datos está vacío o no es un array.\c);
}
function goToCenter(centerName) {
alert('Ir a centro: ' + centerName);
}
function goToCrop(cropName) {
alert('Ir a cultivo: ' + cropName);
}
</script>
</body>
</html>
Os agradecería un poco de ayuda. Llevo muy poco tiempo trabajando con Velneo y la verdad que se me hace un poco cuesta arriba.
Un saludo!
