Soy nuevo en Angular2 y Leaflet Map. Estoy tratando de crear un menú desplegable, cuyo cambio de valor actualizará el Mapa a uno nuevo. Por ejemplo, si el valor desplegable es Londres, mostrará la posición del mapa para Londres, y si cambio el valor desplegable a Nueva York, el mapa se reubicará en Nueva York.

side-nav.component.ts --> aquí está mi código desplegable

 <select class="form-control" [(ngModel)]="selectedGeo" > <option value="" nonselected class="nonvalue">--Select--</option> <option *ngFor="let geoArea of geoAreas" value="{{geoArea.value}}"> {{geoArea.value}} </option> </select>

lado-nav.component.ts -->

 geoAreas: Array<Object> =[] = [ {"id":"1","value":"New York"}, {"id":"2","value":"London"}, {"id":"3","value":"India"}

];

mapa.componente.html

 <div class="col-8"> <div class="card"> <div id="londonMap" style="height: 500px"></div> </div>

map.component.ts

 import { Component, OnInit } from '@angular/core'; import * as L from "leaflet"; import { Map } from "leaflet"; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'] }) export class MapComponent implements OnInit { public map: Map; constructor() { } ngOnInit() { this.londonMap = L.map("londonMap", { zoomControl: false, center: L.latLng(51.505, -0.09), zoom: 12, minZoom: 4, maxZoom: 19 }); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(this.londonMap); this.NYMap = L.map("NYMap", { zoomControl: false, center: L.latLng(42.736424, -75.762713), zoom: 7, minZoom: 4, maxZoom: 19 }); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(NYMap); } }