CODEWITHSUNDEEP
angularagm-map
lifespunchingbag
lifespunchingbag

Reputation: 129

AGM Map with *ngIf

I'm trying to show a marker label but only on a certain zoom level or greater but it isn't allowing me to use *ngIf. 

<div *ngIf="[zoom]=>15"        
[label]="{color: 'yellow', text: point.ID, fontSize: '4'}" 
</div>

How do I show a marker or its label on a certain zoom level in Angular Agm Map?

Component.html

<body>

    <div class="map-body">    
        <agm-map class="ngmap" style="text-shadow: 0px 0px 6.2px grey;" 
        [latitude]="30" [longitude]="-79" [styles]="mapStyle" 
        [zoom]="13" [streetViewControl]="false" (mapReady)="onMapReady($event)">            

            <agm-marker         
                *ngFor="let point of points"                
                [latitude]="point.latitude"
                [longitude]="point.longitude" 
                *ngIf="zoom=>15" [label]="{color: 'yellow', text: point.ID, fontSize: '4'}" 
                else [label]=""
                [openInfoWindow]="true"
                (mouseOver)="infoWindow.open();"
                (mouseOut)="infoWindow.close();"
                [iconUrl]="{url:'.././assets/images/icons8-50.png',
                    scaledSize: {height: 20, width: 20}
                    }"                
                >
            <agm-info-window
                [disableAutoPan]="true" #infoWindow>{{point.test}}: <br>{{point.Name}}
            </agm-info-window>                
            </agm-marker
            >            
        </agm-map>
    </div>
</body>

Upvotes: 0

Views: 788

Answers (1)

Silvio
Silvio

Reputation: 6031

You can't bind to properties (i.e. [label]="") inside *ngIf.

Instead, get rid of *ngIf at the template and bind [label] to a method that returns the correct object.

Example:

component.html:

<agm-marker *ngFor="let point of points" [latitude]="point.latitude" [longitude]="point.longitude"
  [label]="getMarker(point)" [openInfoWindow]="true" (mouseOver)="infoWindow.open();" (mouseOut)="infoWindow.close();"
  [iconUrl]="{url:'.././assets/images/icons8-50.png', scaledSize: { height: 20, width: 20 }>

and on component.ts

@Component({ ... })
export class Component {
  getMarker(point: any): any {
    const marker = { color: 'yellow', text: point.ID, fontSize: '4' };
    return (this.zoom >= 15) ? marker : {};
  }
}

Upvotes: 0

Related Questions