1.54.1 • Published 14h ago

coderhubspa_sheets_map

Licence

ISC

Version

1.54.1

Deps

Size

26.5 MB

Vulns

Weekly

Summary Dependency Versions

Sheets Map

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build:lib

Lints and fixes files

npm run lint

How to publish

Upgrade "version" in package.json.
Compile:

npm run build:lib

Publish:

npm publish

Update repo: stage changes, commit and push.

Configuración en Sheets

Instalar en Sheets

Ejecutar

npm install @CoderhubSpA/sheets_map@latest

Casos soportados por el "Mapa de claves" de Sheets Map :

1 - No mostrar nada

2 - Mostrar todos los nombres formateados para que sea legible por el usuario Ejemplo:

3 - Mostrar solo los nombres definidos por el usuario Ejemplo:

{
    "CUT_REG":"Codigo región",
    "REGION":"Región",
    "SUPERFICIE":"Superficie total",
}

3.1 - Mostrar nombres definidos de todas las metricas: Se usa "metric_data" seguido de un punto "." y un asterisco "*"

{ "metric_data.*":"Metrica" }

Ejemplo:

{
    "CUT_REG":"Codigo región",
    "REGION":"Región",
    "SUPERFICIE":"Superficie total",
    "metric_data.*":"Metrica"
}

3.2 - Mostrar los nombres para cada metrica en concreto: Se usa "metric_data" seguido de un punto "." y el nombre de columna de la métrica (Ejem. "migraciones"). Si se agregan varias, solo se mostraría la métrica activa y las otras no se verían

Ejemplo:


{
    "CUT_REG":"Codigo región",
    "REGION":"Región",
    "SUPERFICIE":"Superficie total",
    "metric_data.nuevas_empresas":"Nuevas empresas",
    "metric_data.migraciones":"Total migraciones"
}

Notas:

Respecto a metric_data : Siempre se debe usar metric_data. para mostrar el valor de una métrica, ya sea con asterisco o definiendo el nombre de columna.
Uso de "." : Si una propiedad de una métrica o una metadata es un objeto, se puede mostrar valores de ese objeto utilizando el recurso de puntos. Ejemplo:

Si mi propiedad del objeto GEOJSON se ve así:
```
{
    "direccion":{
        "calle": "John Doe",
        "numero": "123"
    }
}
```
Puedo configurar mi mapa de claves de la siguiente manera para obtener la calle:
```
{
    "direccion.calle": "Calle"
}
```

API de acciones del mapa (`mapActions`)

mapActions es la API pública del componente SheetsMap. Permite controlar el mapa desde un componente padre, sin acceso directo al internals.

Obtener la referencia

Opción 1 — por evento (recomendada):

<SheetsMap @map-actions-ready="onActionsReady" />

methods: {
    onActionsReady(actions) {
        this.mapActions = actions;
    }
}

Opción 2 — por $refs:

this.$refs.sheetsMap.mapActions.zoomIn();

Métodos de control del mapa

Método	Firma	Descripción
`zoomIn`	`zoomIn()`	Acercar el zoom en 1 nivel
`zoomOut`	`zoomOut()`	Alejar el zoom en 1 nivel
`setZoom`	`setZoom(level)`	Establecer un nivel de zoom específico (0–20)
`getZoom`	`getZoom()`	Obtener el nivel de zoom actual
`flyTo`	`flyTo(latLng, zoom?)`	Volar a `{ lat, lng }` con zoom opcional (default 12)
`teleportTo`	`teleportTo(latLng, zoom?)`	Centrar el mapa sin animación ni marcador de geolocalización
`panTo`	`panTo(latLng)`	Centrar el mapa en `{ lat, lng }` sin animación
`filterByBounds`	`filterByBounds()`	Filtrar datos por zona visible del mapa
`toggleCoordinateFormat`	`toggleCoordinateFormat()`	Ciclar formato de coordenadas (WGS84 / UTM / Web Mercator / SIRGAS-Chile 2016)
`getCenter`	`getCenter()`	Obtener coordenadas del centro actual
`invalidateSize`	`invalidateSize()`	Recalcular tamaño del mapa (útil tras redimensionar el contenedor)
`getLeafletMap`	`getLeafletMap()`	Acceso directo al objeto Leaflet `L.Map` (avanzado)
`removeBaseLayer`	`removeBaseLayer()`	Ocultar la capa base (fondo gris neutro)
`restoreBaseLayer`	`restoreBaseLayer()`	Restaurar la capa base
`isBaseLayerHidden`	`isBaseLayerHidden()`	`true` si la capa base está oculta

