Leaflet Marker Disappears in a second after load


#1

I am trying to add a marker on leaflet map.After 1-second marker disappears.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import leaflet from 'leaflet';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';

@Component({
    selector: 'page-map',
    templateUrl: 'map.html'
})
export class MapPage {

    @ViewChild('map') mapContainer: ElementRef;

    api: string;
    msgData: FirebaseListObservable<any[]>;

    constructor(private fire: AngularFireAuth, private db: AngularFireDatabase, public navCtrl: NavController) {
        this.api = 'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-day-v2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGlmZXN1eHRyIiwiYSI6ImNqOGp4bjZsNTA3M2EycXJ0cjhmaHMzbWIifQ.cV0Jbzh0fpEHQdANWN0Ejg'
    }

    ionViewDidEnter() {
        this.loadmap();
    }
    
    getObjectWithoutKnowingKey(data) {
        let objects = [];
        for (var propName in data) {
            if (data.hasOwnProperty(propName)) {
                objects.push(data[propName]);
            }
        }
        return objects;
    }
    loadmap() {

        this.msgData = this.db.list(`/messages/`).valueChanges();
        this.msgData.take(1).subscribe(msg => {

            this.map = leaflet.map("map").fitWorld();
            let markerGroup = leaflet.featureGroup();

            leaflet.tileLayer(this.api, { attributions: '', maxZoom: 18 }).addTo(this.map);

            this.map.locate({
                setView: true,
                maxZoom: 40
            });

            let marker: any = leaflet.marker([40, 39]).on('click', () => {
                marker.bindPopup("testing").openPopup();
            });
            markerGroup.addLayer(marker);
            this.map.addLayer(markerGroup);

            //let data = msg.map(this.getObjectWithoutKnowingKey)

            //this.map.addLayer(markerGroup);
        });
    }
    ionViewDidLeave() {
        this.map.remove();
    }
}

Don’t mind database code, I will use it later for database purposes. Right now I’m just trying to put a marker on the map.I guess something wrong with .locate function because if delete it it works.thanks


#2

edited…locate function might cause the problem