Angula-leaflet + json markers - json

Question

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.
Json File
{
"PlantID": 1,
"PlantState": "AK",
"PlantName": "7-Mile Ridge Wind Project",
"UtilityName": "Alaska Power and Telephone Co",
"UtilityID": 219,
"Latitude": 63.210689,
"Longitude": -143.247156,
"NetGeneration": 0
},
{
"PlantID": 2,
"PlantState": "AK",
"PlantName": "Agrium Kenai Nitrogen Operations",
"UtilityName": "Agrium US Inc",
"UtilityID": 179,
"Latitude": 60.6732,
"Longitude": -151.3784,
"NetGeneration": 0
},
map.service.ts
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) => {
for(const c of res){
const lat = c.latitude;
const long = c.longtitude;
const marker = L.marker([long,lat]).addTo(map);
/*marker.bindPopup( `<center>
<p>
<strong>'${c.PlantID}'</strong>
</p>
</center>`
).openPopup() */
}
});
}
}
map.component.ts
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: '© OpenStreetMap'
});
tiles.addTo(this.map);
}
constructor(private markerService : MarkerService) { }
ngAfterViewInit():void{
this.initMap();
this.markerService.makesMarkers(this.map);
}
ngOnInit(): void {
this.initMap();
}
}

Answer 1

12k points is indeed a big number for Leaflet. Consider clustering, or canvas rendering.
See Large dataset of markers or dots in Leaflet
Also, Leaflet expects the coordinates order to be [latitude, longitude]
Looks like you also have some typos:
// In your data:
{
"Latitude": 63.210689,
"Longitude": -143.247156,
},
But:
// In your code:
const lat = c.latitude;
const long = c.longtitude;
// ...should have been:
const lat = c.Latitude;
const long = c.Longitude;