Refresher

This little helper is built into Ionic and can easily be implemented so that a user pulls down from the top of the screen to “F5”-reload the page. The documentation is at ionicframework.com/…/components/…/Refresher/.

Components in Ionic are high-level building blocks. They are documented

• as showcases on ionicframework.com/docs/components/
• and in their API documentation at ionicframework.com/docs/api/

Refershing the page with the map

In the file src/pages/map/map.html there is at the top:

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

This “component” then triggers in map.ts doRefresh():

  doRefresh(refresher) {
    this.reloadMap();
    setTimeout(() => {
      refresher.complete();
    }, 2000);
  }

To prevent an infinite loop e.g. when the network is down the whole execution is limited to two seconds.