npm package: @guajiritos/map
Description: `Guajiritos Map` es una librería para Angular que permite la configuración de un mapa de `Leaflet` para su posterior uso de distintas formas.
Latest version: 20.0.1

# Guajiritos Map

`Guajiritos Map` es una librería para Angular que permite la configuración de un mapa de `Leaflet` para su posterior uso de distintas formas.

## Instalación

Con `npm`

```sh
npm i @guajiritos/map --save
```

Con `yarn`

```sh
yarn add @guajiritos/map
```

## Nota

Para el uso correcto de esta librería es necesario tener instalado previamente `@ngular/material`, `leaflet` y `@types/leaflet`. En caso de no tener instalado las librerías anteriormente descritas el uso de la librería `@guajiritos/map` derivaría en errores para su aplicación.

## Importación

Importar la librería como se muestra a continuación.

```ts
import {GuajiritosMap} from "@guajiritos/map";
```

Luego añadirla a la sección imports.

```ts
imports: [
    ...
    GuajiritosMap,
  ]
```

## Estilos

Para usar correctamente los estilos del mapa debe poner en su archivo `angular.json` la línea de código `"./node_modules/leaflet/dist/leaflet.css",` como se muestra a continuación

```json
{
  ...
  "projects": {
    "angular-leaflet-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "./node_modules/leaflet/dist/leaflet.css",
              "src/styles.css"
            ],
            ...
          }
          ...
        }
        ...
      }
    }
  }
}
```

Para que los marcadores de leaflet puedan ser vistos en el mapa debe agregar al archivo `angular.json` los siguientes etilos como se muestra a continuación

```json
{
  ...
  "projects": {
    "angular-leaflet-example": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images/",
                "output": "./assets"
              }
            ],
            ...
          }
          ...
        }
        ...
      }
    }
  }
}
```

Nota: En caso de querer quitar el cartel pequeño en la esquina inferior derecha, basta con poner en el `styles.css` o `styles.scss` las siguientes líneas de código

```scss
.leaflet-bottom.leaflet-right {
  display: none;
}
```

## Uso

En nuestro archivo HTML debemos agregar la etiqueta `guajiritos-multi-chips` como se muestra a continuación.

```html

<guajiritos-map [latLabel]="latLabel" [latPlaceholder]="latPlaceholder" [latError]="latError" [lngLabel]="lngLabel"
                [lngPlaceholder]="lngPlaceholder" [lngError]="lngError" [appearance]="appearance" [color]="color"
                [readonly]="false" [hidden]="false" [options]="options" [circle]="circle" [icon]="icon"
                [markers]="markers()" [formControl]="form" (markerDragend)="markerDragEnd($event)">
</guajiritos-map>
```

Cada una de las propiedades descritas en el ejemplo anterior no son de uso requerido. A continuación se explica cada una de ellas.

```text
latLabel: Representa el label que se va a mostrar cuando se visualice el campo de la latitud.

latPlaceholder: Representa el placeholder que se va a mostrar cuando se visualice el campo de la latitud.

latError: Representa el error a mostrar cuando el campo latitud se encuentre vacío.

lngLabel: Representa el label que se va a mostrar cuando se visualice el campo de la longitud.

lngPlaceholder: Representa el placeholder que se va a mostrar cuando se visualice el campo de la longitud.

lngError: Representa el error a mostrar cuando el campo longitud se encuentre vacío.

appearance: Representa la apariencia del componente. Por defecto toma el valor "outline".

color: Representa el color del componente. Por defecto su valor es "accent".

readonly: Convierte en solo lectura los campos de latitud y longitud cuando sea necesario. Por defecto su valor es "false".

hidden: Fuerza que los campos de latitud y longitud se oculten. Por defecto su valor es "false".

options: Representa las opciones iniciales del mapa que va ser mostrado.

circle: Utilizado para dibujar un círculo en el mapa.

icon: Valor para representar el ícono de los marcadores que serán dibujados sobre el mapa.

markers: Listado de marcadores que serán dibujados en el mapa. Éste listado debe estar representado en forma de arreglo de marcadores.

formControl: Representa el FormControl al que se hace referencia en el formulario donde la librería es usada.

markerDragEnd: Evento que se lanza cuando el marcador es movido de una posición a otra.
```