Cuando se crean mapas para impresión o imágenes estáticas, uno de los retos principales es controlar la escala: cuántos píxeles de ancho y alto ocupará mi área de interés. Si dispones de una caja delimitadora definida por dos esquinas en latitud/longitud, su tamaño en píxeles cambia según el nivel de zoom. A veces conoces el zoom y quieres medir el tamaño en píxeles; otras veces conoces el ancho o el alto deseado y necesitas calcular el zoom que hace que la caja encaje perfectamente. Estos cálculos son esenciales al generar imágenes estáticas o imprimir mapas y se aplican cuando usas APIs como Geoapify Static Maps.
En Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, ofrecemos asesoría para integrar estas transformaciones en procesos de generación de mapas estáticos y en soluciones avanzadas con inteligencia artificial, ciberseguridad y servicios en la nube. Si buscas desarrollar una app geoespacial personalizada, consulta nuestros servicios de aplicaciones a medida y software multiplataforma.
Antecedentes: niveles de zoom, latitud/longitud y píxeles. La mayoría de librerías modernas de mapas usan la proyección Web Mercator EPSG 3857. En esta proyección la longitud se mapea linealmente al eje X y la latitud se proyecta con la fórmula de Mercator, que distorsiona las distancias cerca de los polos y se recorta aproximadamente en ±85.05113° para evitar valores infinitos. El resultado es una cuadrícula de mosaicos, normalmente de 256×256 píxeles. A zoom 0 el mundo es un mosaico de 256 px, a zoom 1 son 512 px, y así sucesivamente según worldSizePx = 256 × 2^z. Esto explica por qué el ancho y alto en píxeles de una bbox depende del zoom: una área de 1°×1° cerca del ecuador será muy distinta en píxeles entre zoom 2 y zoom 12, y la proyección Mercator acentúa la diferencia en latitudes altas.
Caso 1: ancho y alto en píxeles para un zoom dado. Si conoces el zoom y quieres saber cuántos píxeles ocupa la caja, necesitas convertir lon/lat a coordenadas de píxeles en el espacio World Mercator. Fórmulas clave: x = (lon + 180) / 360 × worldSize y = (0.5 - log((1 + sin(latRad)) / (1 - sin(latRad))) / (4 × PI)) × worldSize donde latRad = lat × PI / 180 y worldSize = TILE_SIZE × 2^zoom. Ejemplo de helper en JavaScript sin librerías externas: const TILE_SIZE = 256; function lonLatToWorldPixels(lon, lat, zoom, tileSize = TILE_SIZE){ const scale = tileSize * Math.pow(2, zoom); const x = (lon + 180) / 360 * scale; const s = Math.sin((lat * Math.PI) / 180); const y = (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * scale; return { x, y }; } function bboxSizePx(bbox, zoom, tileSize = TILE_SIZE){ const [minLon, minLat, maxLon, maxLat] = bbox; const p1 = lonLatToWorldPixels(minLon, minLat, zoom, tileSize); const p2 = lonLatToWorldPixels(maxLon, maxLat, zoom, tileSize); return { width: Math.abs(p2.x - p1.x), height: Math.abs(p2.y - p1.y) }; }
Ejemplo práctico: caja alrededor de París bboxParis = [2.1, 48.7, 2.5, 49.0] a zoom 5 devuelve aproximadamente width 9.1 px y height 10.4 px; a zoom 10 devuelve aproximadamente width 291.3 px y height 332.0 px. Esto muestra por qué elegir el zoom correcto es crucial: si es muy bajo el área será diminuta, si es muy alto no cabrá en la imagen.
Caso 2: calcular ancho a partir de un alto conocido. Si no fijas el zoom pero sí el alto de la imagen en píxeles, puedes derivar el zoom necesario y a partir de él calcular el ancho. En Web Mercator ambos ejes escalan proporcionalmente con 2^z, por lo que precomputamos los deltas en zoom 0 y resolvemos z = log2(targetHeight / dy0). Helper en JavaScript: function bboxDeltaAtZoom0(bbox, tileSize = TILE_SIZE){ const [minLon, minLat, maxLon, maxLat] = bbox; const x0a = tileSize * (minLon + 180) / 360; const x0b = tileSize * (maxLon + 180) / 360; const dx0 = Math.abs(x0b - x0a); const mercY = lat => { const s = Math.sin((lat * Math.PI) / 180); return (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * tileSize; }; const dy0 = Math.abs(mercY(maxLat) - mercY(minLat)); return { dx0, dy0 }; } function zoomForHeight(bbox, targetHeightPx, tileSize = TILE_SIZE){ const { dy0 } = bboxDeltaAtZoom0(bbox, tileSize); return Math.log2(targetHeightPx / dy0); } function widthFromHeight(bbox, targetHeightPx, tileSize = TILE_SIZE){ const z = zoomForHeight(bbox, targetHeightPx, tileSize); const { width } = bboxSizePx(bbox, z, tileSize); return { zoom: z, width }; }
Ejemplo: para la bbox de París si queremos que la altura sea 600 px obtenemos zoom aproximado 10.854 y ancho aproximado 526.4 px. Este escenario es útil para plantillas de impresión con alto fijo o mapas en orientación vertical.
Caso 3: calcular alto a partir de un ancho conocido. De forma análoga, si el ancho de la imagen está fijado (por ejemplo un contenedor web) se calcula z = log2(targetWidth / dx0) y luego se obtiene la altura resultante. Helper en JavaScript: function zoomForWidth(bbox, targetWidthPx, tileSize = TILE_SIZE){ const { dx0 } = bboxDeltaAtZoom0(bbox, tileSize); return Math.log2(targetWidthPx / dx0); } function heightFromWidth(bbox, targetWidthPx, tileSize = TILE_SIZE){ const z = zoomForWidth(bbox, targetWidthPx, tileSize); const { height } = bboxSizePx(bbox, z, tileSize); return { zoom: z, height }; }
Ejemplo: para París y un ancho objetivo de 800 px se obtiene zoom aproximado 11.458 y altura aproximada 911.8 px. Esto ayuda en diseños de ancho fijo, imágenes en formato paisaje o contenedores web donde la altura puede crecer.
¿Por qué esto es importante para tu proyecto? Cuando generas mapas estáticos para informes, impresión, posters o vistas previas, necesitas garantizar que las áreas de interés no queden cortadas, que las etiquetas y marcadores sean legibles y que la composición respete el formato de salida. En Q2BSTUDIO combinamos estos cálculos geoespaciales con nuestros servicios de software a medida, servicios inteligencia de negocio y power bi y servicios cloud aws y azure para entregar soluciones integrales. También ofrecemos integración de servicios de inteligencia artificial y agentes IA para empresas que requieran análisis automatizado de mapas, geolocalización inteligente y optimización en tiempo real.
Cómo integrar esto en tu flujo: 1 Define la bbox que quieres mostrar. 2 Decide si fijas zoom, ancho o alto. 3 Usa las fórmulas anteriores para obtener la dimensión restante o el zoom necesario. 4 Genera la imagen estática con el API o motor de mapas usando los parámetros calculados. En proyectos más complejos integramos estos pasos con pipelines automatizados, dashboards Power BI y servicios en la nube para escalar la generación de mapas y análisis geoespacial sin perder control sobre la resolución y legibilidad.
Conclusión: trabajar con cajas delimitadoras en Web Mercator implica no solo tratar coordenadas sino también píxeles. Las tres situaciones prácticas que hemos visto te permiten: elegir el zoom que encaje, evitar cortar elementos importantes y asegurar la legibilidad de etiquetas y marcadores. Si necesitas soporte para implementar estas transformaciones en una aplicación productiva, desde la propuesta técnica hasta la entrega, Q2BSTUDIO es especialista en aplicaciones a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio. Ponte en contacto para recibir una propuesta adaptada a tus necesidades y saber cómo aplicamos estas técnicas en soluciones reales.