Métodos de dibujo de polígonos

Método	Firma	Descripción
`drawShape`	`drawShape(shape)`	Iniciar dibujo: `'polygon'`, `'circle'`, `'rectangle'`. También acepta `'delete'`, `'cancel'`, `'clear'`
`cancelDraw`	`cancelDraw()`	Cancelar el dibujo en progreso sin eliminar polígonos ya completados
`clearPolygons`	`clearPolygons()`	Eliminar todos los polígonos dibujados
`toggleEraserMode`	`toggleEraserMode()`	Activar/desactivar el modo borrador (toggle)
`setEraserMode`	`setEraserMode(active)`	Activar o desactivar el modo borrador de forma idempotente
`hasPolygons`	`hasPolygons()`	`true` si hay al menos un polígono dibujado
`isEraserActive`	`isEraserActive()`	`true` si el modo borrador está activo
`isDrawingInProgress`	`isDrawingInProgress()`	`true` si hay un dibujo en progreso (sin confirmar)
`onPolygonFilter`	`onPolygonFilter(cb)`	Registrar callback que se ejecuta cuando cambian los polígonos. Recibe `bounds_filters` (array\|null)

Flujo de dibujo de polígonos

1. Iniciar el modo dibujo

// Activa el cursor crosshair y habilita el dibujo continuo
mapActions.drawShape("polygon"); // o 'circle' / 'rectangle'

// Escuchar cambios en los polígonos dibujados
mapActions.onPolygonFilter((bounds_filters) => {
  // bounds_filters: array con filtros cuando hay polígonos, null cuando se limpian
  const hasPolygons = bounds_filters !== null;
});

Mientras el modo dibujo está activo, al completar un polígono el modo se re-habilita automáticamente — el usuario puede dibujar múltiples polígonos sin necesidad de volver a activar la función.

2. Activar el modo borrador (eraser)

// Toggle — activa si está desactivado, desactiva si está activo
mapActions.toggleEraserMode();

// O de forma idempotente
mapActions.setEraserMode(true); // activar
mapActions.setEraserMode(false); // desactivar

// Consultar estado actual
const erasing = mapActions.isEraserActive();

Al activar el eraser, el modo dibujo se pausa automáticamente. Al desactivarlo, el modo dibujo se retoma con el mismo shape anterior.

El usuario elimina polígonos individuales haciendo click sobre ellos mientras el eraser está activo.

3. Cerrar / cancelar el modo dibujo

// Cancela el trazo en progreso (sin eliminar polígonos ya completados)
mapActions.cancelDraw();

// Eliminar todos los polígonos y limpiar los filtros
mapActions.clearPolygons();

// Desregistrar el callback de filtros
mapActions.onPolygonFilter(null);

Ejemplo completo

// Activar
mapActions.drawShape("polygon");
mapActions.onPolygonFilter((bounds_filters) => {
  this.polygonDrawn = bounds_filters !== null;
});

// El usuario dibuja polígonos... puede dibujar varios seguidos.

// Si quiere borrar uno: activar eraser
mapActions.toggleEraserMode();
// El usuario hace click sobre el polígono a eliminar

// Desactivar eraser (retoma el modo dibujo)
mapActions.toggleEraserMode();

// Al cerrar: cancelar dibujo en progreso + limpiar todo
mapActions.cancelDraw();
mapActions.clearPolygons();
mapActions.onPolygonFilter(null);

Comportamiento del cursor

Estado	Cursor
Modo dibujo activo	`crosshair`
Polígono completado, modo continuo	`crosshair` (se mantiene)
Eraser activado	normal
Dibujo cancelado	normal