No markers and popup visible on map

Question

I am using ngx-leaflet plugin for leaflet. I have setup the base layers and added a listener for leafletMapReady event. In my handler, I tried adding a marker and a custom popup. The code for the handler is given below:

initMarkers(map: L.Map) {
    let m = this.markers[0];
    L.marker(L.latLng(m.lat, m.lon)).addTo(map).bindPopup(`<b style='color: red'>${m.num}</b>`).addTo(map);
}

where m is an object {lat, lon, num}. In my HTML, I have:

<div style="height: 550px"
    leaflet
    [leafletOptions]="options"
    [leafletLayersControl]="layersControl"
    (leafletMapReady)="initMarkers($event)"
></div>

When I open my map, there are no markers. I checked the console and compilation logs and there were no errors. What am I doing wrongly?

EDIT 1

Following the suggestion from @reblace, I tried to markers as a separate array. Here's my code:

map-widget.component.html

<div style="height: 550px"
   leaflet
   [leafletOptions]="options"
   [leafletLayersControl]="layersControl"
   [leafletLayers]="markers"
   (leafletMapReady)="initMarkers($event)"
></div>



map-widget.component.ts

import { Component, OnInit, Input } from '@angular/core';
import * as L from 'leaflet';

@Component({
   selector: 'sultana-map-widget',
   templateUrl: './map-widget.component.html',
   styleUrls: ['./map-widget.component.css']
})
export class MapWidgetComponent implements OnInit {

   @Input() respMarkers: any;

   markers: Array<L.Layer> = [];
   homeCoords = {
     lat: 23.810331,
     lon: 90.412521
   };

  options: any;
  layersControl: any;

  constructor() { 
  }

  ngOnInit() {
     this.options = {
     layers: [
        (L as any).tileLayer(
           'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}',
      {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 15,
        ext: 'png'
      }
    )
  ],
  zoom: 7,
  center: L.latLng(this.homeCoords.lat, this.homeCoords.lon)
};
this.layersControl = {
  baseLayers: {
    "Open Street Map": L.tileLayer(
      "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      { maxZoom: 15, attribution: '' }
    ),
    "Stamen Terrain": this.stamenMap('terrain'),
  }
};
}

stamenMap(type: string) {
   return (L as any).tileLayer(
     `https://stamen-tiles-{s}.a.ssl.fastly.net/${type}/{z}/{x}/{y}.{ext}`,
     {
       attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 15,
        ext: 'png'
      }
   );
 }
 initMarkers(map: L.Map) {
   // respMarkers is an array of market lat-lng and resp info
   console.log('Setting up markers');
   let layers: Array<L.Layer> = [];
   let rm = this.respMarkers[0];
   let l = L.marker(L.latLng(rm.lat, rm.lon)).bindPopup(`<b style='color: red; background-color: white'>${rm.num}</b>`);
   this.markers.push(l);
   //map.addLayer(L.marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`));
   //let l = new L.Marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`).addTo(map);
  //map.addLayer(l);
  /*for(let rm of this.respMarkers) {
     let latLng = L.latLng(rm.lat, rm.lon);
      console.log(latLng);
      layers.push(new L.Marker(latLng).bindPopup(`$`));
  }
  L.layerGroup(layers).addTo(map);*/
}
}

I don't know how I can debug the map; I have used both firefox and chrome and checked the logs and there are no errors

Did you debug and verify that the code is running as expected with valid lat/long values? Normally, I'd suggest you add the markers to the array you have bound to [leafletLayers], rather than adding them directly to the map. There's a basic example in the ngx-leaflet demo: https://github.com/Asymmetrik/ngx-leaflet/tree/master/src/demo/app/leaflet/layers — reblace, Apr 03 '19 at 02:49
@reblace The lat lon values are correct; I took them from an online location to geocoding service — Abrar Hossain, Apr 03 '19 at 07:52

score 1 · Accepted Answer · answered Apr 03 '19 at 08:12

Due to some issues which arise during webpack bundling you need to specify the marker icon when creating the markers.

so you need to specify the marker icon using a L.icon:

 markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
      shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
    })
  };

and then for instance create the markers by passing as a second argument the markerIcon:

L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
      .addTo(this.map)
      .bindPopup(popupInfo);

At the same time you add the marker to the map and bind the popup

Demo

You are a savior! Second time in the last twenty four hours your answer was spot on and solved the problem as expected. Thanks a lot!!! — Abrar Hossain, Apr 03 '19 at 08:21

No markers and popup visible on map

1 Answers1