title: Angula-leaflet + json markers
body: <p>I am using leaflet to display a map with center view on America, I would like to display all the markers I am also wondering is it because of the huge amount of data I have that it is not displaying or is that not a problem? I have around 12000 units. I am unable to display the markers. I have a JSON file and I have a problem with getting the latitude and longitude parameters for creating markers array on my map.</p>
  <p>Json File</p>
  <pre><code>{
      &quot;PlantID&quot;: 1,
      &quot;PlantState&quot;: &quot;AK&quot;,
      &quot;PlantName&quot;: &quot;7-Mile Ridge Wind Project&quot;,
      &quot;UtilityName&quot;: &quot;Alaska Power and Telephone Co&quot;,
      &quot;UtilityID&quot;: 219,
      &quot;Latitude&quot;: 63.210689,
      &quot;Longitude&quot;: -143.247156,
      &quot;NetGeneration&quot;: 0
    },
    {
      &quot;PlantID&quot;: 2,
      &quot;PlantState&quot;: &quot;AK&quot;,
      &quot;PlantName&quot;: &quot;Agrium Kenai Nitrogen Operations&quot;,
      &quot;UtilityName&quot;: &quot;Agrium US Inc&quot;,
      &quot;UtilityID&quot;: 179,
      &quot;Latitude&quot;: 60.6732,
      &quot;Longitude&quot;: -151.3784,
      &quot;NetGeneration&quot;: 0
    },
  </code></pre>
  <p>map.service.ts</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import * as L from 'leaflet';
  
  @Injectable({
  providedIn: 'root',
  })
  export class MarkerService {
  baseUrl: string = 'http://localhost:3000/PLNT20' //json file
  constructor(private http: HttpClient) {}
  
  makesMarkers(map: L.Map): void {
  this.http.get(this.baseUrl).subscribe((res : any) =&gt; {
  
    
    for(const c of res){
      const lat = c.latitude;
      const long = c.longtitude;
     
      const marker = L.marker([long,lat]).addTo(map);
      /*marker.bindPopup( `&lt;center&gt;
                          &lt;p&gt;
                            &lt;strong&gt;'${c.PlantID}'&lt;/strong&gt;
                          &lt;/p&gt;
                        &lt;/center&gt;`
      ).openPopup() */
    }
  
   });
   }
   }
  </code></pre>
  <p>map.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import * as L from 'leaflet';
  import { MarkerService } from 'src/app/map.service';
  
  @Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.scss']
  })
  export class MapComponent implements OnInit {
  
    private map: any;
    
  
    private initMap(): void {
      this.map = L.map('map').setView([40,-100],5)
  
      const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        
        attribution: '&amp;copy; &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt;'
      });
      
  
      tiles.addTo(this.map);
    
    }
  
    constructor(private markerService : MarkerService) { }
  
    ngAfterViewInit():void{
      this.initMap();
      this.markerService.makesMarkers(this.map);
    }
  
  
    ngOnInit(): void {
      this.initMap();
    }
    
  
  }
  </code></pre>