Question

marker is not visible on leaflet map

As i followed the same step by step to create leaflet map now map is visible but marker is not visible on map. below is the code snippet:- please let me know how to resolve the below issue:-

ERROR TypeError: Cannot read property 'addLayer' of undefined
    at NewClass.addTo (vendor.js:156997)
    at main.js:15357
    at Array.forEach (<anonymous>)
    at SafeSubscriber._next (main.js:15353)
    at SafeSubscriber.__tryOrUnsub (vendor.js:209959)
    at SafeSubscriber.next (vendor.js:209898)
    at Subscriber._next (vendor.js:209848)
    at Subscriber.next (vendor.js:209825)
    at CatchSubscriber._next (vendor.js:209848)
    at CatchSubscriber.next (vendor.js:209825)

map.component.ts

import { Component, AfterViewInit, OnInit } from '@angular/core';

import * as L from 'leaflet';
import { icon, Marker } from 'leaflet';
import { MarkerService } from 'src/app/core/e-commerce/_services/marker.service';

@Component({
  selector: 'kt-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss']
})
export class GoogleMapComponent implements OnInit, AfterViewInit {
  public map: any;
  public lonlat: any;
  public showMap: boolean = false;
  constructor(
    private markerService: MarkerService,
  ) {
  }

  ngOnInit(): void {
  }
  
  ngAfterViewInit(): void {
    this.markerService.makeCapitalMarkers(this.map);
    this.showMap = this.markerService.showMap;
    if(this.showMap == true){
      this.initMap();
    }
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 3
    });
    const iconRetinaUrl = 'assets/marker-icon-2x.png';
    const iconUrl = 'assets/marker-icon.png';
    const shadowUrl = 'assets/marker-shadow.png';
    const iconDefault = L.icon({
      iconRetinaUrl,
      iconUrl,
      shadowUrl,
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      tooltipAnchor: [16, -28],
      shadowSize: [41, 41]
    });
    L.Marker.prototype.options.icon = iconDefault;

    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);
  }
}

map.component.html

<div class="map-container">
    <div class="map-frame">
        <div id="map" *ngIf="showMap"></div>
    </div>
</div>

marker.service.ts

// Angular
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { AuthService } from '../../auth/_services/auth.service';
const BASE_URL = 'http://10.131.198.12/api';

@Injectable({
  providedIn: 'root'
})

export class MarkerService {
  // capitals: string = './assets/data/usa-capitals.geojson';
  capitals: string = '../../../../assets/data/usa-capitals.geojson';
  public showMap: boolean = false;

  constructor(private http: HttpClient,
    private marker: AuthService
  ) {
  }

  makeCapitalMarkers(map: L.map): void {
    this.marker.getAllRoutesLocation()
      .subscribe((res) => {
        const mapMarker = res;
        mapMarker.forEach(s1 => {
          const coordinates = s1.location.split(',');
          const lat = coordinates[0];
          const lon = coordinates[1];
          const marker = L.marker([lon, lat]).addTo(map);
        })
        this.showMap = true;
      })
  }
} 

// getAllRoutesLocation method form api service
public getAllRoutesLocation() {
    return barData = this.http.get(`${API_URL}/route/allLocation`);   
  }

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

Hi there,

I’ve seen a similar thread here, this usually happens when the map instance is created before the DOM could be fully loaded, so basically, the div with ID map does not exist yet. Have you tried to move the script tags which include the JavaScript from the head of the page to the end of the body tag?

Regards, Bobby