map33-js

name	map33-js
description	Visualización 3D de mapas con Three.js — alternative a maptalks.three para mapas 3D interactivos.
version	1.0.0
tags	["three.js","3D","maps","visualization","WebGL"]

map33.js — Mapas 3D con Three.js

Resumen

Visualización 3D de mapas con Three.js — alternativa ligera a maptalks.three. 500⭐.

Repo de referencia

• GitHub: github.com/blaze33/map33.js
• Lenguaje: JavaScript/TypeScript
• Licencia: MIT

Instalación

npm install map33.js
# o CDN
<script src="https://cdn.jsdelivr.net/npm/map33.js/dist/map33.min.js"></script>

Uso Básico

import Map33 from 'map33.js';

const map = new Map33({
  container: 'map-container',
  center: [40.4168, -3.7038],  // Madrid
  zoom: 12,
  style: 'osm',  // 'osm', 'satellite', 'dark'
});

// Añadir capas
map.addLayer({
  type: 'circle',
  coordinates: [[40.4168, -3.7038]],
  radius: 500,
  color: '#2563eb',
  opacity: 0.3,
});

// Rotación 3D
map.setPitch(60);  // Inclinación 60 grados
map.setBearing(45);  // Rotación 45 grados

Patrones Clave

1. Estilos: OSM, satellite, dark, custom tiles
2. Capas: Círculos, líneas, polígonos, marcadores 3D
3. Interacción: Zoom, rotación, inclinación, click events
4. GeoJSON: Soporte nativo para GeoJSON features
5. Performance: Web Workers para procesamiento pesado

Integración con Mastermind

• Complementa maptalks.three — más ligero, menos dependencias
• Ideal para threejs-3d-maps con enfoque en visualización
• Útil para map3d-r3f — alternativa vanilla a React
• Perfecto para dashboards con mapas 3D interactivos

Pitfalls

• Comunidad: Menos comunidad que maptalks.three
• Documentación: Docs limitados, hay que leer el código
• Extensiones: Menos plugins disponibles
• WebGL: Requiere soporte WebGL en el navegador

Referencias

• GitHub: blaze33/map33.js