From aa57c51dfcb4bb98835b1e9088f4d212c13eabc0 Mon Sep 17 00:00:00 2001
From: webbrain-one <295484252+webbrain-one@users.noreply.github.com>
Date: Sat, 8 Aug 2026 18:06:22 +0300
Subject: [PATCH] docs: add Spanish README
---
README.es-ES.md | 303 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 303 insertions(+)
create mode 100644 README.es-ES.md
diff --git a/README.es-ES.md b/README.es-ES.md
new file mode 100644
index 0000000..ed3c833
--- /dev/null
+++ b/README.es-ES.md
@@ -0,0 +1,303 @@
+
+
+
+
+# Leaflet HTML
+
+Leaflet expresado en HTML añade capacidades de mapas a las Aplicaciones Impulsadas por Hipervínculos (HDA).
+
+[![npm version](http://img.shields.io/npm/v/leaflet-html.svg?style="for-the-badge")](https://npmjs.org/package/leaflet-html)
+[](https://github.com/andrewgryan/leaflet-html/actions/workflows/tests.yml)
+
+
+## Motivación
+
+Expresar Leaflet en HTML habilita la compatibilidad con una amplia gama de frameworks de front end.
+
+Los frameworks reactivos de grano fino como [Solid JS](https://solidjs.com) o [Van JS](https://vanjs.org) son candidatos ideales para el desarrollo del lado del cliente.
+
+Los frameworks RESTful, como [HTMX](Https://htmx.org), que sirven HTML a través de la red son opciones perfectas para contenido renderizado en el servidor.
+
+Incluso los generadores de sitios estáticos como [Zola](https://getzola.org) son ideales para este enfoque.
+
+## Documentación
+
+Se encuentra disponible un sitio de documentación integral.
+
+[Documentación de leaflet-html](https://andrewgryan.github.io/leaflet-html/)
+
+## Instalación
+
+Incluye los activos JS/CSS de Leaflet y Leaflet HTML en el documento.
+Esto se puede lograr usando [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
+para apuntar tanto a `leaflet` como a `leaflet-html` hacia módulos ES.
+
+
+```html
+
+```
+
+### CDN
+
+Leaflet HTML está disponible a través de una Red de Distribución de Contenido (CDN) en unpkg.com.
+Esta es una buena opción para casos de uso que no requieren un paso de compilación.
+
+```
+
+```
+
+Ejecuta la biblioteca importándola en una etiqueta `script`.
+Las dependencias de Leaflet se detectan a través del `importmap`.
+
+```html
+
+```
+
+### NPM
+
+Leaflet HTML se puede agregar a un proyecto usando `npm`.
+
+```sh
+npm install leaflet-html
+```
+
+Si se utiliza una herramienta de compilación como `vite`, la siguiente etiqueta de script y algo de CSS es todo lo necesario para comenzar.
+
+```html
+
+```
+
+### Estilo
+
+En ambos enfoques de instalación, CDN y `npm`, se necesita aplicar algún estilo mínimo.
+Los elementos personalizados son `display: inline` por defecto.
+Los mapas de Leaflet, los elementos `l-map`, deben establecerse en `display: block` para tener un tamaño vertical.
+
+```css
+l-map {
+ display: block;
+ block-size: 100vh;
+}
+```
+> [!NOTE]
+> Solo la etiqueta `l-map` necesita dimensiones.
+> Todos los demás elementos `l-*` son puramente semánticos.
+> No ocupan espacio en la página.
+> Solo indican el estado del mapa.
+
+## Inicio rápido
+
+Para mostrar un mapa con un fondo de mapa base, agrega una etiqueta `` con un `url-template` y `attribution` dentro de un ``.
+
+```html
+
+
+
+```
+
+Agregar capas, grupos de capas y controles sigue el patrón uno a uno de Leaflet JS.
+Por ejemplo, para agregar un marcador al ejemplo anterior.
+
+```html
+
+
+
+
+```
+
+## Elementos personalizados
+
+Leaflet HTML utiliza elementos personalizados para declarar el estado de cada mapa en la página.
+
+Los elementos más comunes se describen a continuación.
+La convención de nombres seguida aquí facilita el mapeo desde un método de Leaflet, por ejemplo `L.method()`, a un elemento personalizado, por ejemplo ``.
+
+Los argumentos posicionales y las opciones se especifican como equivalentes en kebab-case de los nombres camelCase de la documentación de Leaflet.
+Por ejemplo, `` se traduce a `L.method({fooBar: 42})`.
+Las conversiones de tipo y las posiciones de llamada correctas son manejadas por la biblioteca.
+
+Nombre | Documentación de Leaflet | Descripción
+-- | -- | --
+l-map | [L.map](https://leafletjs.com/reference.html#map) | Elemento padre para un mapa. Los elementos hijos se `addTo` a este elemento.
+l-tile-layer | [L.tileLayer](https://leafletjs.com/reference.html#tilelayer) | TileLayer, se puede adjuntar a un elemento `l-map` o `l-base-layers`.
+l-marker | [L.marker](https://leafletjs.com/reference.html#marker) | Marcador, se puede adjuntar a un `l-map` o `l-layer-group`.
+l-icon | [L.icon](https://leafletjs.com/reference.html#icon) | Icono adjuntable a `l-marker`.
+l-popup | [L.popup](https://leafletjs.com/reference.html#popup) | Ventana emergente (Popup).
+l-tooltip | [L.tooltip](https://leafletjs.com/reference.html#tooltip) | Sugerencia de herramienta (Tooltip).
+l-image-overlay | [L.imageOverlay](https://leafletjs.com/reference.html#imageoverlay) | Superposición de imagen.
+l-video-overlay | [L.videoOverlay](https://leafletjs.com/reference.html#videooverlay) | Superposición de video.
+l-control-layers | [L.control.layers](https://leafletjs.com/reference.html#control-layers) | Agrega `l-base-layers` y `l-overlay-layers` a la interfaz de control.
+l-base-layers | [L.control.layers](https://leafletjs.com/reference.html#control-layers) | Hijo de `l-control-layers`. Contiene elementos `l-tile-layer`.
+l-overlay-layers | [L.control.layers](https://leafletjs.com/reference.html#control-layers) | Hijo de `l-control-layers`. Contiene elementos de capa o grupos de capas.
+l-layer-group | [L.layerGroup](https://leafletjs.com/reference.html#layergroup) | Elemento padre para agrupar capas dentro de la interfaz de control. Facilita agregar/eliminar grupos de la interfaz a un mapa.
+l-circle | [L.circle](https://leafletjs.com/reference.html#circle) | Capa vectorial.
+l-rectangle | [L.rectangle](https://leafletjs.com/reference.html#rectangle) | Capa vectorial.
+l-polygon | [L.polygon](https://leafletjs.com/reference.html#polygon) | Capa vectorial.
+l-polyline | [L.polyline](https://leafletjs.com/reference.html#polyline) | Capa vectorial.
+
+Cada elemento personalizado se puede configurar usando atributos HTML con la misma convención de nombres que la documentación de Leaflet.
+
+> [!NOTE]
+> Los atributos se especifican cambiando **camelCase** a **kebab-case**. Por ejemplo, `maxZoom` se convierte en `max-zoom`.
+
+Por ejemplo, un marcador con un icono personalizado en Leaflet JS tiene atributos como `{ shadowSize: [50, 64] }` en JS, lo cual se traduce a `shadow-size="[50,64]"` en HTML.
+
+```html
+
+
+
+
+
+```
+
+## Eventos
+
+Por defecto, el evento "ready" es activado por el elemento del mapa.
+Se puede acceder a él a través de la propiedad detail de un CustomEvent.
+
+```html
+
+ ...
+
+
+
+```
+
+Se pueden escuchar eventos arbitrarios del mapa especificando una lista de eventos separada por espacios en el atributo on, por ejemplo `on="resize zoomend"`.
+
+Esto agrega un mecanismo de reenvío al CustomElement.
+Para agregar oyentes de JS usa `addEventListener("resize", ...)`
+e inspecciona la propiedad detail de `CustomEvent` para acceder al Evento de Leaflet.
+
+
+```html
+
+ ...
+
+
+
+```
+
+### CustomEvents
+
+Leaflet HTML conecta una aplicación Leaflet JS enviando y escuchando CustomEvents.
+Estos eventos se pueden observar para agregar funcionalidad adicional a una aplicación.
+
+| Clave | Descripción |
+| -- | -- |
+| l:layer:connected | Se activa cuando una capa se conecta al DOM |
+| l:layer:removed | Se activa cuando una capa se elimina del DOM pero antes de que se ejecute disconnectedCallback |
+| l:popup:connected | Se activa cuando un elemento de popup se conecta al DOM. Se usa para vincular el popup al marcador padre |
+| l:icon:connected | Se activa cuando un elemento de icono se conecta al DOM. Se usa para vincular el icono al marcador padre |
+| l:tooltip:connected | Se activa cuando un elemento de tooltip se conecta al DOM |
+| l:latlngbounds:connected | Se activa cuando un elemento lat-lng-bounds se conecta al DOM |
+| l:latlngbounds:changed | Se activa cuando cambia un atributo de un elemento lat-lng-bounds |
+
+> [!NOTE]
+> Actualmente, solo se han expuesto las claves de eventos necesarias para conectar la funcionalidad principal.
+> Las versiones futuras pueden agregar eventos adicionales según las necesidades de los usuarios.
+
+## Ejemplo realista
+
+El HTML en `example/index.html` es una demostración simple de la API.
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Compilación
+
+Para compilar el código fuente, ejecuta:
+
+```sh
+yarn build
+```
+
+## Contribución
+
+Leaflet HTML, aunque es una idea simple,
+requiere las contribuciones de personas talentosas y generosas.
+Por favor, consulta nuestra guía de contribución para saber cómo ayudar a mejorar esta biblioteca.
+
+[CONTRIBUTING.md](CONTRIBUTING.md)