Mapas
Componente ShikoLocationMap basado en MapLibre GL para mostrar ubicaciones de clinicas.
Mapa Basico
Centro por defecto en Ciudad de Mexico (19.4326, -99.1332). Incluye controles de zoom y geolocalizacion. Usa tiles de CartoCDN (Voyager) con etiquetas forzadas en espanol.
Cargando mapa...
Mapa con Marcadores
Marcadores de clinicas con popups HTML al hacer hover. Cada marcador tiene color personalizable y emite evento marker-click.
Cargando mapa...
Mapa Seleccionable
Modo selectable: muestra un pin central arrastrable (color coral). Util para que una clinica seleccione su ubicacion en el perfil publico. Emite location-selected al soltar el pin.
Cargando mapa...
Mapa con Busqueda
Modo searchable: muestra barra de busqueda de direcciones con autocompletado via Nominatim. El mapa vuela a la ubicacion seleccionada.
Cargando mapa...
Props y Eventos
Props:
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
| latitude | Number | 19.4326 | Latitud del centro (CDMX) |
| longitude | Number | -99.1332 | Longitud del centro |
| zoom | Number | 13 | Nivel de zoom inicial |
| selectable | Boolean | false | Pin arrastrable para seleccionar ubicacion |
| markers | Array | [] | { id, latitude, longitude, color, popupHTML, htmlContent } |
| searchable | Boolean | false | Barra de busqueda de direcciones |
| loading | Boolean | false | Overlay de carga |
| activeMarkerId | String|Number | null | ID del marcador resaltado |
Eventos:
| Evento | Payload |
|---|---|
| location-selected | { lat, lng } (modo selectable) |
| bounds-changed | { swLat, swLng, neLat, neLng } (debounced 500ms) |
| marker-click | Objeto del marcador clickeado |
| map-click | Sin payload (clic en el mapa, no en marcador) |