Nexus – Elemento: Geo Map

¿Qué es?

Geo Map es un componente de tipo Data. Muestra un mapa geográfico interactivo (basado en Leaflet / OpenStreetMap) con marcadores ubicados por coordenadas. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Global Presence”, con 4 marcadores: Santiago, Madrid, New York, Tokyo).

Propiedades

Al seleccionar Geo Map en el lienzo, el panel derecho muestra “Properties of GeoMap”, organizado en tres pestañas: Content, Style y Behavior.

• Component ID: identificador único del componente, autogenerado (ej. geo_afa5dc51).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

• Title: título del mapa (ej. “Global Presence”).
• Markers (JSON): campo de código donde se definen los marcadores en formato JSON. Cada marcador se compone de:
  • label: nombre del punto (ej. “Santiago”).
  • lat: latitud (ej. -33.45).
  • lng: longitud (ej. -70.66).
  • color: color del marcador en hexadecimal (ej. #2563eb).
  • value: valor numérico asociado al punto (ej. 42).

  El campo cuenta con el mismo editor de código expandido visto en otros componentes (pestañas HTML/CSS/JS/JSON, formateo automático). El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

Pestaña Style:

• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Show Labels: casilla que muestra u oculta las etiquetas (label) de los marcadores en el mapa.
• Max Zoom: define el nivel máximo de zoom permitido al interactuar con el mapa (vacío por defecto).
• Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.
• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para agregar un nuevo marcador, hay que ubicarse en la última llave } del bloque anterior dentro de Markers (JSON), agregarle una coma, y pegar el nuevo bloque a continuación:

[ 
 {
    "label": "Tokyo",
    "lat": 35.67,
    "lng": 139.65,
    "color": "#f59e0b",
    "value": 65
  },
  {
    "label": "Buenos Aires",
    "lat": -34.6,
    "lng": -58.38,
    "color": "#ef4444",
    "value": 30
  }
]

⚠️ Importante: la coma va pegada a la llave } del bloque anterior, no al principio del bloque nuevo.

Las coordenadas (lat/lng) ubican el punto en el mapa, mientras que color y value permiten diferenciar visualmente los marcadores según alguna métrica (por ejemplo, cantidad de clientes o ventas por ciudad). Con Max Zoom se puede limitar qué tan cerca puede acercarse el usuario al navegar el mapa.