Problems while updating zoom level and new center for the map.

[Prashanth-Thomas]

This is more of a question. How would one have to make the map move to a newly assigned center(lat. lng) with a new zoom level???

lets say i have 3 textboxes and a button. One textbox accepts latitude value and the other a longitude value. The 3rd text box accepts the zoom level(any number between 6 to 16).

when i click on the button the map below it should recenter itself to the latitude and longitude specified and also apply the zoom factor specified.

How would i make the map do this?

I have tried the following: <yaga-map [zoom]="zoomVal" [lat]="centralLatitude" [lng]="centralLongitude"> . . . .

Internally in my TS file of this component i assign the textbox values to the respective variables. The result is: the zoom does not apply. the longitude(x-axis) shift the point to the center the latitude does not apply.

Any help would be great, Thanks :)

[atd-schubert]

Normally Angular keeps all the data in the model in sync. So you just have to change the value in your input, like this:

<yaga-map [zoom]="zoomVal" [lat]="latVal" [zoom]="lngVal"></yaga-map
Zoom: <input type="number" [(ngModel)]="zoomVal"/>
Lat: <input type="number" [(ngModel)]="latVal"/>
Lng: <input type="number" [(ngModel)]="lngVal"/>

If you want to apply the changes only by submitting the button you have to create another property in your controller like this:

<yaga-map [zoom]="currentZoomVal" [lat]="currentLatVal" [zoom]="currentLngVal"></yaga-map
Zoom: <input type="number" [(ngModel)]="newZoomVal"/>
Lat: <input type="number" [(ngModel)]="newLatVal"/>
Lng: <input type="number" [(ngModel)]="newLngVal"/>
<input type="button" (click)="applyZoomAndCenter()"/>

In your applyZoomAndCentermethod you have to do something like this:

class AppComponent {
  // ...
  public applyZoomAndCenter() {
    this.currentZoomVal = this.newZoomVal;
    this.currentLatVal = this.newLatVal;
    this.currentLngVal = this.newLngVal;
  }
}

Solves this your issue? Please close it, if it does...

[Prashanth-Thomas]

@atd-schubert I had used the exact same code with respect to the button implementation.

The code is as follows

HTML

<div style="height: 500px">
  Lat
  <input [(ngModel)]="newLatVal" type="text">
  Lng
  <input [(ngModel)]="newLngVal" type="text">
  ZoomVal
  <input [(ngModel)]="newZoomVal" type="text">

  <button (click)="changeMapCenterAndZoom()">Click</button>
  <yaga-map
    [zoom]="currentZoomVal"
    [lat]="currentLatVal"
    [lng]="currentLngVal"
    [minZoom]="1"
    [maxZoom]="20">
    <yaga-zoom-control></yaga-zoom-control>
    <yaga-scale-control [metric]="true" [imperial]="false"></yaga-scale-control>
    <yaga-marker [lat]="currentLatVal" [lng]="currentLngVal">
      <yaga-icon
        [iconUrl]="'./assets/marker-icon.png'"
        [iconSize]="[25, 41]"
        [iconAnchor]="[13, 41]"
        [shadowUrl]="'./assets/marker-shadow.png'"></yaga-icon>
      <yaga-popup>This is the content of the popup</yaga-popup>
    </yaga-marker>
    <yaga-tile-layer [url]="tileLayerUrl">
    </yaga-tile-layer>
  </yaga-map>
</div>

Component Code

export class WorldMapComponent {
  tileLayerUrl: string;
  newLatVal= 53;
  newLngVal = 8;
  newZoomVal = 10;
  centerLatVal= 53;
  centerLngVal = 8;
  centerZoomVal = 10;
  switchData: any;
  constructor() {
     /*OSM_TILE_LAYER_URL this is imported*/
     this.tileLayerUrl = OSM_TILE_LAYER_URL;
 }

  changeMapCenterAndZoom() {
    this.centerLatVal = this.newLatVal;
    this.centerLngVal = this.newLngVal;
    this.centerZoomVal = this.newZoomVal;
  }
}

In the above code, the marker gets the new latitude and longitude value and plots them properly each time. But the map does not center to the new Latitude and new Longitude, the Zoom also messes up at times.

Ran few manual tests and tried to deduce when the map centers wrongly. Found out that wen all the 3 values change, the map centering acts funny.

Here are few examples for when they fail: Example 1 Values: Latitude Longitude Zoom Status 53____8____10Initial(Pass) 53.88_8.66__16_____Pass 54____8__15Fail

Example 2 Values: Latitude Longitude Zoom Status 53____8____10Initial(Pass) 54__8.615Pass 53____8____16___Fail

When i say status = Fail, it means that the marker has plotted fine. But the re-centering to that point with the right zooming failed. It re-centers in another location(noticed that the longitude is right, but the latitude and zoom isn't right).

[atd-schubert]

I recognized a similar problem in a specific browser. Before I take a closer look at this issue, can you take a look into your Web-Inspector and tell me your error message, if you have one? I just guess that you have a problem after changing your value to a "blank" value. After that in some browsers a string is returned as value. You can fix it by rewriting the method like this:

changeMapCenterAndZoom() {
    this.centerLatVal = parseFloat(this.newLatVal);
    this.centerLngVal = parseFloat(this.newLngVal);
    this.centerZoomVal = parseFloat(this.newZoomVal);
}

Does it work for you now?

[Prashanth-Thomas]

Hi, tried this, made sure that every variable type involved here was a number. Also made the text box type a number. But did not seem to work.

So just to make sure. I tried the following. Removed the three textbox related to latitude, longitude and zoom. Only placed 2 buttons which help in shifting the position of the centered latitude, longitude and zoom level.

Used the following code

//Initial values
centerLatVal= 53;
centerLngVal = 8;
centerZoomVal = 10;

In html above the map code added the following

<button (click)="shift1Call()">Shift 1</button>
<button (click)="shift2Call()">Shift 2</button>

Placed 2 functions each function related to its respective button

  shift1Call(){
    this.centerLatVal = 53.88;
    this.centerLngVal = 8.66;
    this.centerZoomVal = 16;
  }

  shift2Call(){
    this.centerLatVal= 54;
    this.centerLngVal = 8;
    this.centerZoomVal = 15;
  }

Even after implementing these changes, faced the same issue. The center Lat and Lng values are linked to a marker and the maps [lat] and [lng] properties (which deal with centralizing the map to the specified point). The marker seems to be shifting to the correct position. But the centralizing and zoom factor of the map doesn't seem to move to the desired position. The zoom also fails to apply at times. This happens when all three values are changed. Again, it works for the 1st time perfectly, ie: when button "Shift 1" is clicked, the shift, centralizing and zooming happens as intended. It fails when button "Shift 2" is clicked.

Tested this in Firfox and Chrome. Both resulted in the same issue.

[swan-front-end]

You can use "setView" method. It's solved problem for me.

[Prashanth-Thomas]

@vlad-mokryi Brilliant, this works perfectly.

In case anyone reads this in future and has a similar issue, follow the below steps

1. Place an Id on the yaga-map element <yaga-map #yagaMapId>

2. Use 'ViewChild' in the component to get a hold of the map in your code. @ViewChild('yagaMapId') yagaMapId;

3. Use the following code where change in Lat, Lng or Zoom occurs this.yagaMapId.setView([this.centerLatVal, this.centerLngVal], this.centerZoomVal);