CODEWITHSUNDEEP
javascriptangulartypescriptleafletangular-leaflet-directive
user18268316
user18268316

Reputation:

Markers not appearing on map using leaflet and angular

I am creating a map that displays a marker of coordinates that is stored in the database. However the marker does not appear on the map the map is a part of the component.ts file:

ngOnInit(): void {
    console.log(
      this.route.snapshot.paramMap.get('facviewid'),
      ' : ID of report'
    );
    this.getparamformid = this.route.snapshot.paramMap.get('facviewid');
    this.daformfacservice.getOneDAFacForm(this.getparamformid).subscribe((daFormFac: DAFormFac[]) => {
        this.daformfacs = daFormFac;
        console.log(daFormFac, 'response of form');
      });

      let map = L.map('map').setView([10.536421, -61.311951], 8);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ'
  }).addTo(map);
  this.mapService.getMarkers(map)
  }

I am calling the marker using the this.mapService.getMarkers(map) from the map service which has the getMarkers() function of:

baseURL: string = 'http://localhost:3000/DAFacility';
  constructor(private webReqService: WebRequestService, private http: HttpClient) { }

  getMarkers(map: L.Map): void {
    this.http.get(this.baseURL).subscribe((res: any)=> {
      for (const c of res){
        const lat = c.latitude;
        const lon = c.longitude;
        var marker = L.marker([lon, lat], {draggable: true}).addTo(map);
        marker.bindPopup(`<center><p><strong>${c.facilityName}</strong></p></center>`+ marker.getLatLng()).openPopup();
      }
      
    });
    
  }

the data is stored in the DAFacility database collection as :

data

The marker is not appearing on the map, i beleive it is how i called the map service but i tried all that i know and it did not work. Any help would be appreciated!

Upvotes: 1

Views: 541

Answers (1)

ghybs
ghybs

Reputation: 53360

Main probable reason is that Leaflet expects coordinates in [latitude, longitude] order, whereas you pass them in the opposite order, therefore placing your Markers in a different part of the world:

const lat = c.latitude;
const lon = c.longitude;
var marker = L.marker([lon, lat]).addTo(map); // Should be [lat, lon]

Upvotes: 1

Related Questions