Angular + Leaflet + Leaflet Extra Markers

Question

I'm making SPA website based on net.core 3 and Angular 8 with Leaflet. I wanted to use Leaflet Extra Markers but can't get this thing to work.

I used NPM to install Extra Markers: https://www.npmjs.com/package/leaflet-extra-markers

npm i leaflet-extra-markers

So far so good. I create component - map.component.ts and below is the code. As long as I use Leaflet only everything is working fine. But then I try to add marker using Extra Markers and getting

TypeError: Cannot read property 'icon' of undefined.

I guess I'm missing something super simple but can't figure it out. Looks like Extramarkers does not extend Leaflet class? I don't know why...

Any help will be much appreciated.

import { AfterViewInit, Component } from '@angular/core';
import * as L from 'leaflet';
import { IMapObject } from '../models/map.model';

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
    private map;
    private mapObjects: IMapObject[] = [];

    constructor() { }

    ngAfterViewInit(): void {
        this.initMap();
    }

    private initMap(): void {
        this.map = L.map('map',
            {
                center: [52.246215, 21.223158],
                zoom: 18
            });

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

        tiles.addTo(this.map);

        this.createDummyMapObjects();

        this.mapObjects.map(o => {
            L.marker(o.position.latlon, { title: o.name, icon: greenIcon }).addTo(this.map).bindPopup(o.description);
        });

        // This is not working. Getting ERROR TypeError: Cannot read property 'icon' of undefined
        const redMarker = L.ExtraMarkers.icon({
            icon: 'fa-coffee',
            markerColor: 'red',
            shape: 'square',
            prefix: 'fa'
        });

        L.marker([51.941196, 4.512291], { icon: redMarker }).addTo(this.map);
    }

    private createDummyMapObjects(): void {

        const obj1: IMapObject = {
            id: 1,
            name: 'Test',
            category: 2,
            description: 'Test',
            position: {
                latlon: new Array(52.241103, 21.190475)
            }
        }

        const obj2: IMapObject = {
            id: 1,
            name: 'Test',
            category: 2,
            description: 'Test',
            position: {
                latlon: new Array(52.243149, 21.190883)
            }
        }

        this.mapObjects.push(obj1, obj2);
    }
}

EDIT: I followed advice and added script and json path to angular.json file. Now I'm getting:

Uncaught ReferenceError: L is not defined
    at leaflet.extra-markers.js:16
    at leaflet.extra-markers.js:13
    at leaflet.extra-markers.js:14

Looks like issue with import?

Answer 1

According to the documentation you need to include bootstrap version 3.3.7 and font-awesome version 5.12.0 respectively in your index.html

 <link
  rel="stylesheet"
  href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>

<!-- Font Awesome 5 SVG -->
<script
  defer
  src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"
></script>

Make sure you include these in your ts or the last 2 in your angular.json:

import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
import "leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css";
import "leaflet-extra-markers/dist/js/leaflet.extra-markers.js";

Demo