typescript - ¿Cómo mostrar marcadores de Leaflet en Angular?

Estoy usando Leaflet y después de mucha investigación todavía no puedo hacer que mi marcador aparezca en mi mapa.

Probé todas las soluciones que pude encontrar por ahí. Incluso el truco de Angular sugerido por Leaflet. Por ahora logré obtener la imagen del marcador, con la ruta correcta para renderizarla en el HTML, aunque todavía no muestra la imagen. En otras palabras, obtengo la ruta correcta, encuentra la imagen, puedo ver todo eso en la consola, pero luego dice que no se puede cargar la imagen, lo cual es bastante engañoso porque definitivamente no hay nada mal con la imagen.

a continuación está mi código:

let markerIcon = L.icon({ iconUrl: 'src/assests/icons/marker.png'});
L.marker([48.208, 16.373], {
      icon: markerIcon,
      riseOnHover: true
}).addTo(map);

a continuación está la consola del html renderizado en el navegador con la ruta correcta y todo:

<img src="src/assests/icons/marker.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="transform: translate3d(659px, 207px, 0px); z-index: 207;">

¡Solo quería que ese marcador apareciera! Sin marcadores, todo mi proyecto es inútil.

Respuesta #1

Necesitas pasar un objeto de icono que definirá la ruta de la imagen del marcador de esta manera:

icon = {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 0 ],
      // specify the path here
      iconUrl: './node_modules/leaflet/dist/images/marker-icon.png',
      shadowUrl: './node_modules/leaflet/dist/images/marker-shadow.png'
   })
};

y luego const marker=L.marker([51.5, -0.09], this.icon).addTo(map);

No es necesario incluir la imagen del marcador en la carpeta de recursos porque ya está incluida en el paquete de Leaflet.

Aquí hay una demostración funcional con un marcador y un popup usando la última versión de Angular.