# Dec 15th, 2023: \[ES\] Haciendo mapas navideños con Elasticsearch y MapLibre
**URL:** https://discuss.elastic.co/t/dec-15th-2023-es-haciendo-mapas-navidenos-con-elasticsearch-y-maplibre/349051
**Category:** Advent Calendar
**Created:** [December 15, 2023, 8:00am UTC](https://discuss.elastic.co/t/dec-15th-2023-es-haciendo-mapas-navidenos-con-elasticsearch-y-maplibre/349051 "2023-12-15T08:00:37Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@jsanz](https://discuss.elastic.co/u/jsanz)
#### Post date: [December 15, 2023, 8:00am UTC](https://discuss.elastic.co/t/dec-15th-2023-es-haciendo-mapas-navidenos-con-elasticsearch-y-maplibre/349051/1 "2023-12-15T08:00:37Z")
Este artículo está también disponible en [Inglés](https://discuss.elastic.co/t/346727)
### Introducción
Una de las sugerencias de seguridad más habituales relacionadas con Elasticsearch es que **nunca** debes exponer tu _clúster_ en Internet. Pero como estamos en la época navideña, y nos gusta un poquito la juerga, vamos a proponer un pequeño ejercicio técnico accediendo a nuestro motor de búsquedas y base de datos favorita directamente desde el navegador para nada menos que pintar unos mapas bonicos.
Como tal vez sepas, Elasticsearch puede representar gran cantidad de datos geoespaciales gracias a las teselas vectoriales. Si no sabes de lo que hablo te invito a echar un vistazo a este [espectacular artículo](https://www.elastic.co/blog/introducing-elasticsearch-vector-tile-search-api-for-geospatial) de Ignacio y Thomas.
Al igual que muchos otros _endpoints_ de Elasticsearch, la [API de _Vector Tiles_](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-vector-tile-api.html) espera un objeto JSON en el que definir consultas y agregaciones arbitrariamente complejas. Pero las bibliotecas de _webmapping_ no funcionan así, ya que esperan como parámetro la URL de un servidor con una plantilla para el nivel de zoom y las coordenadas X e Y, más o menos así: `https://my-server/tiles/${z}/${x}/${y}`. La aproximación clásica (por esta y muchas otras razones) es implementar un _middleware_ que se encargará de construir las consultas correctas, haciendo de fachada para Elasticsearch. De esta forma, las aplicaciones cliente en el navegador harán peticiones `GET` normales sin saber nada del _backend_.
_Diagrama secuencia con la aproximación habitual para pintar teselas vectoriales._
Si estás aprendiendo sobre Elasticsearch, o construyendo algo sencillo, o simplemente jugando un poco, tal vez te interese quitarte de en medio ese _middleware_ y conseguir que tu navegador hable directamente con tu base de datos. ¿Pero cómo?
[MapLibre](https://maplibre.org/) es una popular biblioteca de _webmapping_ que aprovecha las últimas tecnologías web para representar datos desde teselas vectoriales con mapas base espectaculares. Es lo que usamos en [Kibana Maps](https://www.elastic.co/guide/en/kibana/current/maps.html) y nos encanta el proyecto y su comunidad. La biblioteca tiene una curiosa funcionalidad que permite capturar las peticiones de teselas y modificarlas a voluntad, cambiando el verbo HTTP de `GET` a `POST`, las cabeceras, y hasta añadir un _payload_ personalizado, así que ¡venga vamos a usar esto!
_Diagrama secuencia con la aproximación navideña-YOLO._
### Datos
La [Overture Maps Foundation](https://overturemaps.org/) es un esfuerzo coordinado entre Microsoft, Meta, Esri, y otros para recoger y publicar grandes juegos de datos en abierto. Para este ejercicio he subido a un clúster el tema de lugares de interés de [Overture 2023-07-26-alpha.0](https://overturemaps.org/download/overture-july-alpha-release-notes/) , con más de 59 millones de localizaciones en todo el mundo proporcionadas por Meta y Microsoft.
Puedes echar un vistazo al juego de datos en este [tablero de Kibana](https://jorge-sanz.kb.eastus2.azure.elastic-cloud.com:9243/s/public/app/dashboards?auth_provider_hint=anonymous1#/view/33aa42b5-8706-446b-a3e3-9e005b132ee8?_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A60000)%2Ctime%3A(from%3Anow-15m%2Cto%3Anow))).
_Tablero con puntos de interés de la Overture Maps Foundation._
### Preparando Elasticsearch
Para acceder a estos datos desde el navegador, primero tenemos que configurar el clúster para establecer las cabeceras CORS, tal y como detallé en la sección de preparación de datos del [taller de Elasticsearch geospacial](https://github.com/jsanz/elastic-workshop/blob/main/lab/vector-tile-viewer/README.md#data-preparation). A continuación hay que crear una _API key_ para acceder con permisos de sólo-lectura al índice `overture-places` tanto para consultas normales como de teselas vectoriales.
> **Truco**
> Si estás siguiendo el taller mejor no cierres tu ventana de Kibana porque te va a resultar muy útil para explorar los datos: ver los campos disponibles, su dominio, etc.
### Mostrando localizaciones navideñas
He dejado en el repositorio de Github [jsanz/advent-2023](https://github.com/jsanz/advent-2023) algo de código para este artículo. Se puede previsualizar en [https://jsanz.github.io/advent-2023](https://jsanz.github.io/advent-2023) y no puede ser más simple: un HTML y un fichero con un módulo JavaScript. Como mapa base para este ejemplo he elegido [MapTiler](https://www.maptiler.com/) y su [estilo _winter_](https://www.maptiler.com/maps/winter/).
_Por defecto se muestran los puntos con el texto "Santa Claus"._
El código interesante se encuentra al principio de `app.js`, donde podemos encontrar las constantes que detallan la localización del clúster de Elasticsearch, la _API key_, y finalmente la función [`getDynamicTransformRequest`](https://github.com/jsanz/advent-2023/blob/6e039246d83ee80ae308e4700af2a927233a9da4/app.js#L19C65-L19C66) . Al crear el objeto para el mapa un poco más abajo, en el parámetro `transformRequest` se le pasa esta función para que transforme las peticiones. Esta función va a comprobar que el recurso solicitado es de Elasticsearch, y le va a adjuntar una consulta de búsqueda, así como la cabecera de autenticación.
```JavaScript
const getDynamicTransFormRequest = function (url, resourceType) {
/* This function enriches the HTTP request to include
the ES search body, change to a POST request, and include
the Content-Type header */
if (resourceType == "Tile" && url.startsWith(ES_HOST)) {
const query = document.getElementById("search").value || DEFAULT_QUERY;
/* Build a VT query payload */
const body = {
grid_precision: 0,
exact_bounds: true,
extent: 4096,
fields: ["name", "category_main", "category_alt", "source", "social"],
query: {
bool: {
filter: [
{
multi_match: {
lenient: true,
query: `*${query}*`,
type: "phrase",
},
},
],
},
},
}
return {
url: url,
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `ApiKey ${ES_APIKEY}`,
},
body: JSON.stringify(body),
};
}
};
[...]
const map = new maplibregl.Map({
container: "map",
style,
center: [0, 15],
zoom: 1,
hash: true,
transformRequest: getDynamicTransFormRequest,
});
```
El resto del _script_ es código estándar de MapLibre para hacer un mapa temático por tipo de localización, adjuntando un pequeño _pop up_ para que al pulsar sobre un punto se nos muestre un poco más de detalle sobre el mismo.
_Las tiendas de árboles de Navidad son bastante populares en la costa este de los Estados Unidos._
> **Truco**
> Prueba a abrir la consola de desarrollo de tu navegador para echar un vistazo a las peticiones de red a Elasticsearch
En la primera carga la página hace una búsqueda a la base de datos por localizaciones que tengan "Santa Claus". He dejado algunas sugerencias de búsqueda en el formulario, pero te animo a dejar volar tu imaginación y buscar otras localizaciones navideñas interesantes.
_¡Hari Natal todo el mundo!_
### Para ir más allá
Este ejercicio es en realidad el primer paso del taller sobre [Elasticsearch geoespacial](https://github.com/jsanz/elastic-workshop/tree/main/lab/vector-tile-viewer). Te invito a seguir el resto de lecciones para aprender a escribir consultas y representar datos espaciales tanto como documentos individuales, como mucho más interesante, en forma de agregaciones para resumir y analizar grandes volúmenes de datos usando nuestras agregaciones en [hexágonos](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-geohexgrid-aggregation.html), por ejemplo.
_Mapa de datos del servicio 311 de Nueva York agregado en hexágonos._
> **Truco**
> Si no quieres o no te apetece hacer el taller completo pero te gustaría jugar con los mapas, puedes visitar [https://webmapping-elasticsearch-2023.glitch.me](https://webmapping-elasticsearch-2023.glitch.me) donde encontrarás un despliegue de los ejercicios.
Una sugerencia final: la herramienta _Inspect_ de Kibana es increíblemente útil cuando desarrollas aplicaciones para Elasticsearch y está también disponible para Maps. Te recomiendo usarla para aprender cómo Kibana mezcla todos los filtros de los diferentes elementos de la interfaz como la barra de búsqueda y las píldoras de los filtros para producir la petición final que se envía a la base de datos.
_La herramienta para inspeccionar consultas de Kibana Maps._
### Conclusión
Gracias a este pequeño truco con MapLibre presentado aquí podemos explorar y aprender el lenguaje de consultas de Elasticsearch con un bucle de interacción y desarrollo muy rápido: actualiza tu consulta o tu código de renderizado y recarga tu ventana del navegador 💥. También da unas pinceladas sobre las estupendas capacidades geoespaciales de Elasticsearch para casos de uso con muchísimos datos.
**🎅🎄 ¡¡Felices Fiestas!! 🎄🎅**
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [January 12, 2024, 8:00am UTC](https://discuss.elastic.co/t/dec-15th-2023-es-haciendo-mapas-navidenos-con-elasticsearch-y-maplibre/349051/2 "2024-01-12T08:00:38Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.