title: Why the request is not done?
body: <p>The component call to the method getCityCoords() but it never ends.</p>
  
  <p>It retrieves some objects with geographical and weather information, if there only a few objects it works, and I have 200 code, but if there are more, it never ends.</p>
  
  <p><a href="https://i.stack.imgur.com/FdFee.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FdFee.png" alt="enter image description here"></a></p>
  
  <p>What I have investigated indicates that there are a problem with the connection, some stuff about TCP, but I don´t know how to solve that. There´s some way to close the connections?</p>
  
  <p>This is the code:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MapService } from '../../services/map.service';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  import { Map } from '../../models/map';
  
  import { Icon, icon, Marker, marker } from 'leaflet';
  
  declare let L;
  var map;
  
  @Component({
    selector: 'map-component',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
  })
  export class MapComponent implements OnInit {
  
    private defaultIcon: Icon = icon({
      iconUrl: 'assets/leaflet/marker-icon.png',
      shadowUrl: 'assets/leaflet/marker-shadow.png',
      iconSize: [41, 51], // =&gt; random values you have to choose right ones for your case
      iconAnchor: [20, 51] // =&gt; random values too
    });
  
    public coordinates: [number];
    constructor(
      private _mapService: MapService, private _router: Router
    ) {
  
    }
  
    ngOnInit() {
  
      map = L.map('map').setView([0, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
      }).addTo(map);
      this.getLocations();
    }
  
    getLocations() {
  
      var geoJsonMulti = {
        "type": "GeometryCollection",
        "geometries": [
  
        ]
      }
  
      this._mapService.getCoordinates().subscribe(
        response =&gt; {
          if (!response) {
            this._router.navigate(['/']);
          } else {
            var layer = response.cityFeatures.cities;
            layer.forEach(layer =&gt; {
              geoJsonMulti.geometries.push(layer);
            })
          }
          var myStyle = {
            "color": "#ff7800",
            "weight": 5,
            "opacity": 0.65
          };
          L.geoJSON(geoJsonMulti, {
            style: myStyle
          }).addTo(map);
  
          var myIcon = L.icon({
            iconUrl: 'assets/leaflet/marker-icon.png',
            iconSize: [41, 51],
            iconAnchor: [20, 51],
            popupAnchor: [-3, -76],
            shadowUrl: 'assets/leaflet/marker-shadow.png',
            shadowSize: [68, 95],
            shadowAnchor: [22, 94]
          });
  
          var options={
  
          }
  
  
          for(let i=0;i&lt;geoJsonMulti.geometries.length;i++){
            var arrayCoords=[geoJsonMulti.geometries[i].coordinates[1],geoJsonMulti.geometries[i].coordinates[0]]
            var marker=L.marker(arrayCoords, {icon: myIcon,clickable: false}).addTo(map).bindPopup("&lt;b&gt;Average temp: &lt;/b&gt;"+geoJsonMulti.geometries[i].averageTemp+
            "&lt;/br&gt; &lt;b&gt;Average precipitations: &lt;/b&gt;"+geoJsonMulti.geometries[i].averageRain);
          }
  
  
        },
  
        error =&gt; {
          let errorMessage = &lt;any&gt;error;
          if (errorMessage !== null) {
            let body = JSON.parse(error._body);
          }
        }
      );
    }
  }
  </code></pre>