I'm trying to fetch data for a Leaflet map in an Angular app. For each zoom level I require different resolution data, which is why on `moveend` I make another call to the backend.

**map.component**

```js
    // Every time a movement is done on the map the calls are done again.
    this.map.on('moveend', () => {
      this.mapService.drawHeatMap();
    });

```

**map.service.ts**

```js
  public drawHeatMap(): void {
    this.fetchData().subscribe((data) => {
      // DO STUFF WITH DATA
    });
  }

```

```js
private fetchData(): Observable<Leaflet.HeatLatLngTuple[]> {
    return this.http.get<ResponseType>(URL).pipe(
      map(({ data }: ResponseType) => {
        return data.map((data: any) => {
          // PARSE DATA
        });
      })
    );
  }

```

During testing I saw that scroll in and out a lot makes the calls to my API get stack up, which is something I want to avoid.

When I tried canceling pending calls with `switchMap()` I don't get the desired result because the calls are not identical...

**Example request URLs from two different calls:**

`.../api/ZoomLevel=10&swLong=3&neLong=5&swLat=50&neLat=51`

`.../api/ZoomLevel=11&swLong=2&neLong=4&swLat=49&neLat=50`

Help to cancel the previous call **although it is not identical** would be greatly appreciated.