Widget de capas del mapa personalizadas
Una versión modificada del widget Capas del mapa de Experience Builder. Hace todo lo que hace el widget estándar y añade las funciones que se indican a continuación. Se migró desde una pregunta sobre widgets personalizados en la que tenía la versión original.
GitHub: https://github.com/brianmcleer/map-layers-custom-widget
Funciones añadidas al widget estándar Capas del mapa
- Incluir automáticamente las nuevas subcapas: las subcapas recién añadidas a un grupo designado aparecen en las aplicaciones publicadas sin tener que modificar la configuración ni volver a publicar.
- Enfoque en una capa: aislar una sola capa o subcapa de un servicio de mapas y ocultar el resto, con una opción explícita para salir.
- Indicador de cantidad de capas visibles.
- Lista de capas plegable, con la opción de que aparezca plegada al inicio.
- Añadir datos: añadir una capa mediante URL (servicio de ArcGIS, teselas vectoriales, WMS, WMTS, GeoJSON, CSV, KML) o archivo local (GeoJSON, CSV, KML, shapefile comprimido).
- Opacidad maestra: un control deslizante ajusta la opacidad de todas las capas.
- Selector de mapas base con los mapas base de la organización.
- Panel de leyenda.
- Vistas guardadas: guardar conjuntos de visibilidad de capas e importarlos o exportarlos como JSON.
- Recuento de coincidencias de búsqueda que incluye las subcapas de servicios de mapas, además de un filtro para mostrar solo las capas visibles.
- Herramientas por lotes: activar o desactivar todas, restablecer la visibilidad, acercar a las capas visibles, exportar una imagen del mapa, expandir o contraer todas.
- Herramientas por capa: resaltar, copiar URL, actualizar, ver detalles de la capa, mover al principio o al final, sacar del grupo.
Cada función se puede activar o desactivar en la configuración del widget.
Requisitos
Experience Builder Developer Edition 1.19 o 1.20 (React 19). No se admiten EB 1.18 ni versiones anteriores.
Instalación
- Descarga el archivo zip de la versión y extráelo.
- Coloca la carpeta map-layers-custom de modo que su manifest.json esté directamente en client/your-extensions/widgets/map-layers-custom/.
- Ejecuta npm install en la carpeta client.
- Reinicia el cliente y actualiza el generador de aplicaciones con una recarga forzada.
Encontrarás los pasos completos de instalación y la solución de problemas en el README de GitHub.
Registro de cambios:
12/10/2026: Ahora el widget sigue el idioma de la aplicación (?locale=, el selector de idioma, el perfil de ArcGIS o el navegador) en 39 idiomas; incluye una guía de ayuda.
¿Tienes tus propios widgets personalizados? La misma herramienta gratuita, exb-i18n-kit, puede traducirlos con un solo comando: localize. Así completa cada frase:
- Primero, Esri. Lee las traducciones que ya están en tu instalación de Experience Builder, así que una frase como «Acercar a» utiliza la misma redacción que los propios widgets de Esri.
- Términos estándar. Los nombres de unidades, como pies y acres, provienen de Unicode CLDR, los mismos datos que usan los navegadores.
- Memoria de traducción compartida. El resto se traduce con un diccionario compartido creado con LibreTranslate, un traductor de código abierto, y los modelos Opus-MT de Helsinki-NLP para bosnio, croata y serbio. Se ejecuta gratis en GitHub, así que no necesitas una clave de API ni una cuenta.
- Integración. También encuentra textos en inglés codificados fuera del archivo de traducción del widget, como una configuración predeterminada o una guía de ayuda, y los conecta para que también se traduzcan.
Las correcciones manuales siempre prevalecen sobre las automáticas y nunca se sobrescriben. Algunas traducciones se generan automáticamente, así que responde aquí con una redacción mejor si encuentras alguna que no suene bien.
30/9/26:
- Elegir una capa por grupo: configura un grupo para que solo se pueda activar una capa a la vez (botones de opción).
- Copiar enlace a estas capas: comparte un enlace que abre la aplicación con las mismas capas activadas.
- Exportar lista de capas: guarda en un CSV todas las capas, los grupos y las subcapas, con su estado activado/desactivado y su URL.
- Comprobación del estado de las capas: los servicios se comprueban periódicamente y los que dejan de responder se marcan en la lista.
- Informes de capas con errores: se notifican las capas que no se cargan o no se dibujan, incluso cuando están anidadas en grupos profundos.
- Vistas predefinidas: el creador de la aplicación puede guardar vistas de capas que todos los usuarios pueden ver.
- Imágenes cercanas: añade imágenes aéreas y satelitales que cubren la vista actual.
- Favoritos: marca capas con una estrella y filtra la lista para mostrar solo tus favoritas.
- Nombres de capas depurados: opción para mostrar nombres más limpios, por ejemplo, sustituyendo los guiones bajos por espacios.
- Acercar hasta que sea visible: un clic acerca a una capa que aparece atenuada en la escala actual.
- Telemetría de uso: ahora los clics en las capas incluyen la ruta del grupo al que pertenece cada capa.
11/9/26:
Se añadió un botón de ayuda en el encabezado que abre una guía breve y con función de búsqueda, que describe únicamente las funciones activadas en tu aplicación, además de un aviso único «¿Eres nuevo aquí?».
23/7/26: Se actualizó el widget Capas del mapa personalizadas para que sea compatible con Experience Builder 1.21 y se resolvieron errores del editor de TypeScript. Esta es únicamente una actualización de mantenimiento, sin cambios en la funcionalidad del widget.
