Componente que genera una mapa, haciendo uso de Google Maps. Es posible mostrar información más detallada del estado de la república, cuando se le da clic. Se resalta de color amarillo el estado, cuando se cumplen las condiciones.
npm install interactive-maphtml
`
!graph-ticket-sla
Versiones
Este proyecto fue generado con Angular CLI version 6.0.8.
Instalación
La descarga de las librerias se hace directamente en el Nexus Axity: http://devtools.axity.com/nexus3/repository/npm-group/
Con las siguientes instrucciones:
- npm adduser --registry http://devtools.axity.com/nexus3/repository/npm-group/ (Ingresar credenciales Active Directory)
- npm install three-steps-selector --registry http://devtools.axity.com/nexus3/repository/npm-group/ --save
Para no tener que colocar el registry en cada ocasión, solo agregar un archivo llamado: .npmrc al nivel de donde se encuentre el archivo package.json, con el siguiente contenido:
`javascript
add the URL of the repository
registry = http://devtools.axity.com/nexus3/repository/npm-group/
`
Esto permite ejecutar los comandos que comunmente utilizamos: npm install, pero apuntando al repositorio nexus de Axity.
> El repositorio Nexus de Axity descarga librerias internas y tambien las publicas de repositorio de npm.
$3
`typescript
import { InteractiveMapModule } from 'interactive-map';
@NgModule({
imports: [
...,
InteractiveMapModule
],
})
export class AppModule { }
`
Como usar
`html
[mapOptions]="mapOptionsExample"
[dataBehaviourSubject]="dataBehaviourSubjectMap"
[_storage]="_storage"
[_consumeService]="_consumeService"
[pathPlano]="pathPlano"
[pathRouter]="pathRouter"
[pathMarker]="pathMarker"
>
`
> El componente se autoajusta al contenedor donde se coloque, por lo que es necesario colocar el componente dentro de un elemento contenedor como el ejemplo.
> El dato que reciba el dataBehaviourSubject, será con esta estructura. A través del BehaviorSubject, con su método _next()_, se hará el envío de la información.
> Las propiedades pathPlano, pathRouter y pathMarker son usadas para cuando se da clic en un estado. Corresponden a la ruta donde se encuentran dichas imágenes a mostrar.
> Requiere un objeto _mapOptions_, el cuál configurará atributos del mapa.
`typescript
const mapOptionsExample = {
"options": {
"latitude": 21.8055242, // Coordenadas para centrar el mapa.
"longitud": -102.2809186, // Coordenadas para centrar el mapa.
"zoom": 5, // Nivel de zoom
"fullscreenButton": true, // Si se añade el botón de pantalla completa.
"miniMap": true, // Si se añade el mapa pequeño, del lado izquierdo.
"setstyle": true, // Define el estilo del mapa.
"demoAlarmFlat": true // Permite alertas.
}
}
`
> Requiere de dos objetos; _\_storage_ y _\_consumeService_; estos son servicios de angular. El de _storage_ debe de tener métodos para buscar si un elemento está en el localStorage; un método más para obtener del localStorage, por medio del _key_ y otro método para escribir en el localStorage. El servicio _\_consumeService_; debe de tener un método que realice la consulta a la API de Google Maps. Se especifican éstos en el siguiente fragmento de código.
`typescript
class StorageService {
// Método que valida si existe un campo en el localStorage.
existItem(key) {
return localStorage.getItem(key) != null;
}
// Método que obtiene el item del localStorage, a través del key.
getItem(key: string): any {
return JSON.parse(localStorage.getItem(key));
}
// Método que hace un set de un valor en el localStorage.
setItem(key: string, value: any) {
localStorage.removeItem(key);
localStorage.setItem(key, JSON.stringify(value));
}
}
class ConsumeService {
// Url para consultar coordenadas. ¡Se requiere KEY!
private _mapsGoole = https://maps.googleapis.com/maps/api/geocode/json?latlng={coord}&key=YOUR_KEY;
// Método que obtiene información de la API de GoogleMaps, a partir de las coordenadas.
executeGeoCooding(data: any): Observable {
return this._http
.get(this._mapsGoole.replace("{coord}", data))
.pipe(catchError(this.handleError));
}
}
`
`typescript
const exampleMap = [
{
serialdevice: "Q2KD-ZW52-MLMH",
state: "N.L.",
pipeNumber: "08",
pipeType: "cext",
ocurrencias: 1,
network: {
id: "L_685673043267165925",
pipeNumber: "08",
pipeType: "cext",
link:
"https://intellego365.sharepoint.com/sites/SMNYLOperacion/Informacion_Dia1/Informacion_por_sitio/08-MTY_TEVO-LAN/ID08.pdf",
organizationId: "685673043267158072",
name: "MTY_TEVO-LAN",
timeZone: "America/Los_Angeles",
type: "combined"
},
device: {
lat: 25.64136,
lng: -100.31997,
address:
"Av. Pedro RamÃrez Vázquez No. 200-B. Col. Valle Oriente C.P. 66269",
serial: "Q2KD-ZW52-MLMH",
mac: "e0:cb:bc:8e:5b:83",
lanIp: "129.170.75.23",
tags: " TEVO ",
url:
"https://n218.meraki.com/MTY_TEVO-LAN-wir/n/Iw5f_cAd/manage/nodes/new_list/247165646429059",
networkId: "L_685673043267165925",
name: "MTY_TEVO_AP03",
model: "MR42",
firmware: "wireless-25-13",
today: { $date: 1588205562173 }
}
}
];
// Envío de información desde el padre al componente.
dataBehaviourSubjectMap.next(exampleMap);
``