interactive-map v0.0.1

Interactive ma

Descripción

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.

Es necesario contar con una key de Google Maps para poder trabajar con este componente.

Igual, es necesario la importación de los siguientes scripts en el archivo index.html.

<!-- interactive map -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

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:

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

Agregar al modulo principal de Angular

import { InteractiveMapModule } from 'interactive-map';
@NgModule({
  imports: [
    ...,
    InteractiveMapModule
  ],
})
export class AppModule { }

Como usar

<axy-interactive-map
  [idmapa]="'1'"
  [mapOptions]="mapOptionsExample"
  [dataBehaviourSubject]="dataBehaviourSubjectMap"
  [_storage]="_storage"
  [_consumeService]="_consumeService"
  [pathPlano]="pathPlano"
  [pathRouter]="pathRouter"
  [pathMarker]="pathMarker"
>
</axy-interactive-map>

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.

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.

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<any> {
    return this._http
      .get(this._mapsGoole.replace("{coord}", data))
      .pipe(catchError(this.handleError));
  }
}

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);

La siguiente imagen muestra el mapa con un estado activado.

La siguiente imagen muestra el modal que se abre cuando se selecciona un estado activo.

Contribuciones

Mediante pull-request se evaluan los cambios a componentes, mas información: francisco.rodriguez@axity.com

Axity