@guajiritos/map v17.1.0

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.