Repolode
Enviar
shuding

shuding/cobe

Una biblioteca WebGL para globos terráqueos de unos 5 KB y sin dependencias, que permite vincular cualquier elemento del DOM como marcador.

Ver en GitHubSitio web
Estrellas
5,987
Forks
354
Issues abiertos
44
Último commit
hace 28 días

¿Qué es?

COBE es una pequeña biblioteca de TypeScript para renderizar un globo terráqueo interactivo en WebGL sobre un canvas. Se le pasa un elemento canvas y un objeto de configuración a createGlobe, que dibuja el globo con marcadores y arcos que conectan dos ubicaciones. La rotación, los colores, la iluminación y el tamaño de los marcadores se controlan mediante opciones y un callback onRender que se ejecuta en cada fotograma de animación.

La característica distintiva es que los marcadores y los arcos pueden tener un id, que expone nombres de anclaje CSS y variables de visibilidad. Esto permite posicionar elementos HTML normales sobre puntos concretos del globo, con transiciones CSS, filtros y opacidad que responden a si el punto está de cara al espectador. La biblioteca no tiene dependencias y se describe como de unos 5 KB.

El globo se puede destruir con globe.destroy(), lo que elimina sus vinculaciones. El proyecto está escrito en TypeScript y se distribuye bajo la licencia MIT.

Funciones clave

  • 01Renderiza un globo terráqueo en WebGL sobre un elemento canvas, sin dependencias.
  • 02Coloca marcadores y arcos entre coordenadas geográficas.
  • 03Permite anclar cualquier elemento del DOM a un marcador mediante el posicionamiento de anclaje CSS.
  • 04Expone una variable de visibilidad para que CSS desvanezca o desenfoque las etiquetas que quedan detrás del globo.
  • 05Admite actualizaciones por fotograma mediante un callback onRender.

Casos de uso

  • Mostrar las ubicaciones de servidores o clientes en una página de inicio.
  • Crear un mapa interactivo de eventos u oficinas con etiquetas HTML.
  • Visualizar rutas de vuelos o datos como arcos entre ciudades.

Inicio rápido

  1. 1

    Añade un elemento canvas a tu página HTML

  2. 2

    Importa createGlobe desde cobe y llámalo en el canvas con tus opciones

    import createGlobe from 'cobe'

Antes de usarlo

  • El navegador debe ser compatible con WebGL.
  • La representación del globo se configura mediante un único objeto de opciones, por lo que se necesita código adicional para personalizar el aspecto más allá de sus parámetros.

Temas

#webgl#globe#data-visualization#canvas#typescript#css-anchor-positioning

Preguntas frecuentes

¿Qué es cobe?
Una biblioteca WebGL para globos terráqueos de unos 5 KB y sin dependencias, que permite vincular cualquier elemento del DOM como marcador. COBE es una pequeña biblioteca de TypeScript para renderizar un globo terráqueo interactivo en WebGL sobre un canvas. Se le pasa un elemento canvas y un objeto de configuración a createGlobe, que dibuja el globo con marcadores y arcos que conectan dos ubicaciones. La rotación, los colores, la iluminación y el tamaño de los marcadores se controlan mediante opciones y un callback onRender que se ejecuta en cada fotograma de animación.
¿cobe es gratuito? ¿Qué licencia tiene?
cobe es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿cobe sigue mantenido?
Mantenimiento activo. El último commit de cobe fue el 22 sept 2026.
¿Para qué puedo usar cobe?
Mostrar las ubicaciones de servidores o clientes en una página de inicio. Crear un mapa interactivo de eventos u oficinas con etiquetas HTML. Visualizar rutas de vuelos o datos como arcos entre ciudades.
¿Cómo se instala cobe?
Añade un elemento canvas a tu página HTML Importa createGlobe desde cobe y llámalo en el canvas con tus opciones: import createGlobe from 'cobe'
¿Dónde consigo cobe?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/shuding/cobe

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados