Refresh Leftlet Map by a drop down in angular2

Question

I am new to Angular2 and Leaflet Map. I am trying to create a dropdown, which value change will refresh the Map to a new One. For example if the drop down value is London, it will show the Map position for london, and if I change the drop down value to New York, the map will re-position to New York.

side-nav.component.ts --> here my drop down code is there

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

side-nav.component.ts -->

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

];

map.component.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);
}
}

Welcome to SO! Where is your code to handle the select value change? — ghybs, Apr 26 '17 at 03:51

score 1 · Answer 1 · answered Apr 26 '17 at 03:57

Instead of changing the map container, you could very simply request the current map to change its view, typically using setView, panTo or even flyTo.

If you just switch the map container, and user has already moved / panned around the new map, he/she will just see the last position the new map has been moved to, instead of the initial position.

You will need to record the destination coordinates into your select, or at least retrieve them from some centralized variable (could be your geoAreas).

Here is an example with flyTo (plain JS): http://jsfiddle.net/3v7hd2vx/

Thanks for the response. I have one more issue in getting the map variable from map.component.ts in side-nav.component.ts. Thats why not able to use this settings. — swastik padhy, Apr 26 '17 at 09:38

Refresh Leftlet Map by a drop down in angular2

1 Answers1