marker dose not show after add

[Ali Akbar Azizkhani]

After add marker to map .marker dose not show but after drag or touch or click on map marker appear on map

@Component({
    selector: 'customer-map',
    templateUrl: './customer-map.component.html'
})
export class CustomerMapComponent implements OnInit {

    options = {
        layers: [
            tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '...'})
        ],
        zoom: 11,
        center: latLng(environment.lat, environment.lng)
    };
    markers: Marker[] = [];
    constructor(private customerService: CustomerService) {
    }

    ngOnInit() {
           loadGrid();
    }

    loadGrid() {
        this.markers = [];
        this.customerService.search(this.getQueryParam()).subscribe(response => {
            response.items.forEach(c => {
                this.addMarker(c);
            });
        });
    }


    addMarker(customer?: CustomerModel) {
        if (customer.latitude && customer.longitude && customer.latitude.length > 0) {
            const newMarker = marker(
                [Number(customer.latitude), Number(customer.longitude)],
                {
                    title: customer.lastName + ' ' + customer.provinceTitle + '' + customer.cityTitle,
                    icon: icon({
                        iconSize: [25, 41],
                        iconAnchor: [13, 41],
                        iconUrl: 'assets/marker-icon.png',
                        iconRetinaUrl: 'assets/marker-icon-2x.png',
                        shadowUrl: 'assets/marker-shadow.png'
                    })
                }
            );
            this.markers.push(newMarker);
        }
    }

}

<div class="mat-table__wrapper">
            <div style="height: 500px;"
                 leaflet
                 [leafletOptions]="options"
                 [leafletLayers]="markers">
            </div>
        </div>

[Ryan Blace]

This looks like it should work.

Things that could cause it to fail might include

• using changeDetection: ChangeDetectionStrategy.OnPush in a parent component.
• using an earlier version of this library that treated the input array as immutable.
• if your loadGrid code is crashing, therefore killing the next round of change detection.
• somehow your service that returns the markers is running outside of the angular zone.

Is it only interacting with the map that causes the markers to appear? Or do other page interactions (e.g., clicking a button) also make it work?

[Ryan Blace]

Closing cause no response