@guajiritos/map 0.0.10 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +159 -159
- package/esm2022/interfaces/interfaces.mjs +14 -0
- package/esm2022/lib/guajiritos-map.component.mjs +293 -0
- package/esm2022/public-api.mjs +3 -2
- package/fesm2022/guajiritos-map.mjs +153 -142
- package/fesm2022/guajiritos-map.mjs.map +1 -1
- package/interfaces/interfaces.d.ts +45 -0
- package/lib/guajiritos-map.component.d.ts +115 -0
- package/package.json +2 -2
- package/public-api.d.ts +2 -1
- package/esm2022/lib/map.component.mjs +0 -295
- package/lib/map.component.d.ts +0 -142
package/README.md
CHANGED
|
@@ -1,159 +1,159 @@
|
|
|
1
|
-
# Guajiritos Map
|
|
2
|
-
|
|
3
|
-
`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.
|
|
4
|
-
|
|
5
|
-
## Instalación
|
|
6
|
-
|
|
7
|
-
Con `npm`
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm i @guajiritos/map --save
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Con `yarn`
|
|
14
|
-
|
|
15
|
-
```sh
|
|
16
|
-
yarn add @guajiritos/map
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Nota
|
|
20
|
-
|
|
21
|
-
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.
|
|
22
|
-
|
|
23
|
-
## Importación
|
|
24
|
-
|
|
25
|
-
Importar la librería como se muestra a continuación.
|
|
26
|
-
|
|
27
|
-
```ts
|
|
28
|
-
import {GuajiritosMap} from "@guajiritos/map";
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Luego añadirla a la sección imports.
|
|
32
|
-
|
|
33
|
-
```ts
|
|
34
|
-
imports: [
|
|
35
|
-
...
|
|
36
|
-
GuajiritosMap,
|
|
37
|
-
]
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
## Estilos
|
|
41
|
-
|
|
42
|
-
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
|
|
43
|
-
|
|
44
|
-
```json
|
|
45
|
-
{
|
|
46
|
-
...
|
|
47
|
-
"projects": {
|
|
48
|
-
"angular-leaflet-app": {
|
|
49
|
-
...
|
|
50
|
-
"architect": {
|
|
51
|
-
"build": {
|
|
52
|
-
...
|
|
53
|
-
"options": {
|
|
54
|
-
...
|
|
55
|
-
"styles": [
|
|
56
|
-
"./node_modules/leaflet/dist/leaflet.css",
|
|
57
|
-
"src/styles.css"
|
|
58
|
-
],
|
|
59
|
-
...
|
|
60
|
-
}
|
|
61
|
-
...
|
|
62
|
-
}
|
|
63
|
-
...
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
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
|
|
71
|
-
|
|
72
|
-
```json
|
|
73
|
-
{
|
|
74
|
-
...
|
|
75
|
-
"projects": {
|
|
76
|
-
"angular-leaflet-example": {
|
|
77
|
-
...
|
|
78
|
-
"architect": {
|
|
79
|
-
"build": {
|
|
80
|
-
...
|
|
81
|
-
"options": {
|
|
82
|
-
...
|
|
83
|
-
"assets": [
|
|
84
|
-
"src/favicon.ico",
|
|
85
|
-
"src/assets",
|
|
86
|
-
{
|
|
87
|
-
"glob": "**/*",
|
|
88
|
-
"input": "node_modules/leaflet/dist/images/",
|
|
89
|
-
"output": "./assets"
|
|
90
|
-
}
|
|
91
|
-
],
|
|
92
|
-
...
|
|
93
|
-
}
|
|
94
|
-
...
|
|
95
|
-
}
|
|
96
|
-
...
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
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
|
|
104
|
-
|
|
105
|
-
```scss
|
|
106
|
-
.leaflet-bottom.leaflet-right {
|
|
107
|
-
display: none;
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## Uso
|
|
112
|
-
|
|
113
|
-
En nuestro archivo HTML debemos agregar la etiqueta `guajiritos-multi-chips` como se muestra a continuación.
|
|
114
|
-
|
|
115
|
-
```html
|
|
116
|
-
|
|
117
|
-
<guajiritos-map [latLabel]="latLabel" [latPlaceholder]="latPlaceholder" [latError]="latError" [lngLabel]="lngLabel"
|
|
118
|
-
[lngPlaceholder]="lngPlaceholder" [lngError]="lngError" [appearance]="appearance" [color]="color"
|
|
119
|
-
[readonly]="false" [hidden]="false" [options]="options" [circle]="circle" [icon]="icon"
|
|
120
|
-
[markers]="markers()" [formControl]="form" (markerDragend)="markerDragEnd($event)">
|
|
121
|
-
</guajiritos-map>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
Cada una de las propiedades descritas en el ejemplo anterior no son de uso requerido. A continuación se explica cada una de ellas.
|
|
125
|
-
|
|
126
|
-
```text
|
|
127
|
-
latLabel: Representa el label que se va a mostrar cuando se visualice el campo de la latitud.
|
|
128
|
-
|
|
129
|
-
latPlaceholder: Representa el placeholder que se va a mostrar cuando se visualice el campo de la latitud.
|
|
130
|
-
|
|
131
|
-
latError: Representa el error a mostrar cuando el campo latitud se encuentre vacío.
|
|
132
|
-
|
|
133
|
-
lngLabel: Representa el label que se va a mostrar cuando se visualice el campo de la longitud.
|
|
134
|
-
|
|
135
|
-
lngPlaceholder: Representa el placeholder que se va a mostrar cuando se visualice el campo de la longitud.
|
|
136
|
-
|
|
137
|
-
lngError: Representa el error a mostrar cuando el campo longitud se encuentre vacío.
|
|
138
|
-
|
|
139
|
-
appearance: Representa la apariencia del componente. Por defecto toma el valor "outline".
|
|
140
|
-
|
|
141
|
-
color: Representa el color del componente. Por defecto su valor es "accent".
|
|
142
|
-
|
|
143
|
-
readonly: Convierte en solo lectura los campos de latitud y longitud cuando sea necesario. Por defecto su valor es "false".
|
|
144
|
-
|
|
145
|
-
hidden: Fuerza que los campos de latitud y longitud se oculten. Por defecto su valor es "false".
|
|
146
|
-
|
|
147
|
-
options: Representa las opciones iniciales del mapa que va ser mostrado.
|
|
148
|
-
|
|
149
|
-
circle: Utilizado para dibujar un círculo en el mapa.
|
|
150
|
-
|
|
151
|
-
icon: Valor para representar el ícono de los marcadores que serán dibujados sobre el mapa.
|
|
152
|
-
|
|
153
|
-
markers: Listado de marcadores que serán dibujados en el mapa. Éste listado debe estar representado en forma de arreglo de marcadores.
|
|
154
|
-
|
|
155
|
-
formControl: Representa el FormControl al que se hace referencia en el formulario donde la librería es usada.
|
|
156
|
-
|
|
157
|
-
markerDragEnd: Evento que se lanza cuando el marcador es movido de una posición a otra.
|
|
158
|
-
```
|
|
159
|
-
|
|
1
|
+
# Guajiritos Map
|
|
2
|
+
|
|
3
|
+
`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.
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
Con `npm`
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm i @guajiritos/map --save
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Con `yarn`
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
yarn add @guajiritos/map
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Nota
|
|
20
|
+
|
|
21
|
+
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.
|
|
22
|
+
|
|
23
|
+
## Importación
|
|
24
|
+
|
|
25
|
+
Importar la librería como se muestra a continuación.
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import {GuajiritosMap} from "@guajiritos/map";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Luego añadirla a la sección imports.
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
imports: [
|
|
35
|
+
...
|
|
36
|
+
GuajiritosMap,
|
|
37
|
+
]
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Estilos
|
|
41
|
+
|
|
42
|
+
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
|
|
43
|
+
|
|
44
|
+
```json
|
|
45
|
+
{
|
|
46
|
+
...
|
|
47
|
+
"projects": {
|
|
48
|
+
"angular-leaflet-app": {
|
|
49
|
+
...
|
|
50
|
+
"architect": {
|
|
51
|
+
"build": {
|
|
52
|
+
...
|
|
53
|
+
"options": {
|
|
54
|
+
...
|
|
55
|
+
"styles": [
|
|
56
|
+
"./node_modules/leaflet/dist/leaflet.css",
|
|
57
|
+
"src/styles.css"
|
|
58
|
+
],
|
|
59
|
+
...
|
|
60
|
+
}
|
|
61
|
+
...
|
|
62
|
+
}
|
|
63
|
+
...
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
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
|
|
71
|
+
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
...
|
|
75
|
+
"projects": {
|
|
76
|
+
"angular-leaflet-example": {
|
|
77
|
+
...
|
|
78
|
+
"architect": {
|
|
79
|
+
"build": {
|
|
80
|
+
...
|
|
81
|
+
"options": {
|
|
82
|
+
...
|
|
83
|
+
"assets": [
|
|
84
|
+
"src/favicon.ico",
|
|
85
|
+
"src/assets",
|
|
86
|
+
{
|
|
87
|
+
"glob": "**/*",
|
|
88
|
+
"input": "node_modules/leaflet/dist/images/",
|
|
89
|
+
"output": "./assets"
|
|
90
|
+
}
|
|
91
|
+
],
|
|
92
|
+
...
|
|
93
|
+
}
|
|
94
|
+
...
|
|
95
|
+
}
|
|
96
|
+
...
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
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
|
|
104
|
+
|
|
105
|
+
```scss
|
|
106
|
+
.leaflet-bottom.leaflet-right {
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Uso
|
|
112
|
+
|
|
113
|
+
En nuestro archivo HTML debemos agregar la etiqueta `guajiritos-multi-chips` como se muestra a continuación.
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
|
|
117
|
+
<guajiritos-map [latLabel]="latLabel" [latPlaceholder]="latPlaceholder" [latError]="latError" [lngLabel]="lngLabel"
|
|
118
|
+
[lngPlaceholder]="lngPlaceholder" [lngError]="lngError" [appearance]="appearance" [color]="color"
|
|
119
|
+
[readonly]="false" [hidden]="false" [options]="options" [circle]="circle" [icon]="icon"
|
|
120
|
+
[markers]="markers()" [formControl]="form" (markerDragend)="markerDragEnd($event)">
|
|
121
|
+
</guajiritos-map>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Cada una de las propiedades descritas en el ejemplo anterior no son de uso requerido. A continuación se explica cada una de ellas.
|
|
125
|
+
|
|
126
|
+
```text
|
|
127
|
+
latLabel: Representa el label que se va a mostrar cuando se visualice el campo de la latitud.
|
|
128
|
+
|
|
129
|
+
latPlaceholder: Representa el placeholder que se va a mostrar cuando se visualice el campo de la latitud.
|
|
130
|
+
|
|
131
|
+
latError: Representa el error a mostrar cuando el campo latitud se encuentre vacío.
|
|
132
|
+
|
|
133
|
+
lngLabel: Representa el label que se va a mostrar cuando se visualice el campo de la longitud.
|
|
134
|
+
|
|
135
|
+
lngPlaceholder: Representa el placeholder que se va a mostrar cuando se visualice el campo de la longitud.
|
|
136
|
+
|
|
137
|
+
lngError: Representa el error a mostrar cuando el campo longitud se encuentre vacío.
|
|
138
|
+
|
|
139
|
+
appearance: Representa la apariencia del componente. Por defecto toma el valor "outline".
|
|
140
|
+
|
|
141
|
+
color: Representa el color del componente. Por defecto su valor es "accent".
|
|
142
|
+
|
|
143
|
+
readonly: Convierte en solo lectura los campos de latitud y longitud cuando sea necesario. Por defecto su valor es "false".
|
|
144
|
+
|
|
145
|
+
hidden: Fuerza que los campos de latitud y longitud se oculten. Por defecto su valor es "false".
|
|
146
|
+
|
|
147
|
+
options: Representa las opciones iniciales del mapa que va ser mostrado.
|
|
148
|
+
|
|
149
|
+
circle: Utilizado para dibujar un círculo en el mapa.
|
|
150
|
+
|
|
151
|
+
icon: Valor para representar el ícono de los marcadores que serán dibujados sobre el mapa.
|
|
152
|
+
|
|
153
|
+
markers: Listado de marcadores que serán dibujados en el mapa. Éste listado debe estar representado en forma de arreglo de marcadores.
|
|
154
|
+
|
|
155
|
+
formControl: Representa el FormControl al que se hace referencia en el formulario donde la librería es usada.
|
|
156
|
+
|
|
157
|
+
markerDragEnd: Evento que se lanza cuando el marcador es movido de una posición a otra.
|
|
158
|
+
```
|
|
159
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export const DEFAULT_MAP_OPTION = {
|
|
2
|
+
id: 'map',
|
|
3
|
+
center: [23.130257185291036, -82.35626220703126],
|
|
4
|
+
draggable: true,
|
|
5
|
+
zoom: 15,
|
|
6
|
+
updateWithClick: false,
|
|
7
|
+
updateWithDoubleClick: false,
|
|
8
|
+
zoomControl: true,
|
|
9
|
+
borderRadius: '8px',
|
|
10
|
+
scrollWheelZoom: false,
|
|
11
|
+
addMarker: false,
|
|
12
|
+
scrollable: false
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJmYWNlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2d1YWppcml0b3MtbWFwL3NyYy9pbnRlcmZhY2VzL2ludGVyZmFjZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaURBLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFjO0lBQzNDLEVBQUUsRUFBRSxLQUFLO0lBQ1QsTUFBTSxFQUFFLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQztJQUNoRCxTQUFTLEVBQUUsSUFBSTtJQUNmLElBQUksRUFBRSxFQUFFO0lBQ1IsZUFBZSxFQUFFLEtBQUs7SUFDdEIscUJBQXFCLEVBQUUsS0FBSztJQUM1QixXQUFXLEVBQUUsSUFBSTtJQUNqQixZQUFZLEVBQUUsS0FBSztJQUNuQixlQUFlLEVBQUUsS0FBSztJQUN0QixTQUFTLEVBQUUsS0FBSztJQUNoQixVQUFVLEVBQUUsS0FBSztDQUNsQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXHJcbi8qKlxyXG4gKiBNYXAgb3B0aW9ucyBpbnRlcmZhY2VcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgTWFwT3B0aW9uIHtcclxuICBpZDogc3RyaW5nO1xyXG4gIGNlbnRlcj86IFtudW1iZXIsIG51bWJlcl07XHJcbiAgZHJhZ2dhYmxlPzogYm9vbGVhbjtcclxuICB1cGRhdGVXaXRoQ2xpY2s/OiBib29sZWFuO1xyXG4gIHVwZGF0ZVdpdGhEb3VibGVDbGljaz86IGJvb2xlYW47XHJcbiAgem9vbT86IG51bWJlcjtcclxuICBib3JkZXJSYWRpdXM/OiBzdHJpbmc7XHJcbiAgc2Nyb2xsYWJsZT86IGJvb2xlYW47XHJcbiAgem9vbUNvbnRyb2w/OiBib29sZWFuO1xyXG4gIHNjcm9sbFdoZWVsWm9vbT86IGJvb2xlYW47XHJcbiAgYWRkTWFya2VyPzogYm9vbGVhbjtcclxufVxyXG5cclxuLyoqXHJcbiAqIE1hcmtlciBpbnRlcmZhY2VcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgTWFya2VyTWFwIHtcclxuICBsYXQ6IG51bWJlcjtcclxuICBsbmc6IG51bWJlcjtcclxuICBkcmFnZ2FibGU/OiBib29sZWFuO1xyXG59XHJcblxyXG4vKipcclxuICogSWNvbiBpbnRlcmZhY2VcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgSWNvbiB7XHJcbiAgaWNvblNpemU6IFtudW1iZXIsIG51bWJlcl07XHJcbiAgaWNvbkFuY2hvcjogW251bWJlciwgbnVtYmVyXTtcclxuICBpY29uVXJsOiBzdHJpbmc7XHJcbiAgaWNvblJldGluYVVybD86IHN0cmluZyxcclxuICBzaGFkb3dVcmw/OiBzdHJpbmcsXHJcbiAgcG9wdXBBbmNob3I/OiBbbnVtYmVyLCBudW1iZXJdLFxyXG4gIHRvb2x0aXBBbmNob3I/OiBbbnVtYmVyLCBudW1iZXJdLFxyXG4gIHNoYWRvd1NpemU/OiBbbnVtYmVyLCBudW1iZXJdLFxyXG59XHJcblxyXG4vKipcclxuICogQ2lyY2xlIG1hcCBpbnRlcmZhY2VcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgQ2lyY2xlTWFwIHtcclxuICBjZW50ZXI6IE1hcmtlck1hcDtcclxuICByYWRpdXM6IG51bWJlcjtcclxufVxyXG5cclxuZXhwb3J0IGNvbnN0IERFRkFVTFRfTUFQX09QVElPTjogTWFwT3B0aW9uID0ge1xyXG4gIGlkOiAnbWFwJyxcclxuICBjZW50ZXI6IFsyMy4xMzAyNTcxODUyOTEwMzYsIC04Mi4zNTYyNjIyMDcwMzEyNl0sXHJcbiAgZHJhZ2dhYmxlOiB0cnVlLFxyXG4gIHpvb206IDE1LFxyXG4gIHVwZGF0ZVdpdGhDbGljazogZmFsc2UsXHJcbiAgdXBkYXRlV2l0aERvdWJsZUNsaWNrOiBmYWxzZSxcclxuICB6b29tQ29udHJvbDogdHJ1ZSxcclxuICBib3JkZXJSYWRpdXM6ICc4cHgnLFxyXG4gIHNjcm9sbFdoZWVsWm9vbTogZmFsc2UsXHJcbiAgYWRkTWFya2VyOiBmYWxzZSxcclxuICBzY3JvbGxhYmxlOiBmYWxzZVxyXG59OyJdfQ==
|