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

npm i @guajiritos/map --save

Con yarn

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.

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

Luego añadirla a la sección imports.

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

{
  ...
  "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

{
  ...
  "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

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

Uso

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

<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.

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.