Angular + Leaflet + Leaflet Extra Markers

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:

Solution 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

<linkhref="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/><!-- Font Awesome 5 SVG --><scriptdefersrc="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

Solution 2:

Did you include stylesheet and script in angular json?

"scripts": [
  "node_modules\leaflet-extra-markers\dist\js\leaflet.extra-markers.js"
],
styles": ["styles.css",
  "node_modules\leaflet-extra-markers\dist\css\leaflet.extra-markers.min.css"
],