Marker.PNG 404 Not Found when using Leaflet in ionic app

Ionic Framework
1

I am trying to add leaflet to my ionic app, the map is displaying as expected.

But no markers are displaying, & I’m getting these error messages in the console:

GET http://localhost:4200/marker-icon-2x.png 404 (Not Found)

GET http://localhost:4200/marker-shadow.png 404 (Not Found)

Here is my map-component.html:

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

Here is my typescript:

private map;
  constructor(private markerService: MarkerService) {
  }
  ngAfterViewInit(): void {
    this.initMap();
    this.markerService.makeCapitalMarkers(this.map);
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 3
    });
    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);
  }

And here is makeCapitalMarkers():

makeCapitalMarkers(map: L.map): void {
    this.http.get(this.capitals).subscribe((res: any) => {
      for (const c of res.features) {
        const lat = c.geometry.coordinates[0];
        const lon = c.geometry.coordinates[1];
        const marker = L.marker([lon, lat]);
        marker.addTo(map);
      }
    });
  }

Can someone please tell me why I’m getting that error message in the console, & how I can find these files? I can post whatever additional code is helpful too.

Thanks a lot in advance!

2

Hello, did you find the solution? I have the same problem…

3

You can change the current path of the icon in leaflet css. So don’t use the url leaflet.css, download the file and change it.

.leaflet-default-icon-path {
    background-image: url(https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png);
}
1 Like