0

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    

    tiles.addTo(this.map);
  
  }

  constructor(private markerService : MarkerService) { }

  ngAfterViewInit():void{
    this.initMap();
    this.markerService.makesMarkers(this.map);
  }


  ngOnInit(): void {
    this.initMap();
  }
  

}
Ayman Sharaf
  • 11
  • 4

1 Answers1

0

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;
ghybs
  • 47,565
  • 6
  • 74
  • 99
  • I have made the adjustment here : const marker = L.marker([lat,long]).addTo(map); and reduced the size to 100 but still wasn't able to display the markers. Will try the canvas rendering but I am wondering what is the optimal amount too. – Ayman Sharaf Jun 10 '22 at 05:11
  • If your markers still do not show, it would probably be easier to debug if you can share a live reproduction example of your issue, e.g. using CodeSandbox or StackBlitz. – ghybs Jun 10 '22 at 07:30
  • Here : https://codesandbox.io/s/github/Ayman-git/leaflet?file=/src/app/map.service.ts I am not sure if this is what you are asking for but this is what I understood from your comment please let me know if there is anything. This is my first time using CodeSandbox but I can see all the files are uploaded but not sure how it works. – Ayman Sharaf Jun 10 '22 at 10:41
  • Sorry your CodeSandbox does not work, so it is difficult to see exactly what is going on. But you have simply a typo. – ghybs Jun 14 '22 at 19:02
  • Thanks, I have fixed the typo yet I am unable to view the markers, I am not sure how to use codesandbox but will try to make it work. For now, this is the github link https://github.com/Ayman-git/leaflet – Ayman Sharaf Jun 15 '22 at 20:07