How do I reset the view of my map back to my location in Ionic with Leaflet and OpenStreetMap?

Question

Right now I'm working on a locationbased App in Ionic v4. Now I want to be able to reset the map view back to my location. I guess I need to use setView again to achieve this, but I don't know the syntax to do that.

Here is all the relevant Code I've got so far:

home.page.html

<ion-content>
  <div class="home-button" (click)="centerMap()">
    <ion-icon name="navigate"></ion-icon>
  </div>
  <div id="map"></div>
</ion-content>

home.page.ts

centerMap() {
    this.mapService.backToCenter();
}

map.service.ts

loadmap(map) {
    this.map = map;
    this.map.locate({
        setView: true,
        maxZoom: 22,
        minZoom: 12
    })
    .on('locationfound', e => {
        const markerGroup = leaflet.featureGroup();
        const marker: any = leaflet
            .marker([e.latitude, e.longitude], {
                icon: positionIcon,
                zIndexOffset: -1000
            })
            .on('click', () => {
                console.log('Position marker clicked');
            });
        markerGroup.addLayer(marker);
        this.map.addLayer(markerGroup);
        this.loadMarkers(this.dropService.getDrops());
    });
    return this.map;
}
backToCenter() {
    console.log('Center Map');
}

Is there a way to trigger a new setView on click on a button?

Answer 1

You can store your initial location and zoom level in variables and use map.setView method to go back to your initial location on click of your button.

backToCenter(){
    map.setView([latitude, longitude], zoom);
}