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.
Con npm
npm i @guajiritos/map --save
Con yarn
yarn add @guajiritos/map
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.
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,
]
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;
}
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.