Skip to main content

Centrar en ubicación

En este momento queremos centrar la cámara del mapa en unas coordenadas que nosotros queramos especificar.

Hasta el momento, si no añadimos esta información utilizará una coordenadas por defecto teniendo como referencia un array con dos números en los que estarán la latitud y la longitud.

Las coordenadas lo tenemos que introducir en la siguiente estructura de la propiedad:

configMap: IConfigMap = {    center: [number, number],    // [lat, lng] as  [number, number]};

Con esta información añadida en el componente:

import { Component } from '@angular/core';import { IConfigMap } from '@mugan86/ng-leaflet';import { PLACES_LIST_LOCATIONS } from './locations';
@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'],})export class AppComponent {  locations = PLACES_LIST_LOCATIONS;  locationsKeys = Object.keys(this.locations);
  configMap: IConfigMap = {    center: this.locations.BARCELONA as [number, number],    // [lat, lng] as  [number, number]  };}

Añadiendo la información en el HTML:

<ng-leaflet-map  [mapId]="'center__position'"  [config]="configMap"></ng-leaflet-map>

Obteniendo el siguiente resultado:

Map in Center

Y aquí la demo que podéis usar para probarlo y jugar con ello:

Stackblitz - Centrar en ubicación