Ionic react application does not recognize Leaflet Plugin

Question

I'm facing the following problem:

I want to include a Leaflet plugin (AwesomeMarkers) into my Ionic-React application. Following the ReadMe of the plugin, I have to include FontAwesome, the plugin JS file and the plugin CSS file after the leaflet library.

https://github.com/lvoogdt/Leaflet.awesome-markers

I did include it into my index.html and it looks like this:

    <!-- LEAFLET -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

   <!-- LEAFLET AWESOME MARKERS -->
    <script src="https://kit.fontawesome.com/d2ca6e6d71.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="assets/css/leaflet.awesome-markers.css">

    <script src="assets/leaflet.awesome-markers.min.js"></script>

Now I should be able to use the plugin via

window.L.AwesomeMarkers.icon({..})

but the window.L object does not have the AwesomeMarkers functions.

The AwesomeMarkers.js file and AwesomeMarkers.css get loaded with a Status 304 in my network analysis view.

I also installed leaflet and the plugin via npm, but it didn't solve my problem.

Can someone give me a hint why I am unable to use the plugin?

Thanks in advance

Answer 1

Solved it by saving the module with @types:

npm install --save @types/leaflet.awesome-markers

and importing it like this:

import 'leaflet.awesome-markers';